機械翻訳について

フラグメント親コンテナに発行するカスタム・イベントの作成

フラグメントから親コンテナにデータを渡す方法の1つ(たとえば、ページまたは別の外部フラグメントのような別のコンテナ)は、"emit"のカスタム・イベントをコンテナに呼び出すことです。

この方法を確認するために、従業員の連絡先のユースケースを拡張します。 ここでは、連絡先フラグメントを使用して、Eメールが従業員優先通信手段であるかどうかを指定できます。 フラグメントの電子メールを許可しますか。スイッチを切り替えるユーザーには、通信プリファレンスがEメールに設定されたという通知が表示されます:
fragment-data-email-scenario-test.pngの説明は以下のとおりです
図fragment-data-email-scenario-test.pngの説明

バックグラウンドで、ユーザーが「電子メールは許可されていますか?」スイッチを切り替えると、フラグメントに定義されたアクション・チェーンによって、イベント・ペイロードをフラグメント・コンテナに"emits"するイベントが起動されます。 フラグメント・コンテナのイベント・リスナーは、このフラグメント・イベントの起動を監視し、ページ・レベルのアクション・チェーンをトリガーして、いくつかのアクションを実行します。この例では、選択した従業員Eメール・プリファレンスが設定されているという通知を起動しています。

  1. 親コンテナがリスニングするカスタム・イベントを呼び出すようにフラグメントを構成します。
    1. Switchコンポーネントを連絡先フラグメントにドラッグ・アンド・ドロップし、その「プロパティ」ペインで、「一般」タブの「ラベルのヒント」をEmails Allowed?に変更します。
    2. コンポーネントの「イベント」タブに切り替えて、「+イベント・リスナー」をクリックし、「On 'value'」を選択します。
    3. SwitchValueChangeChainアクション・チェーンで、イベントの起動アクションをドラッグ・アンド・ドロップします。
    4. プロパティ・ペインのイベント名の横にある「作成」をクリックします。
    5. スコープをフラグメントに設定して、イベントID (emailPreferenceSetなど)を入力し、「イベントをコンテナに出力」オプションを選択して「作成」をクリックします。 キャメル・ケースは許可されていますが、イベント名が小文字で始まることを確認してください。 ハイフンはサポートされていません。
    6. 新しいイベントの下にある「カスタム・イベントに移動」をクリックして、イベントのペイロードを定義できるイベント・エディタに移動します。
    7. emailPreferenceSetイベントのプロパティ・ペインで、ペイロード・プロパティの横にある「パラメータの追加」をクリックします。 「ペイロード・パラメータの追加」ダイアログで、ID (たとえば、shouldEmailBeSent)を入力し、タイプをブールとして選択し、「作成」をクリックします。

      fragment-data-emailpreferenceset-fireevent-payload.pngの説明は以下のとおりです
      「図fragment-data-emailpreferenceset-fireevent-payload.pngの説明」

      ヒント:

      フラグメントの親コンテナでこのイベントのリスナーを作成するプロセスを簡略化するために、「自動電信イベントID」 (たとえば、emailPreferenceSetAutoWire)を入力することを選択できます。 このオプションを使用すると、フラグメントを使用するページの「イベント・リスナー」タブからイベント・リスナーを作成するときに、フラグメント・イベントの下にemailPreferenceSetイベントをリストできます。 「フラグメントのカスタム・イベントの親コンテナへの自動ワイヤリング」を参照してください。
    8. 「トリガー実行者」で、SwitchValueChangeChainをクリックしてアクション・チェーン・エディタに戻り、「設計」ビューに切り替えます。
    9. 「イベントの起動」アクションの「プロパティ」ペインで、「パラメータ」の下のshouldEmailBeSentの横にある「変数」ピッカーを使用し、「入力パラメータ」の下のvalueを選択します。
  2. フラグメント・カスタム・イベントを受信して処理するようにページ・フラグメント・コンテナを構成します。
    1. ページ・デザイナで、「構造」ビューで特定のフラグメントを選択し、フラグメントの「プロパティ」ペインの「イベント」タブで、「+イベント・リスナー」をクリックし、「'emailPreferenceSet'の場合」カスタム・イベントを選択します。
    2. Fire NotificationアクションをFragmentEmailPreferenceSetChainアクション・チェーンにドラッグ・アンド・ドロップします。
    3. プロパティ・ペインでサマリー(Communication preference is set to Emailなど)を入力し、通知タイプとして「情報」を選択します。
    4. 次に、Fire Notificationイベントの下にAssign Variableアクションをドラッグ・アンド・ドロップします。
    5. アクションのプロパティ・ペインで、「変数」プロパティの横にある「作成」をクリックします。 「変数の作成」ダイアログで、ブール型の新しいページ・レベル変数(たとえば、containerParam)を追加し、「作成」をクリックします。
    6. 「値」プロパティにマウス・ポインタを重ねて選択変数 「変数ピッカーを開く」をクリックし、「入力パラメータ」でshouldEmailBeSentを選択します。
  3. ヘッダーのプレビュー・アイコンをクリックし、従業員を選択して、「電子メールは許可されていますか?」スイッチを切り替えます。 従業員電子メール・プリファレンスが設定されているというメッセージが表示されます。