機械翻訳について

アダプタのユーザー・インタフェース・コンポーネントの設計

このトピックでは、アダプタ開発者がアダプタ構成ページで構築できる構成可能なユーザー・インタフェース・コンポーネントについて説明します。

Rapid Adapter Builderプラットフォームでは、アダプタ構成ページで次のユーザー・インタフェース・コンポーネントがサポートされます:

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

次の項では、フローでユーザー・インタフェース・コンポーネントを定義する方法と、それらのコンポーネントをアクションで使用する方法を示します。

COMBO_BOX

アダプタ開発者がフローで定義するドロップダウン・コンボ・ボックス・ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

{
  "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"
    }
  ]
}

フロー内のコンポーネントを定義するサンプル・コード:

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

フローのサンプル・コード:

{
  "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

アダプタ開発者がフローで定義する選択可能なラジオ選択ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

{
  "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"
    }
  ]
}

フロー内のコンポーネントを定義するサンプル・コード:

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

フローのサンプル・コード:

{
  "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

アダプタ開発者がフローで定義する選択可能なドロップダウン・リスト・ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

{
  "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"
    }
  ]
}

フロー内のコンポーネントを定義するサンプル・コード:

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

フローのサンプル・コード:

{
  "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

アダプタ開発者がフローで参照できるテキスト・ボックス・ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

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

フロー内のコンポーネントを定義するサンプル・コード:

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

フローのサンプル・コード:

{
  "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

アダプタ開発者がフローで定義するテキスト・エリア・ボックス・ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

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

フロー内のコンポーネントを定義するサンプル・コード:

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

フローのサンプル・コード:

{
  "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

アダプタ開発者がアクションで定義できるボタン・ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

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

CHECK_BOX

アダプタ開発者がアクションで定義できるチェック・ボックス・ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

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

SHUTTLE_BOX

アダプタ開発者がフローで参照できるシャトル・ボックス・ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

{
          "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"
            }
          ]
        }

フロー内のコンポーネントを定義するサンプル・コード:

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

サンプル・フロー・コード:

{
  "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

アダプタ開発者がアクションで定義する表ユーザー・インタフェース・コンポーネント。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

{
  "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

ファイルを添付するためのドラッグ・アンド・ドロップ・ユーザー・インタフェース・コンポーネント。 アダプタ開発者は、このコンポーネントをアクションで定義できます。

アクションでコンポーネントを実装する方法を示すサンプル・コード:

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