カスタム処理の作成
カスタム・アクションを作成するには、そのメタデータをJSONファイルに指定し、そのコードをJavaScriptファイルに指定します。 メタデータには、アクションに関する基本的な詳細、実装メソッドに必要な入力パラメータ、およびオプションで値を返すためのオブジェクトが含まれます。
カスタム・アクションの作成に必要な概要を次に示します:
- 「アクション・ファイルの作成」 (
action.json
およびaction.js
):- action.json: カスタム・アクションのメタデータが含まれます。 入力パラメータを定義し、値を返すオブジェクトを定義するために使用します。 このファイルは、アクション・パレットにアクションを追加したり、プロパティ・ペインにアクションのプロパティを表示するためにデザイナによっても使用されます。
- action.js: カスタム・アクションの実装に使用されるコードが含まれます。
- 「メタデータの追加」から
action.json
。 -
action.js
へのカスタム・アクションの場合は「コードの追加」。
アクション・ファイルの作成
テンプレートaction.js
およびaction.json
ファイルを作成するには、次から開始します:
-
Web Appsタブを選択し、アプリケーション・ノード(最初のノード)とその下にあるリソースノードを展開し、actionsノードの横にあるカスタム・アクションの作成アイコン(+)をクリックします:
図create-custom-action-web-apps-tab.jpgの説明 - IDフィールドに、新しいカスタム・アクションのアクション・グループ・フォルダの名前を入力し、その後にスラッシュと新しいアクションの名前を入力:
<action-group>/<action-name>
たとえば、
my_awesome_actions/sayhello
と入力します。ここで、my_awesome_actions
はグループ・フォルダの名前、sayhello
はアクションの名前です。次に示すように、新しく作成された2つの
action.js
およびaction.json
テンプレートは、パスresources/actions/<action-group>/<action-name>/
の下に格納されます:
図custom-action-files-navigator.jpgの説明
メタデータの追加
カスタム・アクションのメタデータは、次のものを含むaction.json
ファイルに指定します:
- アクションの基本詳細(ID、表示名、アイコン…)
- アクションの実装メソッド(オプション)から値を返すために使用されるオブジェクト
- アクションの実装メソッドに必要な入力パラメータ(オプション)
アクション・チェーン・エディタは、メタデータを使用してカスタム・アクションを「アクション」パレットに追加し、そのパラメータを「プロパティ」ペインに表示します:
図jsac-say-hello-action-properties.pngの説明
action.json
ファイルを作成すると、デフォルト・パラメータIDおよび説明が自動的に作成されますが、そのメタデータはaction.json
に追加されません。 カスタム・アクションに追加する入力パラメータおよび戻りオブジェクトのメタデータのみを追加します。
次に、サンプルのsayHello
カスタム・アクションのaction.json
ファイルの例を、そのパートの内訳とともに示します:
図custom_action_parts_of_metadata.pngの説明
- 最初のプロパティ・セットでは、カスタム・アクションに関する基本的な詳細が提供されます。
-
resultShape
プロパティは、アクションの実装メソッドによって返されるオブジェクトの定義を提供します。これは、アクション・チェーンの作成時に別のアクションの入力として使用できます。 たとえば、このアクションによって返される文字列は、文字列をログファイルに書き込むアクションの入力にすることができます。 -
propertyInspector
プロパティは、アクションの入力パラメータを定義します。
カスタム処理プロパティの定義
この表は、action.json
ファイルでカスタム・アクションのプロパティを定義するのに役立ちます。
プロパティ | 必須 | 説明 |
---|---|---|
"id": "", | はい | カスタム・アクションの一意のID。 |
"category": "My Category", | いいえ | 処理パレットにカスタム処理を含めるカテゴリ。 指定しない場合、アクションがカスタム・アクション(「カスタム」)のデフォルト・カテゴリの下に配置されます。 |
"defaultParameters": { }, | いいえ | 入力パラメータが定義されていて、デフォルト値が必要な場合は、このプロパティを使用して、入力パラメータ名と値(名前と値のペア)を指定してデフォルト値を指定します。 アクションが最初にアクション・チェーンに追加されると、デフォルトが割り当てられます。 |
"description": "", | いいえ | カスタム・アクションの簡単な説明。 |
"displayName": "", | はい | アクション・パレットに表示する名前。 |
"helpDescription": "", | いいえ | ユーザーがプロパティ・ペインでアクション・タイトルをマウス・オーバーして疑問符アイコンをクリックすると、アクションに表示されるヘルプ・テキスト。 |
"iconClass": "", | はい | アクション・パレットでアクションに表示するアイコン。 |
"referenceable": "self | extension" | いいえ | 拡張でアクションを使用できるかどうかを示します。デフォルトはself で、拡張で使用できないことを示します。
|
"idPrefix": "", | いいえ | アクション・チェーンに追加されるアクションのアクションIDを自動生成するために使用します。 アクションがアクション・チェーンに追加されると、プロパティ・ペインのアクションIDフィールドに自動入力されます。 指定した場合、このプロパティ値を使用してIDフィールドが移入され、それ以外の場合はアクション名が使用されます。 |
"resultShape": { "someName": "string" }, | いいえ | 実装メソッドによって1つ以上の値が返される場合は、このプロパティを使用して、返すオブジェクトを定義します。 |
"showInDiagram": "on" | "off" | いいえ | on に設定すると、フロー図のアクション・パレットでアクションを使用できます。
|
"tests": { "requiresMock": "on" | "off" } | いいえ |
アクション・チェーン・テストのアクション・モック要件の設定: オン: アクションをモックする必要があることを示します。 オフ: Visual Builderは、 デフォルトは |
"propertyInspector": [{}] | いいえ | 実装メソッドに必要な入力パラメータのMetadata。 入力パラメータは、アクション・エディタのプロパティ・ペインに表示されます。 |
カスタム・アクションの入力パラメータの定義
この表を使用して、カスタム・アクションの入力パラメータを定義します。 action.json
ファイルで、propertyInspector
プロパティを使用して必要なパラメータを定義します。
プロパティ | 必須 | 説明 |
---|---|---|
"name": "", | はい | 入力パラメータの名前。 |
"help": "", | いいえ | ユーザーがプロパティ・ペインでパラメータ・タイトルの上にカーソルを移動して疑問符アイコンをクリックすると、入力パラメータに表示されるヘルプ・テキスト。 |
"label": "", | はい | プロパティ・ペインの入力パラメータに表示するラベル。 |
"placeholder": "", | いいえ | プロパティ・ペインの入力パラメータに表示するヒント・テキスト。 |
"required": true | false、 | いいえ | 入力パラメータに値が必要かどうかを示します。 |
"options": [{}], | いいえ | 入力パラメータのcomponent プロパティがcomboboxOne またはcomboboxMany に設定されている場合、このプロパティを使用して、コンボ・ボックスで使用可能なすべての値を指定します。
|
"type": "", | はい | パラメータ・データ型。数値、文字列、ブールまたはオブジェクトを指定できます。タイプを指定しない場合、値は文字列として格納されます。 |
"component: "inputText | textArea | comboboxOne | comboboxMany" | はい | パラメータがテキスト・フィールド、テキスト・ボックスまたは単一または複数の選択を含む組合せであるかどうかを示します。 |
コードの追加
新しいアクションを最初に作成したときに作成されたaction.js
テンプレート・ファイルを使用して、カスタム・アクションのコードを指定します。
アクションのコードを指定するには、入力パラメータparameters
を受け取るperform()
メソッドを使用します。 入力パラメータには、プロパティ・ペインで入力したアクションの入力パラメータの値が含まれます。
入力パラメータを渡す方法
alert()
メソッドを使用してサンプルのsayHello
カスタム・アクションを実装するaction.js
のperform()
メソッドの例を次に示します:
define(['vb/action/action'], (Action) => {
'use strict';
class CustomAction extends Action {
perform(parameters) {
const to = parameters.to;
const message = parameters.message;
alert(`${message}, ${to}`);
if (to && message ) {
return Action.createSuccessOutcome({result: to + ", " + message});
}
return Action.createFailureOutcome({result: "Something wrong, unable to SayHello"});
}
}
return CustomAction;
});
プロパティ・ペインのアクションの入力パラメータ宛先およびメッセージに入力した値は、入力パラメータparameters
(前述のコードを参照)を使用してperform()
メソッドに渡されます。
「
図jsac-say-hello-input-params.pngの説明」
コードへのパスの指定
最後に、app-flow.json
ファイルにrequirejs
プロパティを追加して、カスタム・アクション・コード・ファイルが格納される場所をVisual Builderに指定する必要があります。 ステップは、次のとおりです。
- ナビゲータのWeb Appsタブでwebアプリケーションを選択し、JSONタブを選択して
app-flow.json
ファイルを開きます。 - 次の形式を使用して、
requirejs
プロパティをapp-flow.json
に追加し、パスに名前を付けることで、カスタム・アクションのコード・ファイルへのパスを指定します:
â<custom-action-ID>â: âresources/actions/<action_group>/<action_name>â
この例では、<custom-action-ID>
は、action.json
で指定されたカスタム・アクション(大/小文字を区別)のIDです。
次に、パスを指定する例を示します:
"requirejs": {
"paths": {
"demo/SayHello": "resources/actions/my_awesome_actions/sayhello/action"
}
},