コンポーネントへのリピーターの追加

UI ビルダーでリピーターを使用すると、データリソースからコンポーネントまたは結果のある 1 つ以上のコンポーネントを繰り返すことができます。

始める前に

必要なロール：ui_builder_admin

このタスクについて

リピーターコンポーネントは、UI ビルダー内で複数のコンポーネントに提供するデータを繰り返す基本ループとして機能します。リピーターは、アレイ、またはオブジェクトのアレイを使用します。たとえば、アレイ [{"task": "A"},{"task": "B"}] は、その中のコンテンツを 2 回繰り返します。リピーターを使用すると、データアレイプロパティに値をバインドできます。@item.value.{property_name} は、リピーター内のコンポーネントに値をバインドします。「task」をバインドする場合、@item.value.task としてバインドすることができ、リピーターに正しい値が表示されます。

リピーター内のコンポーネントは、コンポーネント出力が動的かどうかに関係なく、データソース内のアイテム数を繰り返します。たとえば、3 つのデータ要素を持つリピーター内にヘッダーコンポーネントを配置しても、[ラベル] フィールドは変更しないとします。次に、同じ出力ラベルを持つヘッダーの 3 つのインスタンスが表示されます。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、次を選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. リピーターを追加するページのエディターを開きます。
   エクスペリエンスのページを作成していない場合は、ページの作成方法の詳細について、「UI ビルダー でのページの作成」を参照してください。
4. データリソースをページに接続します。

   たとえば、[複数のレコードを検索] データリソースをページに追加します。データリソースの接続の詳細については、「ページへのデータリソースの追加と構成」を参照してください。

   1. データリソースドロワーで、[+ データリソースを追加 (Add data resource)] を選択します。
   2. モーダルで、[複数のレコードを検索] データリソースを検索し、[追加] を選択します。
   3. [テーブル] フィールドに、インシデント と入力します。
   4. [結果の最大数] フィールドに「5」と入力します。

      [複数のレコードを検索] データリソースが構成されます。

      
   5. モーダルを閉じます。
5. 既存のコンテナを選択するか、列レイアウトを作成します。
   詳細については、「UI ビルダーページでコンポーネントを整理する」を参照してください。
6. リピーターコンポーネントをページに追加します。
   

   コンポーネントの追加の詳細については、「コンポーネントの追加と構成」を参照してください。

7. [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
8. [構成] タブで、繰り返されるコンポーネントのデータを定義するアレイを追加します。
   1. [データアレイ] をポイントし、[データをバインド] アイコン () を選択します。
   2. [データタイプ] で、[データリソース] を選択します。
   3. 次の列で、[複数のレコードを検索 1] ピルを選択します。
   4. [ピルビュー (Pill view)] で、[結果] をダブルクリックまたはドラッグして、[@data.look_up_multiple_records_1.results] 出力を追加します。
   5. [適用] を選択します。

      データリソースの結果は、リピーターコンポーネントにバインドされます。リピーター内では、1 つのコンポーネントが各結果を表します。

      
9. 前のステップで追加したリピーターの下で [+ コンテンツを追加] を選択します。
   
10. [見出し] コンポーネントを追加します。
11. [構成] タブで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
12. リピーターでネストしたコンポーネントを構成します。

    たとえば、[displayValue] をコンポーネントにバインドします。詳細については、「コンポーネントへのデータ接続」を参照してください。

    1. カーソルを [ラベル] に移動し、[データをバインド] アイコン () を選択します。
    2. [データタイプ] で [リピーター] を選択します。
    3. [ピルビュー (Pill view)] で、[値] ピルを選択します。
    4. 次の列で、[番号] ピルを選択します。
    5. 次の列で、[displayValue] をダブルクリックまたはドラッグして、@item.value.number.displayValue 出力を追加します。
    6. [適用] を選択します。

       [displayValue] は見出しコンポーネントにバインドされます。

       
13. [保存] を選択します。

    データリソースにバインドしたコンポーネントがステージに表示され、インシデントテーブルから返される結果ごとに 1 回ずつ、合計 5 回繰り返されます。

    
14. [プレビュー] ボタンを選択し、ページを表示してテストします。
    タブが開き、繰り返されるデータがあるページプレビューが表示されます。