コンポーネントへのイベントのバインド

UI ビルダー 内のデータ要素をバインドして、イベントアクションをコンポーネントに追加できるようにします。

始める前に

必要なロール：ui_builder_admin

このタスクについて

各コンポーネントには、バインド先となる特定のイベントがあります。たとえば、ボタンコンポーネントにはボタンクリックイベントしかありませんが、複数のイベントを関連付けることができるコンポーネントもあります。

一部のコンポーネントには、適用されるイベントアクションがありません。見出しコンポーネントはその一例です。多くのコンポーネントでは、データをロードするなどのアクションを実行させるために、イベントをコンポーネントにマッピングする必要があります。

ページのコンポーネント、ページ、およびデータリソースにアクションを追加するために、イベントハンドラーを追加できます。ページに追加するボタンコンポーネントは静的です。イベントアクションをボタンにバインドすると、ボタンを Web ページにリンクできます。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページを作成するか、開きます。
   UI ビルダー でページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
4. ボタンなど、ページにバインドできるイベントを持つコンポーネントをページに追加します。
   コンポーネントのページへの追加に関する詳細については、「コンポーネントの追加と構成」を参照してください。
5. コンポーネントにイベントハンドラーを追加するには、[イベント] タブを選択します。
   コンポーネントにイベントハンドラーを追加する方法の詳細については、「「Manage actions in UI Builder pages (UI ビルダーページでのアクションの管理)」」を参照してください。
   1. コンポーネントのイベントハンドラーを設定するプロセスを開始するには、[ イベント マッピングの追加] をクリックします。
      
   2. 構成するイベントマッピングをリストから選択します。
      
   3. [Continue (続行)] を選択します。
   4. [イベントハンドラープレビュー] セクションで、コンポーネントにバインドするイベントハンドラーを選択します。
      
   5. [Continue (続行)] を選択します。
   6. イベントのペイロードを構成します。
      各イベントハンドラーは、イベントのアクションに応じて異なる方法で構成します。たとえば、ボタンコンポーネントにイベントハンドラーを追加する場合は、そのボタンアクションが実行する内容を選択できます。
   7. [Add (追加)] を選択します。
6. オプション: イベントのモーダルをポップアップ表示する場合は、イベントをコンポーネントにバインドする前にモーダルをページに追加します。
   モーダルは、コンポーネントをクリックすると表示される確認ポップアップです。たとえば、レコードを削除するボタンコンポーネントを追加する場合は、レコードを削除してよいかユーザーに確認を求めるモーダルを追加します。詳細については、「コンポーネントへのモーダルの追加」を参照してください。
   1. コンテンツツリーの [モーダル] の横にある [+] アイコンを選択します。
      
   2. [確認] などのモーダルタイプを選択します。
      
   3. モーダルを構成します。
      モーダルのテキスト、モーダルのボタンの名前、およびモーダル画面のサイズを変更できます。モーダルのアクションも設定できます。モーダルの構成が完了したら、閉じます。コンテンツツリーでは、作成したモーダルがページ構造の本文の上にあることに注意してください。
7. イベントをボタンコンポーネントにバインドします。
   イベントをボタンにバインドしてアクションをトリガーします。コンテンツツリーまたはページでハイライト表示するボタンコンポーネントを再度選択します。
   1. コンテンツツリーで [+ コンテンツを追加] を選択します。
   2. ツールボックスで [ボタン] コンポーネントを選択します。
   3. プリセットの選択を求められたら、[なし] を選択します。
   4. [構成] ペインで、[イベント] をクリックします。
   5. [ ハンドラーを追加] を選択します。
      

      ボタンコンポーネントには、ボタンクリックイベントのみが関連付けられています。複数のイベントを持つことができるコンポーネントもあります。

   6. ボタンにアサインするハンドラーを選択します。

      たとえば、ボタンコンポーネントのイベントハンドラーを追加するには、別の宛先にリンクしてアラート通知を追加することができます。この例では、[モーダルダイアログを開くまたは閉じる] を選択して、前に作成したモーダルを開くようにボタンを設定できます。このボタンのシナリオでは、前に作成した [確認して破棄] モーダルダイアログイベントハンドラーを選択します。

      

   7. [Continue (続行)] を選択します。
   8. ドロップダウンからモーダルを選択します。
   9. [ 追加] を選択して、モーダルイベントハンドラーをボタンコンポーネントに追加します。
8. [Save (保存)] をクリックします。
9. [プレビュー] を選択してモーダルをテストします。
10. 作成したモーダルをトリガーするには、ページ上のボタンをクリックします。