はじめに
SAP Build Appsで、データをリスト形式で表示したいというケースはよくあると思います。リスト形式での表示に使えるコンポーネントはいくつかありますが、使えるデータの種類や設定の自由度に違いがあります。この記事では、リストやテーブルを作成する5つの方法について紹介します。
方法
1. 任意のコンポーネントを繰り返し表示させる
最も基本的な方法は、繰り返し表示したいコンポーネントをリスト型の変数と紐づける方法です。
例えば、「氏名、ID、メールアドレス」のセットを複数表示させたいとします。
まず、リピートしたい部品をコンテナに入れます。
コンテナのRepeat withプロパティにリスト型の変数（App Variable, Page Variable, Data Variable）を設定することにより、その件数分だけ行を表示することができます。
コンテナの中の各部品に、現在リピートしている行の項目を割り当てます。
プレビューは以下のようになります。
コンテナのスタイルを変えるとこのような見え方にもなります。
行間は、Bottom gapプロパティをクリアすることにより埋められます。
2. Rowを使う
1.の応用で、"Row"のコンポーネントを配置し、その中に表示したい要素（テキストやインプットなど）を配置する方法です。
以下は3つのセルを持つRowで、各セルにTextを配置した状態です。
Repeated withプロパティにリスト型の変数（App Variable, Page Variable, Data Variable）を設定することにより、その件数分だけ行を表示することができます。
各セルの項目には、現在リピートしている行の項目を割り当てます。
Cell widthで列幅の比を1:2:2のように整数で指定することができます。
ヘッダをつけたい場合、リストの上にRowをもう一つ定義します（こちらはリピートなし）。
プレビューは以下のようになります。
見た目はRowのスタイルを変更することによって調整できます。
行間は、Bottom gapプロパティが変更できないため、埋められなさそうです。
3. List Item系のコンポーネントを使う
~ list itemという名前のコンポーネントを使う方法です。これらは、事前に表示項目やスタイルが設定された部品です。
Rowと同様に、Repeated withプロパティにリスト型の変数（App Variable, Page Variable, Data Variable）を設定することにより、その件数分だけ行を表示することができます。
事前定義されたプロパティ（以下ではPrimary label, Secondary label）に現在リピートしている行の項目を割り当てます。
プレビューは以下のようになります。
行間はBottom gapプロパティをクリアすることにより、埋められます。
3. List系のコンポーネントを使う
List系のコンポーネントは、直接データソースにバインドすることによってリストを表示します。デフォルトではインストールされていませんが、マーケットプレイスで"list"と検索すると色々出てきます。
以下ではBasic listをインストールして使います。
List resourceの設定からエンティティを選択します。
左側にある項目の一覧から、右側にあるリストに表示する項目へマッピングします。
"Properties"タブで追加のフィルタ条件などを設定することができます。
プレビューは以下のようになります。
5. Basic talbe with data adapterコンポーネントを使う
Basic talbe with data adapterはデータをテーブル形式で表示します。カラムのソートも可能です。List系コンポーネントと同様に、直接データソースにバインドすることによってリストを表示します。
デフォルトではインストールされていないので、マーケットプレイスからインストールして使います。
Table resourcesの設定からエンティティを選択します。
表示させたい項目にチェックをつけます（最大10個）。項目はドラッグ&ドロップして並べ替えることが可能です。DISPLAY NAMEにヘッダに表示させるラベルを指定します。
"Properties"タブで追加のフィルタ条件などを設定することができます。
他のコンポーネントと違い、このコンポーネントでは特定の行を選択した時にイベントが発生しません。よって「行選択したら次の画面に遷移する」というような使い方はできず、一覧を照会するだけの目的で使用します。
まとめ
それぞれの方法について表にまとめます。
| # | コンポーネント | 使用可能なデータ | 選択行を取得できるか | 表示項目数 | スタイル |
|---|---|---|---|---|---|
| 1 | 任意 | List型変数（※） | できる | 自由に設定可能 | 自分で設定 |
| 2 | Row | List型変数 | できる | 自由に設定可能 | 自分で設定 |
| 3 | List Item系 | List系変数 | できる | 固定 | 事前定義済 |
| 4 | List系 | Data | できる | 固定 | 事前定義済 |
| 5 | Basic talbe with data adapter | Data | できない | 最大10個 | 事前定義済 |
※App Variable, Page Variable, Data Variableのいずれか
1、2の方法は自分で表示するコンテンツやスタイルを決めていくため、自由度が高い反面、見た目を整えるのにはやや手間がかかります。3、4は事前定義されたコンポーネントを使用するため自由度は下がりますが、見た目を整える必要がないので、用途にあったコンポーネントがあれば積極的に使いたいです。5は少し特殊で、「Excelのような一覧」が欲しい場合に使うとよいでしょう。データを並べて比較したいときには一番使いやすいフォーマットだと思います。