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

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

始める前に

必要なロール：ui_builder_admin

このタスクについて

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

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

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

手順

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

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

   6. コンポーネントにアサインするアクションを選択します。

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

      

   7. [モーダルダイアログを開く] セレクターをオンにして、ユーザーがボタンコンポーネントをクリックしたときにモーダルが開くようにします。
   8. モーダルイベントハンドラーをコンポーネントに追加するには、[追加] をクリックします。
8. [保存] をクリックします。
9. [プレビュー] を選択してモーダルをテストします。
10. 作成したモーダルをトリガーするには、ページ上のボタンをクリックします。