ページへの Entity View Action Mapper のデータリソースの追加

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間：5分

    • UI ビルダー で Entity View Action Mapper (EVAM) データリソースをページに追加して、コンポーネント内のデータソースをカードとリストに表示する方法を標準化できます。

    始める前に

    必要なロール：ui_builder_admin

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業するエクスペリエンスを開くか、次を選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
      エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
    3. ページを開くかまたは作成します。
      詳細については、「UI ビルダー ページとページのバリアントを管理」を参照してください。
    4. オプション: ページにコンポーネントがない場合は、ページにデータセットコンポーネントを追加します。
      詳細については、「コンポーネントの追加と構成」を参照してください。
    5. [データおよびスクリプト (Data and scripts)] パネルで、[+] アイコンを選択し、[データリソース] を選択します。
      [データリソース] オプションを指す矢印。
    6. 検索フィールドに「evam」と入力します。
    7. 追加する EVAM データリソースを選択し、ページのすべての EVAM データリソースに対してこの手順を繰り返します。
      EVAM データリソース。
    8. 各 EVAM データリソースを構成します。
      表 : 1. EVAM データソース
      EVAM データソース 説明
      EVAM データリソース データソースに関する EVAM 定義とその他の情報を追加します。
      • タイプ：複合。
      • 評価するタイミング：[このデータリソースを評価するタイミング] リストで、[即時] を選択してページのロード時に EVAM データリソースインスタンスを評価するか、[呼び出された場合のみ] を選択してイベントハンドラーで EVAM データリソースを評価します。
      • EVAM 定義：[EVAM 定義] フィールドで、データリソースに関連付けられている EVAM 定義レコードを追加します。
      • ページカーソル：[ページカーソル] フィールドで、EVAM 定義のページカーソルを追加します。
      • ページサイズ：[ページサイズ] フィールドで、EVAM ページネーションのサイズを追加します。
      • ページ番号：[ページ番号] フィールドで、EVAM ページネーションのページ番号を追加します。
      • EVAM フィルター設定：[EVAM フィルター設定] フィールドで、EVAM データフィルターの sys_id を追加します。

      データフェッチが開始、成功、または失敗した場合のイベントハンドラーを追加するには、[イベント] を選択します。

      [構成] ペインの横にある [Now コードエディター] セクションで、EVAM 定義スクリプトをプレビューします。

      図 : 1. EVAM データリソース構成
      EVAM データリソース構成。
      EVAM データをフェッチ EVAM 定義とデータソースに関するその他の情報を追加するには、[構成] を選択します。
      • タイプ：GRAPHQL
      • 評価するタイミング：ページのロード時に EVAM データリソースインスタンスを評価するには、[即時] を選択します。イベントハンドラーを使用して EVAM データリソースを評価するには、[呼び出された場合のみ] を選択します。
      • EVAM 定義：[EVAM 定義] フィールドで、データリソースに関連付けられている EVAM 定義レコードを追加します。
      • ページカーソル：[ページカーソル] フィールドで、EVAM 定義のページカーソルを追加します。
      • ページサイズ：[ページサイズ] フィールドで、EVAM ページネーションのサイズを追加します。
      • ページ番号：[ページ番号] フィールドで、EVAM ページネーションのページ番号を追加します。
      • EVAM フィルター設定：[EVAM フィルター設定] フィールドで、EVAM データフィルターの sys_id を追加します。

      データフェッチが開始、成功、または失敗した場合のイベントハンドラーを追加するには、[イベント] を選択します。

      [構成] ペインの右にある [Now コードエディター] で、EVAM 定義スクリプトをプレビューします。

      EVAM データソース構成をフェッチします。
      EVAM メタデータをフェッチ EVAM データリソースを評価して EVAM 定義を追加するタイミングを選択するには、[構成] を選択します。
      • タイプ：GRAPHQL
      • 評価するタイミング：ページのロード時に EVAM データリソースインスタンスを評価するには、[即時] を選択します。イベントハンドラーを使用して EVAM データリソースを評価するには、[呼び出された場合のみ] を選択します。
      • EVAM 定義：[EVAM 定義] フィールドで、データリソースに関連付けられている EVAM 定義レコードを追加します。

      データフェッチが開始、成功、または失敗した場合のイベントハンドラーを追加するには、[イベント] を選択します。

      [構成] ペインの右にある [Now コードエディター] で、EVAM 定義スクリプトをプレビューします。

      EVAM メタデータ構成をフェッチします。
      EVAM データリソースを検索 EVAM 定義とデータソースに関するその他の情報を追加するには、[構成] を選択します。
      • タイプ：複合。
      • 評価するタイミング：ページのロード時に EVAM データリソースインスタンスを評価するには、[即時] を選択します。イベントハンドラーを使用して EVAM データリソースを評価するには、[呼び出された場合のみ] を選択します。
      • EVAM 構成 ID：[EVAM 構成 ID (EVAM Config ID)] フィールドに、データレコードに関連付けられている EVAM 構成 ID を追加します。
      • 検索コンテキスト構成 ID：[検索コンテキスト構成 ID] フィールドに、検索する検索コンテキスト構成 ID を追加します。
      • 検索用語：[検索用語] フィールドに、検索する検索用語を追加します。
      • ファセットフィルター：[ファセットフィルター] フィールドに、検索の定義に役立つファセットフィルターを追加します。
      • 検索フィルター：[検索フィルター] フィールドに、検索の定義に役立つ検索フィルターを追加します。
      • スペルチェックを無効にする：[スペルチェックを無効にする] フィールドで、検索時にスペルチェックをオンにするかオフにするかを選択します。
      • ページネーショントークン：[ページネーショントークン] フィールドに、必要に応じてページネーショントークンを追加します。

      データフェッチが開始、成功、または失敗した場合のイベントハンドラーを追加するには、[イベント] を選択します。

      [構成] ペインの右にある [Now コードエディター] で、EVAM 定義スクリプトをプレビューします。

      EVAM データリソース構成を検索します。
    9. データセットコンポーネントを次のように構成します。
      • EVAM データリソースをコンポーネントにバインドします。
      • [グリッド/リストトグルを表示] をオンにすると、ページ上の EVAM 情報をグリッドビューで表示するかリストビューで表示するかを選択できます。
      • ページ上のカードのその他の構成設定を行います。
    10. [Save (保存)] を選択します。
    11. [プレビュー] ボタンを選択し、ページを表示してテストします。
      図 : 2. EVAM の完了ステータス
      EVAM の完了ステータス。