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

リピーターを使用して、データリソースからの結果を含む 1 つ以上のコンポーネントを繰り返します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

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

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

手順

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

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

   1. [ 複数のレコードの検索] データリソースを選択します。
   2. インシデントテーブルを使用するようにデータリソースを構成します。
   3. 結果の最大数 フィールドに「5」と入力します。

      [複数のレコードの検索] データリソースが構成済みである。

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

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

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

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

      
9. 前の手順で追加したリピーターの下で、[コンポーネントの追加] を選択します。
   
10. この例では、 見出し コンポーネントを追加します。
11. [ 構成 ] タブで、[ なし] を選択して見出しコンポーネントを手動で構成します。
12. リピーターでネストしたコンポーネントを構成します。

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

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

       displayValue は Heading コンポーネントにバインドされます。

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

    データ・セットの最初の値のみがステージに表示されます。

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