[[{“value”:”
お客様から以下のような質問が有りましたので、SAP Build Appsでのフォームの作り方を解説したいと思います。
“SAP Build AppsからREST APIを使用して外部システムにデータを送信します。JSONの形式でデータを送らなければならないのですが、JSON内に配列が存在し、何個入力されるかわかりません。このような場合入力フォームはどのように作成すればよいでしょうか？”
JSONは以下のような形式でした。（注：改変してあります。お客様問い合わせのままでは有りません）
{
“UserId”: “UserID”,
“Items”: [
{
“ItemCd”: “AA0001”,
“Quantity”: 2
},
{
“ItemCd”: “BB0002”,
“Quantity”: 5
}
]
}
なるほど、仮に注文データとして解釈すると、Itemsのところが購入物のようですね。たしかにこれは毎回何品注文するのかで変わりますね。
このようなパターンに対応したデータ入力画面をSAP Build Appsで作ってみたいと思います。
1. このデータを格納する変数を作成する
まずはこのJSONに相当する形式でデータを格納できる変数を作成します。
リストの中身はオブジェクト型で、オブジェクトのプロパティとしてItemCdとQuantityがあることに注意してください。
また、この変数はオブジェクト型ですのでページを開いたときはNullの状態の部分が存在します。例えばリストであるItemsはnullです。これは後続の処理で少々面倒になりますので空文字列を割り当てて置きたいと思います。
PageのロジックでPage mountedにSet app variableの処理を繋げ
variable1に対し
Itemsに最初から要素を１つ入れておくようにします。
2. ページを設計する
ページのデザインを行います。TREEの部分も名称を変更してみましたので、どこにどのようなコンポーネントを配置しているか確認してください。
Card Container1はカード型のスタイルを適用し、カード型の表示にしてあります。これはItemCdとQuantityはペアで入力される必要があるためですが、どうでしょうか？（デザインセンスに依存する部分です）
3. 変数をバインドする
フィールドに変数をバインドします。
UserId Input FieldのValueにvariable1.UserIdをバインドします。これでUserId Input Fieldへの入力値がvariable1.UserIdへ代入されます。
ポイントとなるのはCard Container1へのバインドです。
Card Container1のRepeat withにvariable1.Itemsをバインドします。variable1.Itemsはリスト型ですのでRepeat withの効果によりCard Container1が繰り返し表示されます。そしてItemCd Input fieldのValueには
Data Item in repeatからcurrent.ItemCdをバインドします。これはリスト型変数の現在行のItemCdを意味します。
同様にQuantity Input fieldのValueにもcurrent.Quantityをバインドします。
4. +アイコンの処理を作成する
+アイコンは機能として「このアイコンがクリックされたらItemCd、Quantityの入力項目の数を増やすという役割をもたせます。前項でRepeat withでリスト型である変数variable1.Itemsをバインドしました。Repeat withの動作はバインドされたリスト型で変数の要素数だけ繰り返すというものです。では入力項目を増やしたい場合は？そうです。配列の要素数を増やせばよいのです。ということで+アイコンをタップしたときの処理としてSet app variableを使用して
variable1.Itemsに対し、Formulaで
WITH_ITEM(appVars.variable1.Items, {“ItemCd”: “”, “Quantity”: 0 })
として、variable1.Itemsに配列要素を１つ追加します。これでRepeat withで繰り返される回数が1回増え、入力フィールドが増えるということになります。Previewで実際の動きを見てみましょう。
+アイコンをタップすると
Itemsの入力フィールドが増えていくのが確認できると思います。
5. -アイコンの処理を作成する
-アイコンは+アイコンとは逆にItemsの入力フィールドを消すということです。つまりはvariable1.Itemsの配列数を減らすということです。ということで-アイコンをタップしたときの処理としてset app variableを使用し、variable1.Itemsに対し
Formulaを使用して
REMOVE_ITEM(appVars.variable1.Items, index==repeatedInfo.current.index)
としてリストから現在行の要素を削除します。
repeatedInfo.current.indexはRepeat with機能を使用したオブジェクトで使用できるシステム変数です。式エディタのRepeat Informationから参照できます。他にも現在行が最初なのか最後なのか、奇数か偶数か、等面白い変数が用意されていますよ。
Previewで動作を確認すると、-アイコンのタップで入力フィールドが消えることを確認できるはずです。
6. フォームへの入力値をJSON形式に直して確認する
入力フォームは出来上がりましたので、あとは目的のJSONになるのかを確認します。ボタンを配置して、このボタンをタップしたときの処理を割り当てます。
ここで重要なポイントがあります。まずはENCODE_JSON関数を使用してvariable1の内容を
そのままAlertダイアログで表示したいと思います。
データを入力してボタンをクリックします。
全文が見えませんので、コピー＆ペーストしてみてみます。
{“Items”:[{“ItemCd”:”ItemCd1″,”Quantity”:”10″},{“ItemCd”:”ItemCd2″,”Quantity”:”20″}],”UserId”:”User1″}
これはよく見ていただくと解るのですが、Quantityの後の数値がダブルクォートで囲まれて文字列になっています。
このブログの冒頭にありますように、この部分は数値であることがRESTサービス側で要求されています。
なぜこのようになったのかというと、SAP Build Appsで開発したこのアプリケーションはWebアプリケーションであり、Java Scriptに変換されて動作するためです。Java ScriptとHTMLの仕様として以下のものがあります。
- JavaScriptは「動的型付け言語」なので、変数自体に型は固定されておらず、あとから数値→文字列→オブジェクトというように中身の型を自由に変えることができます。
- HTMLの入力フィールドへの入力値（HTMLInputElement.value ）はJavaScript では文字列として扱われます。
ページ上のQuantity Input fieldのValueにはvariable1のQuantityをバインドしましたが、これはHTMLレベルでは入力フィールドへの入力値です。そしてQuantity自体はNumber型を指定していますが、代入が出来てしまうので文字列型のまま代入されるということになります。バインド時にNUMBER関数を使用するという事ができませんので、表示時に数値型に変換するロジックを挟んで見ましょう。
variable1.Itemsに対してのset app variableのロジックです。Assigned valueにはFormulaとして以下を設定しています。
MAP(appVars.variable1.Items, { “ItemCd”: item.ItemCd , “Quantity”: NUMBER(item.Quantity)})
MAP関数を使用してappVars.variable1.Itemsの内容をitemというリスト型変数で取り出せるようにして、オブジェクト型の変数を再定義し、この際にNUMBER関数でQuantityの値を数値型に変換してappVars.variable1.Itemsに再代入という処理です。
動きを見てみましょう。
{“Items”:[{“ItemCd”:”ItemCd1″,”Quantity”:10},{“ItemCd”:”ItemCd2″,”Quantity”:20}],”UserId”:”User1″}
これで要求されるJSONの形式になりました。本当はこのあたりもSAP Build Appsでフォローしてくれると良いのですが。現状はこの様なやり方で対処する必要があります。
Repeat withは配列数分だけ繰り返す処理です。その配列自体の長さの変化にも追随できます。これをうまく利用することで複数項目の入力フィールドを作成することも可能です。実際にあるシチュエーションと思いますので使いこなしてください。
“}]]
“UserId”: “UserID”,
“Items”: [
{
“ItemCd”: “AA0001”,
“Quantity”: 2
},
{
“ItemCd”: “BB0002”,
“Quantity”: 5
}
]
}なるほど、仮に注文データとして解釈すると、Itemsのところが購入物のようですね。たしかにこれは毎回何品注文するのかで変わりますね。このようなパターンに対応したデータ入力画面をSAP Build Appsで作ってみたいと思います。1. このデータを格納する変数を作成するまずはこのJSONに相当する形式でデータを格納できる変数を作成します。リストの中身はオブジェクト型で、オブジェクトのプロパティとしてItemCdとQuantityがあることに注意してください。また、この変数はオブジェクト型ですのでページを開いたときはNullの状態の部分が存在します。例えばリストであるItemsはnullです。これは後続の処理で少々面倒になりますので空文字列を割り当てて置きたいと思います。PageのロジックでPage mountedにSet app variableの処理を繋げvariable1に対しItemsに最初から要素を１つ入れておくようにします。2. ページを設計するページのデザインを行います。TREEの部分も名称を変更してみましたので、どこにどのようなコンポーネントを配置しているか確認してください。Card Container1はカード型のスタイルを適用し、カード型の表示にしてあります。これはItemCdとQuantityはペアで入力される必要があるためですが、どうでしょうか？（デザインセンスに依存する部分です）3. 変数をバインドするフィールドに変数をバインドします。UserId Input FieldのValueにvariable1.UserIdをバインドします。これでUserId Input Fieldへの入力値がvariable1.UserIdへ代入されます。ポイントとなるのはCard Container1へのバインドです。Card Container1のRepeat withにvariable1.Itemsをバインドします。variable1.Itemsはリスト型ですのでRepeat withの効果によりCard Container1が繰り返し表示されます。そしてItemCd Input fieldのValueにはData Item in repeatからcurrent.ItemCdをバインドします。これはリスト型変数の現在行のItemCdを意味します。同様にQuantity Input fieldのValueにもcurrent.Quantityをバインドします。4. +アイコンの処理を作成する+アイコンは機能として「このアイコンがクリックされたらItemCd、Quantityの入力項目の数を増やすという役割をもたせます。前項でRepeat withでリスト型である変数variable1.Itemsをバインドしました。Repeat withの動作はバインドされたリスト型で変数の要素数だけ繰り返すというものです。では入力項目を増やしたい場合は？そうです。配列の要素数を増やせばよいのです。ということで+アイコンをタップしたときの処理としてSet app variableを使用してvariable1.Itemsに対し、FormulaでWITH_ITEM(appVars.variable1.Items, {“ItemCd”: “”, “Quantity”: 0 })として、variable1.Itemsに配列要素を１つ追加します。これでRepeat withで繰り返される回数が1回増え、入力フィールドが増えるということになります。Previewで実際の動きを見てみましょう。+アイコンをタップするとItemsの入力フィールドが増えていくのが確認できると思います。5. -アイコンの処理を作成する-アイコンは+アイコンとは逆にItemsの入力フィールドを消すということです。つまりはvariable1.Itemsの配列数を減らすということです。ということで-アイコンをタップしたときの処理としてset app variableを使用し、variable1.Itemsに対しFormulaを使用してREMOVE_ITEM(appVars.variable1.Items, index==repeatedInfo.current.index)としてリストから現在行の要素を削除します。repeatedInfo.current.indexはRepeat with機能を使用したオブジェクトで使用できるシステム変数です。式エディタのRepeat Informationから参照できます。他にも現在行が最初なのか最後なのか、奇数か偶数か、等面白い変数が用意されていますよ。Previewで動作を確認すると、-アイコンのタップで入力フィールドが消えることを確認できるはずです。6. フォームへの入力値をJSON形式に直して確認する入力フォームは出来上がりましたので、あとは目的のJSONになるのかを確認します。ボタンを配置して、このボタンをタップしたときの処理を割り当てます。ここで重要なポイントがあります。まずはENCODE_JSON関数を使用してvariable1の内容をそのままAlertダイアログで表示したいと思います。データを入力してボタンをクリックします。全文が見えませんので、コピー＆ペーストしてみてみます。{“Items”:[{“ItemCd”:”ItemCd1″,”Quantity”:”10″},{“ItemCd”:”ItemCd2″,”Quantity”:”20″}],”UserId”:”User1″}これはよく見ていただくと解るのですが、Quantityの後の数値がダブルクォートで囲まれて文字列になっています。このブログの冒頭にありますように、この部分は数値であることがRESTサービス側で要求されています。なぜこのようになったのかというと、SAP Build Appsで開発したこのアプリケーションはWebアプリケーションであり、Java Scriptに変換されて動作するためです。Java ScriptとHTMLの仕様として以下のものがあります。JavaScriptは「動的型付け言語」なので、変数自体に型は固定されておらず、あとから数値→文字列→オブジェクトというように中身の型を自由に変えることができます。HTMLの入力フィールドへの入力値（HTMLInputElement.value ）はJavaScript では文字列として扱われます。ページ上のQuantity Input fieldのValueにはvariable1のQuantityをバインドしましたが、これはHTMLレベルでは入力フィールドへの入力値です。そしてQuantity自体はNumber型を指定していますが、代入が出来てしまうので文字列型のまま代入されるということになります。バインド時にNUMBER関数を使用するという事ができませんので、表示時に数値型に変換するロジックを挟んで見ましょう。variable1.Itemsに対してのset app variableのロジックです。Assigned valueにはFormulaとして以下を設定しています。MAP(appVars.variable1.Items, { “ItemCd”: item.ItemCd , “Quantity”: NUMBER(item.Quantity)})MAP関数を使用してappVars.variable1.Itemsの内容をitemというリスト型変数で取り出せるようにして、オブジェクト型の変数を再定義し、この際にNUMBER関数でQuantityの値を数値型に変換してappVars.variable1.Itemsに再代入という処理です。動きを見てみましょう。{“Items”:[{“ItemCd”:”ItemCd1″,”Quantity”:10},{“ItemCd”:”ItemCd2″,”Quantity”:20}],”UserId”:”User1″}これで要求されるJSONの形式になりました。本当はこのあたりもSAP Build Appsでフォローしてくれると良いのですが。現状はこの様なやり方で対処する必要があります。Repeat withは配列数分だけ繰り返す処理です。その配列自体の長さの変化にも追随できます。これをうまく利用することで複数項目の入力フィールドを作成することも可能です。実際にあるシチュエーションと思いますので使いこなしてください。”}]] Read More Technology Blog Posts by SAP articles
#SAPCHANNEL