ページへのイベントのバインド

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む6読むのに数分

    • ページイベントマッピングを使用して UI ビルダー 内でデータ要素をバインドし、イベントアクションをページに追加できるようにします。

    始める前に

    必要なロール：ui_builder_admin

    このタスクについて

    次のタイプのイベントを使用して、イベントをページにバインドできます。
    • ページイベントマッピング。ページのアラート通知を追加、削除、またはクリアします。
    • バリアントイベントマッピング。ページバリアントのアラート通知を追加、削除、またはクリアします。
    • ディスパッチされるイベント。ページにディスパッチされるイベントを作成し、親イベントハンドラーの後にイベントをモデル化するリレーイベントマッピングを作成します。ターゲットの親イベントハンドラーを選択して、その後のペイロードフィールドをモデル化します。
    • 処理済みイベント。処理済みイベントとは、他のユーザーが公開して使用できるイベントのことです。処理済みイベントを作成すると、Page event mappings で他のユーザーも使用できるようになります。手動で作成するペイロードフィールドを設定したり、モーダルダイアログのオープンやクローズなどの、処理済みイベントのテンプレートを選択したりすることもできます。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業するエクスペリエンスを開くか、または [+ 作成] を選択してエクスペリエンスを作成します。
      詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
    3. ページを開くかまたは作成します。
      UI ビルダー でページを作成する方法の詳細については、「UI Builder でのページの作成」を参照してください。
    4. コンテンツツリーでページ本文をハイライト表示します。

      本文はコンテンツツリーの最上位の行です。ページ全体をハイライト表示すると、ページレベルのイベントを追加できます。

      コンテンツツリーの本文オプションを指す矢印。
    5. 構成パネルで、[ イベント ] タブを選択します。
      [イベント] タブがある構成パネル。
    6. 次のいずれかの方法でイベントハンドラーを追加します。
      追加するイベントハンドラー操作
      ページイベントマッピング Page ready ソースイベント：
      1. [ イベント ハンドラーの追加] を選択します。
      2. ページからアラート通知を追加、削除、またはクリアするには、Page-level event handlers からイベントハンドラーを選択します。ページのアラート通知は、追加、削除、またはクリアできます。
      3. イベント ハンドラーをページに追加するには、 [ 追加] を選択します。
      Page property changed ソースイベント：
      1. [ 新しいイベント ハンドラーの追加] を選択します。
      2. Page-level event handlersからイベントハンドラーを選択します。ページのアラート通知は、追加、削除、またはクリアできます。[ロード中ステータスを設定] を選択して、ページがロード中であることをユーザーが確認できるように、ページに「ロード中」と表示することもできます。[クライアントステータスパラメーターを更新] を選択して、クライアントステータス名を変更することもできます。
      3. イベントハンドラーをページに追加するには、[追加] をクリックします。
      バリアントイベントマッピング バリアントイベントマッピング

      バリアントイベントマッピングを実行するには、バリアントページが必要です。利用可能なバリアントイベントマッピングは、バリアントページによって異なります。バリアントページにリストがある場合は、[行がクリックされました]、[ナビゲーションアイテム] などのイベントハンドラーを追加します。バリアントにビューポートがある場合は、さまざまなイベントハンドラーを設定できます。

      1. [ イベント マッピングの追加] を選択します。たとえば、[行がクリックされました] に新しいイベントハンドラーを追加できます。
      2. 利用可能な継承されたイベントハンドラーまたはローカルイベントハンドラー (UXR アプリシェルデータソースなど) のリストからイベントハンドラーを選択します。
      3. イベント ハンドラーをバリアントに追加するには、 追加 を選択します。

      バリアントイベントハンドラーのオプション。

      • これらのイベントマッピングは、sys_ux_screen テーブルにあるバリアントレコードにあります。
      • これらのイベントマッピングのソースイベントは、ページに対して定義されたディスパッチイベントです。
      • これらのイベントマッピングに使用できるハンドラーは、キャンバスレベルのイベント、UXR アプリシェルデータソース、および継承されたデータリソースからの操作です。
      • これらのイベントマッピングは、ページ上のコンポーネントからディスパッチされるイベントがユーザーセッションハンドラーにリレーされるように、リレーとして使用されます。
      • これらのマッピングは、コンポーネントのディスパッチされたイベントを別のイベントにマッピングすると、ページの保存時に自動的に作成されます。たとえば、Button clicked イベントを Link to destination イベントにマッピングすると、そのイベントによって、ページの保存後に、ディスパッチされたリレーイベントとバリアントイベントのマッピングが作成されます。
      ディスパッチされるイベント
      1. [ ディスパッチされるイベント] を選択します。
      2. [+ 追加] アイコンを選択します。
      3. [ イベントを作成 ] 画面で、次のアクションを実行します。
        • イベントのラベルを入力します。
        • ターゲットの親イベントハンドラーを選択します。
      4. ディスパッチされるイベントにイベント ハンドラーを追加するには、[ 追加] を選択します。

        [イベントを作成] ダイアログ。

      5. 作成した新しいイベントハンドラーが [ディスパッチされるイベント] に表示されます。次の例は、Link to destination イベントハンドラーを追加する方法を示しています。

        ディスパッチされるイベントに追加されたイベントハンドラー。

      • これらのイベントは [sys_ux_event] テーブル内にあります。ページ定義レコードには、[sys_ux_event] レコードへの参照が含まれています。

      • これらのイベントは、バリアントイベントマッピングのソースイベントとして機能します。

      • ページの新しいディスパッチされるイベントを作成するには、[+ 追加] アイコンを選択します。新しい sys_ux_event のイベント名とペイロードフィールドを自動入力するようにイベントラベルを構成します。

      • これらのイベントは、リレーイベントマッピングを作成するためによく使用されます。Target parent event handlerを選択して、選択したイベント後のペイロードフィールドをモデル化します。ディスパッチされたイベントのペイロードフィールドを手動で作成することもできます。
      処理されるイベント

      • これらのイベントは [sys_ux_event] テーブルに保存されます。ページ定義レコードには、[sys_ux_event] レコードへの参照が含まれています。

      • これらのイベントは、ページイベントマッピングのソースイベントとして機能します。

      • ページの新しいディスパッチされるイベントを作成するには、[+ 追加] アイコンを選択します。これらのイベントは、親イベントハンドラーを基にモデル化されることはありません。処理済みイベントのペイロードフィールドは手動で作成されます。既存のハンドラーのペイロードフィールドをテンプレートとして使用するには、テンプレートを選択し、必要に応じてフィールドを編集します。
    7. [Save (保存)] を選択します。
    8. ページをプレビューして、設定したデータリソースイベントをテストするには、[プレビュー] ボタンを選択します。