「Repeat with」機能とは？
これらのUI要素のRepreat withプロパティに「内部がオブジェクトになっているリスト型変数」をバインドすることにより、そのオブジェクトに残像のようなエフェクトが付きます。
「内部がオブジェクトになっているリスト型変数」とはSAP Build AppsのVariable上で以下のような定義の変数を指します。
変数定義としてはList型であり、その中のItemのタイプとしてObject型、そのオブジェクト型の中にTextや数値型などのプロパティを含んでいる構造です。これはJSONで記述すると以下のようなものになります。
[
{
“id”: 1,
“name”: “Alice”,
“contact”: {
“email”: “alice@example.com”,
“phone”: “123-456-7890”
}
},
{
“id”: 2,
“name”: “Bob”,
“contact”: {
“email”: “bob@example.com”,
“phone”: “098-765-4321”
}
}
]
実行時にRepeat withで繰り返し表示がされる回数は与えたリスト型の変数の要素数（長さ、Length）に依存します。例えば、5つの要素を持つリスト型の変数を指定すると、5回繰り返し表示されます。
使い方
上に挙げたJSONのデータを利用してみます。このJSONのデータ形式をSAP Build Apps上で表現すると下記のような変数になります。
JSONの値をこの変数に代入して、Repeat withで使用してみます。
Repeat withにSampleListをバインドします。このHeadLineアイテムのContent（表示内容）にnameのデータを表示したいと思います。HeadLineアイテムのContentのアイコンをクリックし
Data Items in repeatをクリックし、
Currentをクリックするとウインドウ下部に展開されます。
“current”は現在の行を意味し、その中のどれをContentにバインドするか？ということです。nameを選択します。
プレビュー実行してみます。
このように一つのHeadLineアイテムが勝手にリピートされ、バインドしたリスト型の変数の要素（行）を繰り返し、その現在行に応じたデータを表示してくれます。これがRepeat withの機能です。
更に実践
Rowコンポーネントのスタイルを変更して枠線を追加すれば表になるなということがわかるかと思います。
ちなみに、ROWコンポーネントのCellに対してRepeat withで変数をバインドすると、
Listの要素数分横に並べるということも出来ます。
Listの要素数（行数）が多いので表示される行数を絞りたいという場合は変数操作が必要です。Repeat withでバインドする際にFormulaを使用して式の形でバインドすると良いでしょう。例えば
SELECT関数を使用するとリスト型変数から要素の範囲を絞ったものを抜き出すことが出来ます。
例1： SELECT(appVars.SampleList, index <10)
→ リストの先頭10件 （リストは0から開始します。）
例2： SELECT(appVars.SampleList, index >= 10 && index < 20)
→リストの11件目から20件目まで
応用すればページ表示のようなことも出来ますね。
画面の表示される範囲を制御したいという場合はRepeat withするコンポーネントをScroll Viewコンポーネントの中に配置すると良いでしょう。
そうするとScroll View側のスタイルの設定で、Scroll View内で表示されることになります。
Repeat withは必要な回数分UIコンポーネントを繰り返し表示できる便利な機能です。是非使いこなしてください。
SAP BTP Hackathon 2025が無事終了しました。ご参加いただいた皆様、ありがとうございました。毎年多くの方にご参加いただき、今年も大変盛り上がりました。毎年参加チーム数や提出作品のレベルが上がっており、運営側としては嬉しい悲鳴でした。 その中で、今年はSAP Build Appsの「Repeat with」の使い方についてのご質問が多かったように思えましたので、使い方とポイントを解説したいと思います。 「Repeat with」機能とは？「Repeat with」機能はUIデザイン上で同じコンポーネントを繰り返し使用するための機能です。例えば、リストやテーブルなど、同じ形式のデータを複数表示する場合に非常に便利です。「同じコンポーネント」というのは、例えばテキストやImageなどのUI要素のことを指します。これらのUI要素のRepreat withプロパティに「内部がオブジェクトになっているリスト型変数」をバインドすることにより、そのオブジェクトに残像のようなエフェクトが付きます。「内部がオブジェクトになっているリスト型変数」とはSAP Build AppsのVariable上で以下のような定義の変数を指します。変数定義としてはList型であり、その中のItemのタイプとしてObject型、そのオブジェクト型の中にTextや数値型などのプロパティを含んでいる構造です。これはJSONで記述すると以下のようなものになります。[
{
“id”: 1,
“name”: “Alice”,
“contact”: {
“email”: “alice@example.com”,
“phone”: “123-456-7890”
}
},
{
“id”: 2,
“name”: “Bob”,
“contact”: {
“email”: “bob@example.com”,
“phone”: “098-765-4321”
}
}
]実行時にRepeat withで繰り返し表示がされる回数は与えたリスト型の変数の要素数（長さ、Length）に依存します。例えば、5つの要素を持つリスト型の変数を指定すると、5回繰り返し表示されます。 使い方上に挙げたJSONのデータを利用してみます。このJSONのデータ形式をSAP Build Apps上で表現すると下記のような変数になります。JSONの値をこの変数に代入して、Repeat withで使用してみます。Repeat withにSampleListをバインドします。このHeadLineアイテムのContent（表示内容）にnameのデータを表示したいと思います。HeadLineアイテムのContentのアイコンをクリックしData Items in repeatをクリックし、Currentをクリックするとウインドウ下部に展開されます。”current”は現在の行を意味し、その中のどれをContentにバインドするか？ということです。nameを選択します。プレビュー実行してみます。このように一つのHeadLineアイテムが勝手にリピートされ、バインドしたリスト型の変数の要素（行）を繰り返し、その現在行に応じたデータを表示してくれます。これがRepeat withの機能です。更に実践このRepeat withできる要素にはRowやContainer等複数のUI要素をまとめる機能を持ったコンポーネントも含まれます。Rowコンポーネント中にはCellが含まれていて横に並ぶようになっています。このRowコンポーネントを縦に並べると表のようなものが出来上がりますね。Rowコンポーネントを4セル設定にして、各セルにTextコンポーネントを配置し、Rowコンポーネント自体にRepeat withで変数を設定して各セルにid,name,email,phoneのプロパティをバインドさせた例がこちらです。Rowコンポーネントのスタイルを変更して枠線を追加すれば表になるなということがわかるかと思います。ちなみに、ROWコンポーネントのCellに対してRepeat withで変数をバインドすると、Listの要素数分横に並べるということも出来ます。Listの要素数（行数）が多いので表示される行数を絞りたいという場合は変数操作が必要です。Repeat withでバインドする際にFormulaを使用して式の形でバインドすると良いでしょう。例えばSELECT関数を使用するとリスト型変数から要素の範囲を絞ったものを抜き出すことが出来ます。例1： SELECT(appVars.SampleList, index <10)→ リストの先頭10件 （リストは0から開始します。）例2： SELECT(appVars.SampleList, index >= 10 && index < 20)→リストの11件目から20件目まで応用すればページ表示のようなことも出来ますね。画面の表示される範囲を制御したいという場合はRepeat withするコンポーネントをScroll Viewコンポーネントの中に配置すると良いでしょう。そうするとScroll View側のスタイルの設定で、Scroll View内で表示されることになります。Repeat withは必要な回数分UIコンポーネントを繰り返し表示できる便利な機能です。是非使いこなしてください。 Read More Technology Blog Posts by SAP articles
#SAP
#SAPTechnologyblog
