properties

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.

Component Configuration

Configuration properties are defined using two objects schema and inspector.

properties.schema

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:

{
"properties": {
"schema": {
"properties": {
"interval": {
"type": "integer",
"minimum": 5,
"maximum": 35000
}
},
"required": [
"interval"
]
}
}

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:

Invalid Inspector field
Configuration Overview

properties.inspector

inspector tells the Designer UI how the input fields should be rendered. The format of this definition uses the Rappid Inspector definition format. Example:

{
"properties: {
"inspector": {
"inputs": {
"config": {
"interval": {
"type": "number",
"group": "config",
"label": "Interval (in minutes, min 5, max 35000)"
}
}
},
"groups": {
"config": {
"label": "Configuration",
"index": 1
}
}
}
}
}

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.

Inspector built-in types:

text

A single line input field.

{
"type": "text",
"label": "Text message."
}

textarea

A multi-line text input field.

{
"type": "textarea",
"label": "A multi-line text message."
}

number

A numerical input field. Additional configuration includes min, max and step numbers.

{
"type": "number",
"label": "A numerical input.",
"min": 1,
"max": 10,
"step": 1
}

select

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.

multiselect

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.

{
"type": "multiselect",
"options": [
{ "content": "one", "value": 1 },
{ "content": "two", "value": 2 },
{ "content": "three", "value": 3 }
],
"placeholder": "-- Select something --",
"label": "Multi Select box"
}

date-time

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:

Option

Description

format

String representing the format of the date/time. Please see the moment.js library documentation for all the available tokens: https://momentjs.com/docs/#/parsing/string-format/.

enableTime

Boolean. Enables time picker.

enableSeconds

Boolean. Enables seconds in the time picker.

maxDate

String representing the maximum date that a user can pick to (inclusive).

minDate

String representing the minimum date that a user can pick to (inclusive).

mode

Mode of the date/time picker. Possible values are "single", "multiple", or "range".

time_24hr

Boolean. Displays time picker in 24 hour mode without AM/PM selection when enabled.

weekNumbers

Boolean. Enables display of week numbers in calendar.

{
"type": "date-time",
"label": "Date",
"config": {
"enableTime": true
}
}

toggle

A toggle input field allows the user to switch between true/false values.

{
"type": "toggle",
"label": "Toggle field"
}

color-palette

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()).

{
"type": "color-palette",
"label": "Color palette",
"options": [
{ "value": "green", "content": "Green" },
{ "value": "yellow", "content": "Yellow" },
{ "value": "orange", "content": "Orange" },
{ "value": "red", "content": "Red" },
{ "value": "purple", "content": "Purple" }
]
}

select-button-group

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.

{
"type": "select-button-group",
"label": "Select button group",
"options": [
{ "value": "line-through", "content": "<span style=\"text-decoration: line-through\">S</span>" },
{ "value": "underline", "content": "<span style=\"text-decoration: underline\">U</span>" },
{ "value": "italic", "content": "<span style=\"font-style: italic\">I</span>" },
{ "value": "bold", "content": "<span style=\"font-weight: bold\">B</span>" }
]
}
{
"type": "select-button-group",
"label": "Select button group",
"multi": true,
"options": [
{ "value": "line-through", "content": "<span style=\"text-decoration: line-through\">S</span>" },
{ "value": "underline", "content": "<span style=\"text-decoration: underline\">U</span>" },
{ "value": "italic", "content": "<span style=\"font-style: italic\">I</span>" },
{ "value": "bold", "content": "<span style=\"font-weight: bold\">B</span>" }
]
}
{
"type": "select-button-group",
"label": "Select button group with icons",
"multi": true,
"options": [
{ "value": "cloud", "icon": "data:image/png;base64,iVBORw0KGgoAA..." },
{ "value": "diamond", "icon": "data:image/png;base64,iVBORw0KGgoAAAA..." },
{ "value": "oval", "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUh..." },
{ "value": "line", "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." },
{ "value": "ellipse", "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU..." }
]
}

expression

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.

{
"type": "expression",
"label": "Filter expression",
"levels": ["OR", "AND"],
"fields": {
"myText": {
"type": "text",
"label": "Column",
"required": true,
"index": 1
},
"mySelect": {
"type": "select",
"label": "Filter action",
"variables": false,
"required": true,
"options": [
{ "content": "Equals", "value": "equals" },
{ "content": "Not Equals", "value": "notEquals" }
],
"index": 2
},
"myAnotherText": {
"label": "Filter value",
"type": "text",
"defaultValue": "My Filter",
"index": 3
}
]
}

The value of this field has the following structure:

{
"OR": [
{
"AND": [
{ "myText": "My column name", "mySelect": "My filter action", "myAnotherText": "My filter value" },
{ "myText": "Another column name", "mySelect": "Another filter action", "myAnotherText": "Another filter value" }
]
},
{
"AND": [
{ "myText": "Alternative column", "mySelect": "Alternative action", "myAnotherText": "Alternative value" }
]
}
]
}

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"].

properties.source

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:

{
"source": {
"url": "/component/appmixer/google/spreadsheets/ListColumns?outPort=out",
"data": {
"messages": {
"in": 1
},
"properties": {
"sheetId": "properties/sheetId",
"worksheet": "properties/worksheet"
},
"transform": "./transformers#columnsToInspector"
}
}
}

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.:

{
inputs: { ... },
groups: { ... }
}

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:

module.exports.columnsToInspector = (columns) => {
let inspector = {
inputs: {},
groups: {
columns: { label: 'Columns', index: 1 }
}
};
if (Array.isArray(columns) && columns.length > 0) {
columns.forEach((column, index) => {
inspector.inputs[column[0]] = {
type: 'text',
group: 'columns',
index: index + 1
};
});
}
return inspector;
};

properties.source.url

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:

"/component/appmixer/google/spreadsheets/ListColumns?outPort=out"

properties.source.data.messages

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.source.data.properties

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:

{
"properties": {
"targetComponentProperty": "properties/myProperty"
}
}

properties.source.data.transform

The transformation function used to transform the output of the target component. It should return an inspector-like object, i.e.:

{
inputs: { ... },
groups: { ... }
}

Example:

{
"transform": "./transformers#columnsToInspector"
}

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.