Design User Interface Components of an Adapter

This topic describes the configurable user interface components that the adapter developer can build on the adapter configuration page.

The Rapid Adapter Builder platform supports the following user interface components on the adapter configuration page:

• COMBO_BOX
• RADIO
• LIST_BOX
• TEXT_BOX
• TEXT_AREA
• BUTTON
• CHECK_BOX
• SHUTTLE_BOX
• TABLE
• FILE

The following sections show how to define the user interface components in flows and how to use them in the actions.

COMBO_BOX

A dropdown combo box user interface component that the adapter developer defines in a flow.

Sample code that shows how to implement the component in actions:

{
  "name": "comboBoxField",
  "displayName": "Combo Box",
  "description": "Combo Box Description",
  "type": "COMBO_BOX",
  "required": true,
  "options": [
    {
      "keyName": "ComboBoxOptionOne",
      "displayName": "Combo Box Option One"
    },
    {
      "keyName": "ComboBoxOptionTwo",
      "displayName": "Combo Box Option Two"
    },
    {
      "keyName": "ComboBoxOptionThree",
      "displayName": "Combo Box Option Three"
    }
  ]
}

Sample code that defines the component in flows:

{
  "name": "dynamicOperationField",
  "displayName": "Dynamic Operation",
  "description": "Dynamic Operation Description",
  "type": "COMBO_BOX",
  "options": "flow:dynamicOperationFlow",
  "required": true
}

Sample code for flow:

{
  "id": "dynamicOperationFlow",
  "description": "dynamicOperationFlow",
  "specVersion": "0.8",
  "version": "0.1",
  "start": "startState",
  "functions": [
    {
      "name": "constructResult",
      "type": "expression",
      "operation": "[{keyName:\"operationOne\", displayName:\"Dynamic Operation One\"},{keyName:\"operationTwo\", displayName:\"Dynamic Operation Two\"},{keyName:\"operationThree\", displayName:\"Dynamice Operation Three\"}]"
    }
  ],
  "states":[
    {
      "name":"startState",
      "type":"operation",
      "actions":[
        {
          "functionRef": "constructResult",
          "actionDataFilter": {
            "toStateData": "${ .actionOutput }"
          }
        }
      ],
      "end": true
    }
  ]
}

RADIO

A selectable radio selection user interface component that the adapter developer defines in a flow.

Sample code that shows how to implement the component in actions:

{
  "name": "radioField",
  "displayName": "Radio Option",
  "description": "Radio Option Description",
  "type": "RADIO",
  "required": true,
  "options": [
    {
      "keyName": "RadioOptionOne",
      "displayName": "Radio Option One"
    },
    {
      "keyName": "RadioOptionTwo",
      "displayName": "Radio Option Two"
    },
    {
      "keyName": "RadioOptionThree",
      "displayName": "Radio Option Three"
    }
  ]
}

Sample code that defines the component in flows:

{
  "name": "radioField",
  "displayName": "Dynamic Operation",
  "description": "Dynamic Operation Description",
  "type": "RADIO",
  "options": "flow:dynamicOperationFlow",
  "required": true
}

Sample code for flow:

{
  "id": "dynamicOperationFlow",
  "description": "dynamicOperationFlow",
  "specVersion": "0.8",
  "version": "0.1",
  "start": "startState",
  "functions": [
    {
      "name": "constructResult",
      "type": "expression",
      "operation": "[{keyName:\"operationOne\", displayName:\"Dynamic Operation One\"},{keyName:\"operationTwo\", displayName:\"Dynamic Operation Two\"},{keyName:\"operationThree\", displayName:\"Dynamice Operation Three\"}]"
    }
  ],
  "states":[
    {
      "name":"startState",
      "type":"operation",
      "actions":[
        {
          "functionRef": "constructResult",
          "actionDataFilter": {
            "toStateData": "${ .actionOutput }"
          }
        }
      ],
      "end": true
    }
  ]
}

LIST_BOX

