properties
Last updated
Last updated
The configuration properties of the component. Note that unlike properties specified on input ports (described later on in the documentation), these properties cannot be configured by the user to use data coming from the components back in the chain of connected components. In other words, these properties can only use data that is known before the flow runs.
Configuration properties are defined using two objects schema
and inspector
.
schema
is a JSON Schema definition (http://json-schema.org) of the properties, their types and whether they are required or not. An example looks like this:
The JSON Schema gives you enough flexibility to describe your property types and the required format, possibly using regular expressions or other mechanisms. When the user fills in the forms in the Designer UI inspector to configure their components, the Designer automatically validates all inputs using the schema. If any of the properties are invalid, the Designer UI gives an immediate feedback to the user that they should correct their configuration:
inspector
tells the Designer UI how the input fields should be rendered. The format of this definition uses the Rappid Inspector definition format. Example:
As you can see, fields (e.g. interval
in this case) are nested inside the inputs
object and have the following properties:
type
can be any of the built-in types. See below for more details. (Custom inspector fields are also possible for on-prem installations. See the Custom Inspector Fields page for more details.)
group
is an identifier of an Inspector group this field belongs to. As you can see in the example above, you can have one or more custom groups (like config
in this case) that you can define in the groups
object. Groups will render in the Inspector UI in an accordion-like fashion. This is handy to organize your fields.
label
is a short text that appears above your input field. This is a great place to tell your users what your field is.
A single line input field.
A multi-line text input field.
A numerical input field. Additional configuration includes min, max and step numbers.
A menu of options. Options are defined in the options
array each item having content
and value
properties. Note that content
can be HTML. You can optionally provide placeholder
that is displayed if no option is selected. Default values can be defined with defaultValue
. If you need one of the items to clear the value of the select input field, use { "clearItem": true, "content": "Clear" }
as one of the objects in the options
array.
Similar to select
type, multiselect defines options the user can choose from. The difference is that with multiselect, the user can select multiple options, not only one. The value stored in the flow descriptor is an array of values the user selected. Supported options are options
and placeholder.
A date-time input field allows the user to select a date/time using a special date/time picker interface. The date-time input field can be configured to support different type of formats or modes (only date or date-time combination). The configuration is stored in the "config" object. The following table shows list of all the available options:
A toggle input field allows the user to switch between true/false values.
A menu of colors. Colors are defined in the options
array each item having content
and value
properties, where values
must be a color in any of the CSS color formats (named-color, hex-color, rgb() or hsl()).
A group of toggle buttons. Both single and multiple selection is allowed (can be controlled with the multi
flag). Buttons are defined in the options
array each item having value
, content
and icon
properties.
A multi-field type field that allows for definition of logical expressions (OR/AND) or dynamic field definitions. This field accepts a list of other inspector field types (text, textarea, number, toggle, ....) and renders a "field builder" UI that enables the user to dynamically create nested fields.
The value of this field has the following structure:
Note that by specifying the levels
option, you can define the nesting. Currently, maximum of 2 levels of nesting is supported. The common use case is to use just one level. In that case, set e.g. "levels": ["ADD"]
.
The exclusiveFields
is an optional property which defines the fields that will use variables in an exclusive way. For example let's say that the component has variableA
and variableB
available for use in its fields. Now if the myText
field is in exclusiveFields
array that means that you can use each variable once across all the fields inside the expression groups. To clarify this further, imagine the following scenario configuring an expression type:
Click the ADD
button to create a second group
Select variableA
on the myText
field inside the first group using the variables picker
When opening the variables picker in myText
field inside the second group, only variableB
will be available, because variableA
is already been used
An input that allows selecting and uploading files from the user's computer. When clicked, it will open the browser's file selector, and the file selected will be uploaded to Appmixer and referenced on the input.
Similar to the filepicker input, this one allows users to select files or folders on their Google Drive accounts. When clicked a Google Drive file picker is opened, showing the user's Google Drive content. When selecting a folder/file, the input value becomes an object which includes the Id of the folder/file which should be used on Google API calls to reference that asset.
You can use googlepicker to pick folders instead of files:
This input type needsappmixer.google.drive.GooglePicker
component to be installed.
Similar to the googlepicker, this one allows users to select files or folders from their OneDrive accounts. When clicked, an OneDrive file picker is opened, showing the user's OneDrive content. When selecting a folder/file, the input value becomes an object which includes the id of the folder/file which should be used on OneDrive API calls to reference that asset.
The view property works similar to the same property on googlepicker. It can be used to determine what is shown on the picker. You can use 3 values: files
, folder
, all
. As their names indicate, if select files
, only files will be shown, if you select folder
it will show only your folders and if you select all
it will show both. This input type needs appmixer.microsoft.onedrive.OneDrivePicker
component to be installed.
There are some cases when you want to show input fields depending on other values in the inspector. This allows to a better UX for component configuration. For this we use the when
property in the field we want to be conditional:
The when field has the following structure: { op: { field: comparisonValue }}
.
op: Is the operand that will be used to determine if the condition holds true or false. The following operands are supported:
eq
: Equality between the values.
equal
: Equality between the values by deep comparison. Used for objects and arrays.
ne
: Values are not equal.
regex
: Check if the value in given field
matches the regex in the comparisonValue
.
text
: Check if the value in the given field
contains the string in the comparisonValue
.
lt
: Check if the value in the given field
is less than the comparisonValue
.
lte
: Check if the value in the given field
is less or equal than the comparisonValue
.
gt
: Check if the value in the given field
is greater than the comparisonValue
.
gte
: Check if the value in the given field
is greater or equal than the comparisonValue
.
in
: Check if the value in the given field
is included on the given comparisonValue
array.
nin
: Check if the value in the given path is not included in the given comparisonValue
.
field: The field that is used for comparison, there are several ways to reference the field:
field
: The same form presented in the example. It will search the given fields in current input port fields.
properties/someProperty
: Refer to a property inside component properties.
./field
: It will refer to sibling fields of the current field. Specially useful when working with expression types.
comparisonValue: The value used to compare the field against.
As it was mentioned, conditional fields also work with expression types, allowing to control the field rendering inside those expressions:
Sometimes the structure of the inspector is not known in advance and it cannot be hardcoded in the manifest. Instead, the inspector fields are composed dynamically based on the data received from an API. A good example is the google.spreadsheets.CreateRow component where the inspector renders fields representing columns fetched from the actual worksheet. For this to work, we can define the source
property in the manifest that calls a component of our choosing in a so called "static" mode. For example:
In the example above, we call the ListColumns component and we're interested in the output coming from the output port out
.Since this is just a normal component, we need to transform the result into the inspector-like object, i.e.:
We need to tell Appmixer where it can find the transformation function. For this we use the transform
property which tells Appmixer to look for the transformers.js
file inside the ListColumns/
directory. The transformer must return an object with a function named columnsToInspector
that can look like this:
A special URL that identifies a component that should be called in a "static" mode. It has to be of the form /component/[vendor]/[service]/[module]/[component]
. It should also contain outPort
in the query string that point to the output port in which we're interested to receive data from. Example:
Messages that will be sent to the input port of the component referenced by the properties.source.url
. Keys in the object represent input port names and values are any objects that will be passed to the input port as messages.
Properties that will be used in the target component referenced by the properties.source.url
. The target component must have these properties defined in its manifest file. The values in the object are references to the properties of the component that calls the target component in the static mode. For example:
The transformation function used to transform the output of the target component. It should return an inspector-like object, i.e.:
Example:
The transform function is pointed to be a special format [module_path]#[function]
, where the transformation module path is relative to the target component directory.