SAP Build Appsでリスト・テーブルを作成する方法 5つ

## はじめに
SAP Build Appsで、データをリスト形式で表示したいというケースはよくあると思います。リスト形式での表示に使えるコンポーネントはいくつかありますが、使えるデータの種類や設定の自由度に違いがあります。この記事では、リストやテーブルを作成する5つの方法について紹介します。

## 方法
### 1. 任意のコンポーネントを繰り返し表示させる
最も基本的な方法は、繰り返し表示したいコンポーネントをリスト型の変数と紐づける方法です。

例えば、「氏名、ID、メールアドレス」のセットを複数表示させたいとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/13130ca1-2404-2979-d4d6-d2e2cf4975fc.png)

まず、リピートしたい部品をコンテナに入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/3d383e07-624e-f3bf-25cc-49a546dd1fb0.png)

コンテナの**Repeat with**プロパティにリスト型の変数（App Variable, Page Variable, Data Variable）を設定することにより、その件数分だけ行を表示することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d79fe5d1-6fb3-ad3c-e8f6-db1024ae4c52.png)

コンテナの中の各部品に、現在リピートしている行の項目を割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/66827d12-a43b-9fa1-44b4-502dda924cb1.png)

プレビューは以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/10ffa1ec-2bac-a12c-2eac-6e74ba1e14a1.png)

コンテナのスタイルを変えるとこのような見え方にもなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e4096090-b2f2-f86d-f664-10bdeca11a36.png)

行間は、**Bottom gap**プロパティをクリアすることにより埋められます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/96c91428-9e25-d017-2593-e9ce7523e997.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a1619aac-6905-1fc1-42ef-a3bc5c77bc93.png)

### 2. Rowを使う
1.の応用で、"Row"のコンポーネントを配置し、その中に表示したい要素（テキストやインプットなど）を配置する方法です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1978f85e-0e52-50e7-4b22-dece02816bcb.png)

以下は3つのセルを持つRowで、各セルにTextを配置した状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1dc592b4-abd2-36ab-d5ea-8c442b204d4f.png)

**Repeated with**プロパティにリスト型の変数（App Variable, Page Variable, Data Variable）を設定することにより、その件数分だけ行を表示することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9e5ce65b-2762-9f96-5b8c-c8f7e48e5322.png)

各セルの項目には、現在リピートしている行の項目を割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c452b5b7-e17d-59c8-1a9b-25304cd2ef30.png)

**Cell width**で列幅の比を1:2:2のように整数で指定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/11ddaf85-ccb3-fefd-0afe-e561706ef3dd.png)

ヘッダをつけたい場合、リストの上にRowをもう一つ定義します（こちらはリピートなし）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/96e537ce-19a5-c667-0395-a4322037510a.png)

プレビューは以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e171ad7c-a4c3-dff9-666d-29435043d922.png)

見た目はRowのスタイルを変更することによって調整できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/298e0b29-3d2d-bc60-a3c8-053d88386a67.png)

行間は、Bottom gapプロパティが変更できないため、埋められなさそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/79039b1e-1878-1713-9fa0-16167832caaf.png)

### 3. List Item系のコンポーネントを使う
~ list itemという名前のコンポーネントを使う方法です。これらは、事前に表示項目やスタイルが設定された部品です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/7b7b7c47-a224-0815-f300-ec04eab01128.png)

Rowと同様に、**Repeated with**プロパティにリスト型の変数（App Variable, Page Variable, Data Variable）を設定することにより、その件数分だけ行を表示することができます。
事前定義されたプロパティ（以下ではPrimary label, Secondary label）に現在リピートしている行の項目を割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d09aa887-777f-573d-be24-bb3d8dfe1ccc.png)

プレビューは以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1362decc-d5f1-c4f2-9568-f04150cf3201.png)

行間は**Bottom gap**プロパティをクリアすることにより、埋められます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/4d659b32-83c4-35ab-2d90-d888c5cc687f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/210b8f9f-b5ed-0289-656f-c37ea62e2ee0.png)

### 3. List系のコンポーネントを使う
List系のコンポーネントは、直接データソースにバインドすることによってリストを表示します。デフォルトではインストールされていませんが、マーケットプレイスで"list"と検索すると色々出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/73d20eb1-cd01-fb75-1b7a-4174932e4758.png)

以下ではBasic listをインストールして使います。
**List resource**の設定からエンティティを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/975e4072-8ac1-566d-f2ed-28d907cfb93a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/56e867a3-ad78-7d52-f739-16c9a1aadf3d.png)

左側にある項目の一覧から、右側にあるリストに表示する項目へマッピングします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/06c45495-a48f-e00a-196f-23cd88db2f94.png)

"Properties"タブで追加のフィルタ条件などを設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9a90ef10-e090-57a1-04e6-95fdb79a7959.png)

プレビューは以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/807982c9-3fd9-964f-3b11-9a363bca5626.png)

### 5. Basic talbe with data adapterコンポーネントを使う
Basic talbe with data adapterはデータをテーブル形式で表示します。カラムのソートも可能です。List系コンポーネントと同様に、直接データソースにバインドすることによってリストを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d15c08c2-a9f2-d1af-c249-7e10ad882018.png)

デフォルトではインストールされていないので、マーケットプレイスからインストールして使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d22b9fab-b1a9-03d5-ce36-0fb3dad97fca.png)

**Table resources**の設定からエンティティを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c6bcd52b-b75b-48f7-48f8-67d7c32add17.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c7befcf1-8299-defb-cd9c-5bff583665d1.png)

表示させたい項目にチェックをつけます（最大10個）。項目はドラッグ&ドロップして並べ替えることが可能です。DISPLAY NAMEにヘッダに表示させるラベルを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ac80b250-fbb8-0715-0998-7bd891325a06.png)

"Properties"タブで追加のフィルタ条件などを設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e0dda28d-7769-d1b4-6e26-5ce875b64e03.png)

::: note warn
他のコンポーネントと違い、このコンポーネントでは特定の行を選択した時にイベントが発生しません。よって「行選択したら次の画面に遷移する」というような使い方はできず、一覧を照会するだけの目的で使用します。
:::

## まとめ
それぞれの方法について表にまとめます。
|#|コンポーネント  |使用可能なデータ  |選択行を取得できるか  |表示項目数 |スタイル |
|---|---|---|---|---|---|
|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のような一覧」が欲しい場合に使うとよいでしょう。データを並べて比較したいときには一番使いやすいフォーマットだと思います。