ステップ6: トリガーの生成

このステップでは、登録済のトリガーを生成する方法について説明します。

トリガーは、コンポーネントによって任意の時点で発生させることができます。通常、これはユーザーによる操作、ボタンのクリック、または表内の行の選択によって発生します。ただし、コンポーネントでは、RESTコールによってデータが変更されたときなど、任意の条件に基づいてトリガーを発生させることができます。

このサンプルでは、イメージをクリックすると、whoAreYouプロパティの現在の値を渡すトリガーが生成されます。

render.jsファイルを確認し、SampleComponentViewModelオブジェクトを確認します。

トリガーを生成するには:

Sites SDKをコールしてトリガーを起動するSampleComponentViewModelオブジェクトの関数を確認します。

self.raiseTrigger = function (triggerName) {
  SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
    'triggerName': triggerName, 
    'triggerPayload': { 
        'payloadData': 'some data here'
    }
  });
};

次は、この関数を呼び出してトリガーを発生させるために、ユーザー・インタフェースに何かが必要です。 render.jsファイルを確認し、sampleComponentTemplateオブジェクトを更新して次のエントリを作成します:
```
     '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
```

SampleComponentViewModelオブジェクトには、イメージのクリック時に呼び出されるJavaScript関数が表示されます。この関数は、ステップ2でclickバインディングから渡された値であるトリガー"imageClicked"に対して定義されたすべてのアクションをトリガーするように、Sites SDKを呼び出します。また、単一のフィールドを持つtriggerPayloadも通過:payloadDataを通過し、静的な値'some data here'を通過します。これらの値imageClickedおよびwhoAreYouは、トリガーが登録されているappinfo.jsonファイルの値(前のステップ)と一致します。

サンプル・コードでは、トリガーはclickバインディングのデータ・バインドによって呼び出され、トリガー名imageClickedに渡されます。現在、ユーザーが選択したレイアウトに基づいて、<scs-image>コンポーネントの3つのレンダリングがあります。各レイアウトでトリガーが発生するようにするには、render.jsファイルを編集して次の変更を加えます。

様々なレイアウトからトリガーを発生させます。次のコードの2つのエントリを見つけます。

'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}">' +

コードを次のように変更します。

'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +

トリガーに渡すためにペイロードを指定します。このコードを変更します:

    self.raiseTrigger = function (triggerName) {
      SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
        'triggerName': triggerName,
        'triggerPayload': {
          'payloadData': 'some data here'
        }
      });
    };

かわりに、次のコードを使用します。

    self.raiseTrigger = function (triggerName) {
      SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
        'triggerName': triggerName,
        'triggerPayload': {
          'payloadData': self.imageBannerText() // pass banner text as payload
        }
      });
    };

render.jsファイルをOracle Content Managementインスタンス・サーバーに同期またはアップロードします。

これで、必要なコードを確認しました。ボタンがクリックされたときにカスタム・コンポーネントによってトリガーが発生するよう、トリガーを配置できます。

ステップ6の結果の確認

これで、トリガーに対して実行するアクションを登録することや、トリガー発生時にアクションを実行することができるようになりました。

サイト・ビルダーがコンポーネントへの変更を選択できるように、サイト内のページをリフレッシュします。
ページを編集モードにします。
コンポーネントをページにドラッグ・アンド・ドロップします。
コンポーネントに対する「設定」パネルを開きます。
「設定」パネル上部にある「リンク」タブを選択します。
「リンク・タイプ」として「トリガー・アクション」を選択します。
登録した「imageClicked」トリガーをクリックします。
ダイアログで、「アラートの表示」アクションを「ページ・アクション」セクションからドラッグします。
「メッセージ」フィールドで、「payloadData」値を選択します。これは、トリガー登録時に入力したペイロードです。
設定パネルを閉じ、サイト・ビルダーをプレビュー・モードに切り替えます。
コンポーネント内のイメージをクリックします。

imageBannerText値を指定していないため、no message definedを示すアラートが表示されます。
ページを編集モードにし、コンポーネントの「設定」パネルをもう一度開きます。
「カスタム設定」をクリックし、Workplaceと入力します。
「設定」パネルを閉じ、ページをプレビュー・モードに切り替えます。
コンポーネント内のイメージをクリックします。

これで、clickバインディングに加えた変更から起動される更新済ペイロードWorkplaceが表示されます。

トリガー発生時には、アクションをいくつでも実行できます。

ノート:

アクションを実行する順序は事前定義されていません。各アクションは、リストされた順序で呼び出されますが、それが完了するまで待って次のアクションが呼び出されるわけではありません。アクションで非同期コールが行われる場合は、次のアクションが実行される前にそれが完了しない可能性があります。

「ステップ7: 登録処理」に進みます。