アクションの設定

コンポーネントを設定してアクション登録を活用することにより、コンポーネント内でアクションを実行するページにコンポーネントをドロップできるようになります。

アクションの登録

トリガーが呼び出されると、コンポーネントでアクションがコールされます。コンポーネントは、任意の数のアクションを登録できるほか、アクションがサポートしているペイロードを定義することもできます。ユーザーは、アクションを選択するときに、アクションに渡すペイロードを移入できます。

トリガーを登録する場合と同じように、コンポーネントがサポートしているアクションをテーマのappinfo.json登録データに登録できます。

アクションを登録する方法の例は、次のとおりです:

  1. コンポーネントのappinfo.jsonファイルを編集し、"actions":[],エントリを更新します。
    "actions": [{
      "actionName": "helloWorldChangeWhoIAm",
      "actionDescription": "Change Who I Am",
      "actionPayload": [{
        "name": "whoAreYou",
        "description": "Who are you?",
        "type": {
          "ojComponent": {
           "component": "ojInputText"}
          },
        },
        "value": ""
      }]
    }]
  2. アクションは、登録された後、コンポーネントの「設定」パネル上の「リンク」タブでトリガーをクリックするときに呼び出されるアクション・ダイアログに表示されます。

アクションの実行

アクションを登録したら、コンポーネント内のアクションを実行するページにコンポーネントをドロップできるようになります。コンポーネントがアクションを実行するには、EXECUTE_ACTIONメッセージをリスニングする必要があります。このメッセージには、アクションに渡されるペイロードが含まれ、ここから想定される値を抽出する必要があります。

例として、EXECUTE_ACTIONメッセージをリスニングするには、render.jsファイルを編集し、次のエントリを使用してViewModelオブジェクトを更新します:
self.executeActionListener = function (args) {
  // get action and payload
  var payload = $.isArray(args.payload) ? args.payload[0] : {},
        action = args.action,
        actionName = action && action.actionName;

  // handle 'helloWorldChangeWhoIAm' actions
  if ((actionName === 'helloWorldChangeWhoIAm') && (payload.name === 'whoAreYou')) {
    self.whoAreYou(payload.value);
  }
};

これにより、アクションを実行するためのJavaScript関数が作成され、EXECUTE_ACTIONメッセージが呼び出されるたびにサイトSDKを使用して関数がコールされます。

このアクションは、EXECUTE_ACTIONメッセージが呼び出されるたびにコールされ、処理対象として設計されているアクションのみを処理するかどうかはコンポーネント次第です。これを行うには、アクションの名前を確認し、それが処理可能なアクションであることを確認する必要があります。

アクションのペイロードは値の配列です。この例では、値は配列内の最初のエントリであることが前提です。通常、関心のあるペイロード値を配列から探し出す必要があります。

注:

アクション・リスナーはコールバックであるため、JavaScriptクロージャを使用するか、関数を適切にバインドし、関数の実行時にViewModelにアクセスできることを確認する必要があります。