動的にフィルタリングされたカード表示を作成する

  • リリースバージョン: Zurich
  • 更新日 2025年09月30日
  • 所要時間：15分

    • レコードを表示するインタラクティブなカードレイアウトを作成し、表示されているカードを名前でフィルタリングするドロップダウンを追加し、各カードが選択されたときに別の UI ビルダー ページで全レコードを開くように構成します。

    始める前に

    必要なロール：ui_builder_admin

    このタスクについて

    この例では、カスタムレイアウトでレコード情報を表示できるように、データをコンポーネントにバインドする方法を示します。たとえば、レコードを従来のリストビューではなく、選択可能なカードとして表示できます。この手順では、データはインシデントテーブルから取得されます。

    図 : 1. 最終レイアウトプレビュー
    UI ビルダー 個々のコンポーネントに番号付き吹き出しがあるステージ。
    1. ドロップダウン:表示されているカードを発信者名でフィルタリングします。
    2. カードベースコンテナ:個々のカードコンテンツを保持し、クリックインタラクションを有効にします。
    3. 見出し:レコード番号を表示します。
    4. ラベル値:発信者名を静的ラベル付きで表示します (「Caller:「」)。
    5. 定型テキスト:レコードの簡単な説明が表示されます。
    6. ハイライト表示される値:レコードの優先度レベルを、スクリプトを介して適用された色のスタイルとともに表示します。
    この手順では、 UI ビルダー コンポーネントを使用して、動的でインタラクティブなレイアウトを作成します。コンポーネントの構成方法の詳細については、以下を参照してください。
    表 : 1. この手順で使用されるコンポーネント
    コンポーネント ドキュメントリンク
    カードベースコンテナ
    ドロップダウン
    見出し
    ハイライト表示される値
    ラベル値
    定型テキスト

    手順

    パート 1:カードレイアウトを構築する

    データリソースにリンクされたリピーターを追加し、各レコードを表示するカードコンテナを作成します。

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

      データリソースは、テーブルとレコードのデータをページに公開します。この例では、インシデントテーブルからレコードをプルするデータリソースを追加し、コンポーネントを使用して表示できるようにします。詳細については、「ページへのデータリソースの追加と構成」を参照してください。

      1. [データとスクリプト] ドロワーの [データリソース] で、 [+ データリソースを追加] を選択します。
      2. [ 複数のレコードを検索] を選択し、[ 追加] を選択します。
      3. look_up_multiple_records_1 ID を選択して [データリソースの詳細] フォームを開きます。
      4. [ データリソースラベル ] フィールドのテキストを 「インシデントルックアップ」に置き換えます。
        [ データリソース ID ] フィールドに自動入力されます。
      5. [Apply (適用)] を選択します。
      6. [ インシデントを編集] ルックアップ ダイアログで、次のフィールドに入力します。
        フィールド アクション
        テーブル インシデントと入力し、リストから選択します。
        フィールドを返す
        1. [+ 追加] を選択します。
        2. 「Caller」と入力し、選択して [選択済み] 列に追加し、検索ボックスをオフにします。
        3. [ 優先度] と [簡単な説明] について上記の手順を繰り返します。
          [発信者]、[優先度]、および [簡単な説明] を表示するフィールドモーダルを選択します。
        4. [Apply (適用)] を選択します。
        結果の最大数 「25」を入力します。

        [テーブル]、[リターンフィールド]、および [結果の最大数] フィールドが強調表示された吹き出しが表示された [インシデントルックアップ] のデータリソースダイアログを編集します。

      7. 右上の [X ] を選択してダイアログを閉じます。
      8. [Save (保存)] を選択します。
    5. コンポーネントを保持する単一列レイアウトを追加します。
      1. コンテンツツリーの [本文] で、[ + コンテンツを追加] を選択します。
      2. [ 単一列] を選択し、[ + 追加] を選択します。
      3. コンテンツツリーで 列 1 を選択した状態で、構成パネルの [レイアウト ] に移動し、[ 方向] を [行] に設定します。
        [行の方向] プロパティにカーソルを合わせた、1 列レイアウト>構成パネル。
    6. データバインディングを使用して、ページにリピーターを追加して構成します。

      データバインディングは、データリソースによって公開されるデータをコンポーネントに関連付けるプロセスです。この例では、 インシデントルックアップ データリソースの結果をリピーターコンポーネントのデータ アレイ プロパティにバインドします。詳細については、「データコンポーネントを接続する」を参照してください。

      1. コンテンツツリーの 列 1 で、[ + コンテンツを追加] を選択します。
      2. 「 リピーター」と入力し、ツールボックスで選択して 、[追加] を選択します。
      3. [ キャンセル ] を選択してプリセットウィンドウを閉じます。
      4. [リピーター 1] を選択した状態で、構成パネルで [データアレイ] フィールドにカーソルを合わせ、[データをバインド] アイコンを選択します。
        バインドデータアイコンにカーソルを合わせたリピーターの構成パネル。
      5. [ データをデータ配列にバインド (Bind data to Data array )] ダイアログの [ データ型 (Data types)] で、[ データリソース] を選択します。
      6. [インシデント] ルックアップピルを選択し、結果ピルをダブルクリックまたはドラッグして、上の領域に移動します。
        図 : 2. データをデータアレイにバインド
        リピーターを構成するためのデータリソースピルの選択を示すデータバインディングモーダル。
      7. [ 適用] を選択してバインディングを確定します。
      8. 構成パネルで、[ スタイル ] タブを選択し、[ スタイルを有効にする] を選択して、フィールドに入力します。
        フィールド 値
        タイプ Grid (グリッド)
        列 4
        ギャップ S
      9. [Save (保存)] を選択します。
    7. カード表示を作成します。
      1. コンテンツツリーの [リピーター 1] で、[ + コンテンツを追加] を選択します。
      2. 「カードベースコンテナ」と入力し、コンポーネントを選択して、[+ 追加] を選択します。
      3. 構成パネルで、[ 構成 ] タブを選択し、[ インタラクション] を [クリック] に設定します。
      4. 構成パネルで、[ スタイル ] タブを選択し、[ 幅 ] を 300px に設定します。
      5. [ 高さ] を 200px に設定します。
        カードベースコンテナの構成パネル。吹き出しで [幅] フィールドと [高さ] フィールドが強調表示されています。
    パート 2:コンポーネントの追加とデータのバインド

    各カードにコンポーネントを追加し、適切なフィールドをバインドしてレコードの詳細を表示するように構成します。

    1. コンポーネントをカードベースコンテナに追加します。
      1. コンテンツツリーの [ カードベースコンテナ 1] で、[ + コンテンツを追加] を選択します。
      2. 以下のコンポーネントを以下の順序で追加し、構成パネルでそれぞれを編集します。
        ヒント:
        すべてのコンポーネントをカードベースコンテナでネストしたままにするには、最初のコンポーネントを追加してから、後続の各コンポーネントの構成アイコンから [後に追加] を使用します。

        プリセットウィンドウが表示された場合は、[ キャンセル ] を選択して閉じます。

        1. 見出し:初期設定は不要
        2. ラベル値:[構成] タブの [ラベル] フィールドに「Caller」と入力します。
        3. 定型テキスト:[構成] タブで、HTML タグを [段落] に設定します
        4. ハイライト表示される値: [スタイル ] タブで、[ 幅 ] を 100px に設定します
        UI ビルダー コンテンツツリー内のリピーターとそのネストされたコンポーネントをハイライト表示する吹き出し付きのエディター。
      3. [Save (保存)] を選択します。
    2. インシデントレコードのデータを、前のステップで追加したコンポーネントにバインドします。
      コンポーネント フィールド パス
      見出し ラベル displayValue >数値>値
      ラベル値 値 displayValue > caller_id >値
      定型テキスト テキスト displayValue > short_description >値
      ハイライト表示される値 ラベル 優先度> displayValue >値
      1. コンテンツツリーで、テーブルにリストされているコンポーネントを選択します。
      2. 構成パネルの [構成] タブで、指定したフィールドにカーソルを合わせ、[データをバインド] アイコン を選択します。
      3. データバインディングモーダルで、次の操作を行います。
        • 左側の [データ型] で [リピーター] を選択します。
        • 右側の [ピルビュー] で、各ピルを順番に選択して、テーブルにリストされているパスに従います (たとえば、[見出し] の場合は、 value、[ number]、[ displayValue]、[displayValue] の順に選択します)。
      4. 最後のピル (displayValue) に到達したら、ダブルクリックまたはドラッグして上の領域に移動し、[ 適用] を選択します。
      5. テーブルの各行に対してこのプロセスを繰り返します。
        UI ビルダー 各カードのデータバインドされた値を表示するエディター。
      6. [Save (保存)] を選択します。
    3. スクリプトを使用して、各レコードの優先度の色を定義します。
      1. コンテンツツリーで、[ ハイライト表示される値 1] を選択します。
      2. 構成パネルの [構成] タブで、[ 色 ] にカーソルを合わせ、[データをバインド] アイコン を選択します。
      3. 右上の [ スクリプトを使用 ] アイコン を選択します。
      4. 既存のコードを次のように置き換えます。 
        function getPriorityColor(record) {
    let priority = record.api.item.value.priority.value;

    switch (priority) {
        case '1':
            return 'critical';
        case '2':
            return 'high';
        case '3':
            return 'moderate';
        case '4':
            return 'low';
        case '5':
            return 'gray';
        default:
            return 'gray';
    }
}
      5. [Apply (適用)] を選択します。

      ハイライト表示された値の色がレコードの優先度に応じて変化することを確認します。

      UI ビルダー レコードの優先度に応じて、ハイライト表示された値を異なる色で表示するエディター。
    パート3:ドロップダウンでフィルタリングを追加する

    ドロップダウンイベントを構成して、クライアントステータスパラメーターを更新し、データリソースを更新してカード表示をフィルタリングします。

    1. ユーザーの選択を追跡するためのクライアントステータスパラメーターを作成します。
      クライアントステータスパラメーターは、コンポーネントがイベントをトリガーするときに変更できます。詳細については、「クライアントステータスパラメーター」を参照してください。
      1. [ データとスクリプト] ドロワーの [クライアントステータスパラメーター] の横にある [ + ] アイコンを選択します。
      2. [ クライアントステータスパラメーターの編集 (Edit client state parameters )] ダイアログで、次のフィールドに入力します。
        • 名前: selected_caller
        • タイプ: 文字列
        • 初期値:空
      3. [Apply (適用)] を選択します。
    2. データリソースを編集して、クライアントステータスパラメーターを条件値として使用します。
      1. [データとスクリプト] ドロワーで、インシデントルックアップデータリソースを選択します。
      2. [条件を編集 (Edit conditions)] を選択します。
        [条件を編集] ボタンがハイライト表示された [インシデントを編集] ルックアップダイアログ。
      3. [ 条件] ダイアログの最初のフィールドに「 Caller」 と入力し、リストから選択します。
      4. 2 番目のフィールドはそのままにします。
      5. 3 番目のフィールドにカーソルを合わせ、[データをバインド] アイコン を選択します。
      6. データバインディングモーダルで、[ クライアントステータス] を選択し、 selected_caller ピルをダブルクリックまたはドラッグして上の領域に移動します。
      7. [ 適用] を選択してバインディングを確定します。
      8. [ 適用] を選択して条件を保存します。
        条件 [問い合わせユーザー] が selected_caller であることを示す条件モーダル。
      9. 右上の [X ] を選択して、 インシデントルックアップ ダイアログを閉じます。
    3. ユーザーテーブルからユーザーをクエリするための 2 番目のデータリソースを作成します。
      1. [ データとスクリプト] ドロワーで [ +] を選択し、[ データリソース] を選択します。
      2. [ 複数のレコードを検索] を選択し、[ 追加] を選択します。
      3. look_up_multiple_records_1 ID を選択して [データリソースの詳細] フォームを開きます。
        ラベルフィールドと ID フィールドがハイライト表示された [データリソースを編集] ダイアログ。
      4. [ データリソースラベル ] フィールドのテキストを sys_user_lookupに置き換えます。
        [ データリソース ID ] フィールドに自動入力されます。
      5. [Apply (適用)] を選択します。
      6. [ sys_user_lookupを編集 ] ダイアログで、次のフィールドに入力します。
        フィールド アクション
        テーブル ユーザー (sys_user) と入力し、リストから選択します。
        フィールドを返す
        1. [+ 追加] を選択します。
        2. 「名前」を入力し、リストから選択して [選択済み] 列に追加します。
        3. [Apply (適用)] を選択します。
        順番 名前を入力し、リストから選択します。
        結果の最大数 「250」と入力します。
      7. 右上の [X ] を選択してダイアログを閉じます。
      8. [Save (保存)] を選択します。
      このデータリソースは、ユーザーテーブルからユーザーを検索します。次のステップで、このデータを参照してドロップダウンに入力します。
    4. ドロップダウンコンポーネントを追加して構成します。
      1. コンテンツツリーで、[ 列レイアウト 1 ] にカーソルを合わせ、[ 構成] アイコン を選択します。
      2. [Add before (前に追加)] を選択します。
      3. ドロップダウン を検索し、ツールボックスから選択して 、[追加] を選択します。
      4. 構成パネルで、指定されたタブに移動し、次のフィールドを構成します。
        タブ アクション
        構成 [プレースホルダー] テキストフィールドで、次のように入力します。 発信者を選択します。
        構成 [ バリアント] フィールドで、次の操作を行います。 [ プライマリ] を選択します。
        構成 [リストアイテム] フィールドで、次の操作を行います。
        1. フィールドにカーソルを合わせ、[データをバインド] アイコン を選択します。
        2. データバインディングモーダルで、[ スクリプトを使用 ] アイコン を選択します。
        3. 既存のコードを次のように置き換えます。
          ヒント:
          コードの書式設定アイコン を選択すると、コードが読みやすくなります。
          function evaluateProperty({ api, helpers }) {
    const userArray = api.data.sys_user_lookup.results;

    let outputArray = [];

    for (let i = 0; i < userArray.length; i++) {
        const obj = {
            'id': `${userArray[i]._row_data.uniqueValue}`,
            'label': `${userArray[i].name.displayValue}`
        };
        outputArray.push(obj);
    }

    return outputArray;
}
        4. [Apply (適用)] を選択します。
        スタイル 幅: 200 を入力します。
        スタイル パディング: 「 パディング」を選択してから、リストから 「M 」を選択します。
    5. 作成したクライアントステータスパラメーターを変更できるように、ドロップダウンをイベントで構成します。
      1. コンテンツツリーで ドロップダウン 1 を選択した状態で、構成パネルの [イベント ] タブを選択し、[ イベントマッピングの追加] を選択します。
      2. [ 選択したアイテムが変更されました] イベントを選択し、[ 続行] を選択します。
      3. [ クライアントステータスパラメーターの設定 ] ハンドラーを選択し、[ 続行] を選択します。
      4. 次のプロパティを設定します。
        フィールド アクション
        クライアントステータスパラメーター名 リストから selected_caller を選択します。
        イベントをトリガーした後に使用する値
        1. フィールドにカーソルを合わせ、[データをバインド] アイコン を選択します。
        2. [ピルビュー] で、値ピルをダブルクリックまたはドラッグして、上の領域に移動します。
        3. [ 適用] を選択してバインディングを確定します。
        4. [Add (追加)] を選択します。
      5. 構成パネルの [イベント] タブで、前の手順で追加したイベントの下にある [ ハンドラーの追加 ] を選択します。
      6. [Incident lookup (1)] を見つけて REFRESH ハンドラーを選択し、[Continue (続行)] を選択します。
        [インシデントルックアップ - REFRESH ハンドラー] が選択された [イベント] モーダル。
      7. [Add (追加)] を選択します。
      8. [Save (保存)] を選択します。
      ドロップダウンを設定した後、発信者を選択すると、 selected_caller クライアントステータスパラメーターが更新され、データリソースが更新されてその発信者のレコードが表示されます。
    パート 4:レコードナビゲーションを有効にする

    各カードを選択すると、リピーターデータのsys_idを使用してレコードページが開くように構成します。

    1. エクスペリエンスにレコードを開く別のページを作成します。
      1. 左上のエクスペリエンスの名前 (「デモエクスペリエンス」など) を選択して、エクスペリエンスビューに戻ります。
      2. [ページ] の横にある [+] を選択し、[新しいページの作成] を選択します。
      3. [ 標準レコード テンプレート] にカーソルを合わせ、[ テンプレートを使用] を選択します。
      4. ページに 「インシデントレコードページ」 という名前を付け、[ 続行] を選択します。
      5. [ よさそうですね]を選択し、[ 作成]を選択します。
    2. 左上のエクスペリエンスの名前を選択し、エクスペリエンスビューからページを選択して、元のページに戻ります。
    3. カードにイベントを追加して、カードを選択すると作成したページでそのレコードが開くようにします。
      1. コンテンツツリーで [カードベースコンテナ 1 ] を選択します。
      2. 構成パネルで、[ イベント] タブを選択し、[ イベントマッピングの追加] を選択します。
      3. カードクリックイベントを選択し、[続行] を選択します。
      4. [ ページを開く] または [URL] ハンドラーを選択し、[ 続行] を選択します。
      5. 現在のエクスペリエンスのページを選択します。
      6. [ インシデントレコードページ] を選択します。
      7. フォームのフィールドに入力します。
        フィールド アクション
        テーブル インシデントを入力する
        sysId
        1. [sysId] フィールドにカーソルを合わせ、[データをバインド] アイコンを選択します。
        2. 左側の [データ型 ] を見つけて、[ リピーター] を選択します。
        3. ピルビューで、[値]、[_row_data] の順に選択し、[uniqueValue] をダブルクリックします。
        4. [Apply (適用)] を選択します。
      8. [ 選択] を選択します。
        [ページ宛先を選択] モーダル。
      9. [ 新しいタブで開く ] プロパティを有効にするには、チェックボックスをオンにします。
      10. [Add (追加)] を選択します。
      11. [Save (保存)] を選択します。
    4. ページをプレビューしてテストします。
      1. [プレビュー] を選択します。
      2. ドロップダウンで、「Fred Luddy」、「Carol Coughlin」、「Bow Ruggeri」などのユーザーを選択して、カードをフィルタリングします。
        注:
        一部のユーザーは関連するインシデントレコードを持っていないため、それらのユーザーを選択してもカードは表示されません。
      3. カードを選択すると、新しいタブに全レコードが表示されます。

      特定のユーザー向けにフィルタリングされたカード表示を示すUI ビルダーページのプレビュー。