A selectable dropdown list user interface component that the adapter developer defines in a flow.

Sample code that shows how to implement the component in actions:

{
  "name": "listBoxField",
  "displayName": "List Box",
  "description": "List Box Description",
  "type": "LIST_BOX",
  "required": true,
  "defaultValue": "ListBoxOptionThree",
  "options": [
    {
      "keyName": "ListBoxOptionOne",
      "displayName": "List Box Option One"
    },
    {
      "keyName": "ListBoxOptionTwo",
      "displayName": "List Box Option Two"
    },
    {
      "keyName": "ListBoxOptionThree",
      "displayName": "List Box Option Three"
    }
  ]
}

Sample code that defines the component in flows:

{
  "name": "listBoxField",
  "displayName": "Dynamic Operation",
  "description": "Dynamic Operation Description",
  "type": "LIST_BOX",
  "options": "flow:dynamicOperationFlow",
  "required": true
}

Sample code for flow:

{
  "id": "dynamicOperationFlow",
  "description": "dynamicOperationFlow",
  "specVersion": "0.8",
  "version": "0.1",
  "start": "startState",
  "functions": [
    {
      "name": "constructResult",
      "type": "expression",
      "operation": "[{keyName:\"operationOne\", displayName:\"Dynamic Operation One\"},{keyName:\"operationTwo\", displayName:\"Dynamic Operation Two\"},{keyName:\"operationThree\", displayName:\"Dynamice Operation Three\"}]"
    }
  ],
  "states":[
    {
      "name":"startState",
      "type":"operation",
      "actions":[
        {
          "functionRef": "constructResult",
          "actionDataFilter": {
            "toStateData": "${ .actionOutput }"
          }
        }
      ],
      "end": true
    }
  ]
}

TEXT_BOX

A text box user interface component that the adapter developer can refer to in a flow.

Sample code that shows how to implement the component in actions:

{
  "name": "textBoxField",
  "displayName": "Text Box",
  "description": "Text Box Description",
  "type": "TEXT_BOX",
  "default": "This Text Box Default Value",
  "required": true
}

Sample code that defines the component in flows:

{
  "name": "textBoxField",
  "displayName": "Text Box",
  "description": "Text Box Description",
  "type": "TEXT_BOX",
  "default": "flow:dynamicValueFlow",
  "required": true
}

Sample code for flow:

{
  "id": "dynamicValueFlow",
  "description": "dynamicValueFlow",
  "specVersion": "0.8",
  "version": "0.1",
  "start": "startState",
  "functions": [
    {
      "name": "constructResult",
      "type": "expression",
      "operation": "\"This value is returned from CNCF flow.\""
    }
  ],
  "states":[
    {
      "name":"startState",
      "type":"operation",
      "actions":[
        {
          "functionRef": "constructResult",
          "actionDataFilter": {
            "toStateData": "${ .actionOutput }"
          }
        }
      ],
      "end": true
    }
  ]
}

TEXT_AREA

A text area box user interface component that the adapter developer defines in a flow.

Sample code that shows how to implement the component in actions:

{
  "name": "textAreaField",
  "displayName": "Text Area",
  "description": "Text Area Description",
  "type": "TEXT_AREA",
  "default": "This Text Area Default Value",
  "required": true
}

Sample code that defines the component in flows:

{
  "name": "textBoxField",
  "displayName": "Text Box",
  "description": "Text Box Description",
  "type": "TEXT_BOX",
  "default": "flow:dynamicValueFlow",
  "required": true
}

Sample code for flows:

{
  "id": "dynamicValueFlow",
  "description": "dynamicValueFlow",
  "specVersion": "0.8",
  "version": "0.1",
  "start": "startState",
  "functions": [
    {
      "name": "constructResult",
      "type": "expression",
      "operation": "\"This value is returned from CNCF flow.\""
    }
  ],
  "states":[
    {
      "name":"startState",
      "type":"operation",
      "actions":[
        {
          "functionRef": "constructResult",
          "actionDataFilter": {
            "toStateData": "${ .actionOutput }"
          }
        }
      ],
      "end": true
    }
  ]
}

BUTTON

A button user interface component that the adapter developer can define in actions.

Sample code that shows how to implement the component in actions:

{
  "name": "buttonField",
  "displayName": "Button",
  "description": "Button Description",
  "default": "Click Me",
  "type": "BUTTON",
  "required": true
}

CHECK_BOX

A checkbox user interface component that the adapter developer can define in actions.

Sample code that shows how to implement the component in actions:

{
  "name": "checkBoxField",
  "displayName": "Check Box",
  "description": "Check Box Description",
  "default": "true",
  "type": "CHECK_BOX",
  "required": false
}

SHUTTLE_BOX

A shuttle box user interface component that the adapter developer can refer to in a flow.

Sample code that shows how to implement the component in actions:

{
          "name": "shuttleBoxField",
          "displayName": "Shuttle Box",
          "description": "Shuttle Box Description",
          "type": "SHUTTLE_BOX",
          "required": true,
          "default": "[\"shuttleBoxOptionOne\", \"shuttleBoxOptionThree\"]",
          "options": [
            {
              "keyName": "shuttleBoxOptionOne",
              "displayName": "Shuttle Box Option One"
            },
            {
              "keyName": "shuttleBoxOptionTwo",
              "displayName": "Shuttle Box Option Two"
            },
            {
              "keyName": "shuttleBoxOptionThree",
              "displayName": "Shuttle Box Option Three"
            },
            {
              "keyName": "shuttleBoxOptionFour",
              "displayName": "Shuttle Box Option Four"
            }
          ]
        }

Sample code that defines the component in flows:

{
  "name": "radioField",
  "displayName": "Dynamic Operation",
  "description": "Dynamic Operation Description",
  "type": "RADIO",
  "options": "flow:dynamicOperationFlow",
  "required": true
}

Sample flow code:

{
  "id": "dynamicOperationFlow",
  "description": "dynamicOperationFlow",
  "specVersion": "0.8",
  "version": "0.1",
  "start": "startState",
  "functions": [
    {
      "name": "constructResult",
      "type": "expression",
      "operation": "[{keyName:\"operationOne\", displayName:\"Dynamic Operation One\"},{keyName:\"operationTwo\", displayName:\"Dynamic Operation Two\"},{keyName:\"operationThree\", displayName:\"Dynamice Operation Three\"}]"
    }
  ],
  "states":[
    {
      "name":"startState",
      "type":"operation",
      "actions":[
        {
          "functionRef": "constructResult",
          "actionDataFilter": {
            "toStateData": "${ .actionOutput }"
          }
        }
      ],
      "end": true
    }
  ]
}

TABLE

A table user interface component that the adapter developer defines in actions.

Sample code that shows how to implement the component in actions:

{
  "name": "tableField",
  "displayName": "Table",
  "description": "Table",
  "type": "TABLE",
  "required": true,
  "default": "[[\"param3\", \"string\"], [\"param4\", \"boolean\"]]",
  "columns": [
    {
      "name": "queryParamField",
      "displayName": "Name",
      "type": "TEXT_BOX"
    },
    {
      "name": "queryParamField",
      "displayName": "Data Type",
      "type": "COMBO_BOX",
      "options": [
        {
          "keyName": "string",
          "displayName": "string"
        },
        {
          "keyName": "boolean",
          "displayName": "boolean"
        },
        {
          "keyName": "integer",
          "displayName": "integer"
        },
        {
          "keyName": "number",
          "displayName": "number"
        }
      ]
    }
  ]
}

FILE

A drag and drop user interface component to attach a file. The adapter developer can define this component in actions.

Sample code that shows how to implement the component in actions:

{
         "name": "fileField",
         "displayName": "File Field",
         "description": "File Field Description",
         "type": "FILE",
         "required": false
       }