A customer asked the following question, so I would like to explain how to create a form in SAP Build Apps.
“I want to send data from SAP Build Apps to an external system using a REST API. The data must be sent in JSON format, but there is an array in the JSON, and we don’t know how many items will be entered. In such a case, how should the input form be created?”
The JSON had the following structure. (Note: It has been modified and is not exactly the same as the customer’s inquiry.)
{
“UserId”: “UserID”,
“Items”: [
{
“ItemCd”: “AA0001”,
“Quantity”: 2
},
{
“ItemCd”: “BB0002”,
“Quantity”: 5
}
]
}
I see; if this is interpreted as order data, the Items section seems to represent the purchased products. Indeed, this will vary depending on how many items are ordered each time.
I would like to create a data entry screen in SAP Build Apps that can handle this kind of pattern.
1. Create a variable to store this data.
First, create a variable that can store data in a format corresponding to this JSON.
Note that the contents of the list are objects, and each object has properties ItemCd and Quantity. Also, since this variable is an object type, some parts may be null when the page is first opened. For example, the Items list might be null. This can cause some trouble in later steps.
so I want to assign an empty string instead. In the page logic, connect a Set app variable action to the Page mounted event.
For variable1
I will put one element into Items from the beginning , as initial value.
2. Page Design
I will now design the page. The names of each object have been changed to make them easier to understand, so please check the TREE section in the screenshot to see where and what kind of components are placed.
The “Card Container1” has a card-style layout applied so that it is displayed as a card. This is because ItemCd and Quantity need to be entered as a pair, but what do you think? (This part depends on design sense.)）
3. Bind Variables
Bind variables for input fields.
Bind variable1.UserId to the Value of the “UserId Input Field”. This will assign the value entered in the “UserId Input Field” to variable1.UserId. The key point here is how “Card Container1” is bound.
Bind variable1.Items to the “Repeat with” property of “Card Container1”. Since variable1.Items is a list type, “Card Container1” will be displayed repeatedly by the effect of Repeat with. Then, for the Value of the “ItemCd Input field”,
Bind current.ItemCd from “Data Item in repeat”. This refers to the ItemCd of the current row of the list-type variable. Likewise, bind current.Quantity to the Value of the “Quantity Input field”.
4. Create logic for plus icon
The plus icon will have the role that when it is clicked, it increases the number of ItemCd and Quantity input fields. In the previous section, I bound the list-type variable variable1.Items to “Repeat with”. The behavior of Repeat with is to repeat according to the number of elements in the bound list-type variable. So what should I do if I want to increase the number of input fields? Exactly, I just need to increase the number of elements in the array. Therefore, as the action when the plus icon is tapped, I use “Set app variable”,
For variable1.Items, use Formula
WITH_ITEM(appVars.variable1.Items, {“ItemCd”: “”, “Quantity”: 0 })
Add one array element to variable1.Items with the above settings. This will increase the number of repetitions in “Repeat with” by one and thus increase the number of input fields. Let’s check how it actually works in the Preview.
Tap plus icon ,
you will be able to see increase input fields for items.
5. Create logic for minus icon
The minus icon does the opposite of the plus icon; it removes an Items input field. In other words, it decreases the number of elements in the variable1.Items array. Therefore, as the action when the minus icon is tapped, use “Set app variable” for variable1.Items.
use Formula
REMOVE_ITEM(appVars.variable1.Items, index==repeatedInfo.current.index)
Set the above formula to delete the element in the current row.
“repeatedInfo.current.index” is a system variable that can be used with objects that use the “Repeat with” feature. You can reference it from “Repeat Information” in the formula editor, and there are other interesting variables such as whether the current row is the first or last one, or whether it is odd or even. When you check the behavior in the Preview, you should see that tapping the minus icon removes the input field.
6. Convert the values entered in the form to JSON format and verify them.
The input form is now complete, so the next step is to check whether it becomes the desired JSON. Place a button and assign the processing that will run when this button is tapped.
There is an important point here: first, use the ENCODE_JSON function on the contents of variable1.
I would like to display it as-is in an Alert dialog.
Enter the data in the Preview and click the button.
I can’t see the entire text, so I’ll copy and paste it to check.
{“Items”:[{“ItemCd”:”ItemCd1″,”Quantity”:”10″},{“ItemCd”:”ItemCd2″,”Quantity”:”20″}],”UserId”:”User1″}
Looking closely, you can see that the value after Quantity is enclosed in double quotes and is therefore a string. As mentioned at the beginning of this blog, the REST service requires this part to be a numeric value. The reason this happens is that the application developed with SAP Build Apps is a web application that runs after being converted to JavaScript. According to the specifications of JavaScript and HTML, the following behavior applies.
Because JavaScript is a “dynamically typed language,” variables do not have a fixed type, and the type of their contents can be freely changed later, for example from number -> string -> object.The value entered into an HTML input field (HTMLInputElement.value) is treated as a string in JavaScript.
The Value of the Quantity Input field on the page is bound to variable1.Quantity, but at the HTML level this is the value entered into the input field. Even though Quantity itself is defined as a Number type, the assignment is allowed, so the value is assigned as a string. Since the NUMBER function cannot be used at bind time, let’s insert logic to convert it to a numeric type when displaying it.
Add a Set app variable logic for variable1.Items. For Assigned value, set the following as a formula.
MAP(appVars.variable1.Items, { “ItemCd”: item.ItemCd , “Quantity”: NUMBER(item.Quantity)})
This process uses the MAP function to read the contents of appVars.variable1.Items into a list-type variable called item, then redefines the object-type variable and, at that time, converts the value of Quantity to a numeric type with the NUMBER function and assigns it back to appVars.variable1.Items. Let’s see how it works.
{“Items”:[{“ItemCd”:”ItemCd1″,”Quantity”:10},{“ItemCd”:”ItemCd2″,”Quantity”:20}],”UserId”:”User1″}
With this, the JSON now has the required format. Ideally, SAP Build Apps would handle this part automatically, but at present it is necessary to deal with it in this way.
“Repeat with” is a process that repeats according to the number of elements in an array, and it can also adapt to changes in the length of that array. By making good use of this, it is possible to create input fields for multiple items. This is a situation that will likely occur in practice, so please make full use of it.
Regards,
A customer asked the following question, so I would like to explain how to create a form in SAP Build Apps.”I want to send data from SAP Build Apps to an external system using a REST API. The data must be sent in JSON format, but there is an array in the JSON, and we don’t know how many items will be entered. In such a case, how should the input form be created?”The JSON had the following structure. (Note: It has been modified and is not exactly the same as the customer’s inquiry.) {
“UserId”: “UserID”,
“Items”: [
{
“ItemCd”: “AA0001”,
“Quantity”: 2
},
{
“ItemCd”: “BB0002”,
“Quantity”: 5
}
]
} I see; if this is interpreted as order data, the Items section seems to represent the purchased products. Indeed, this will vary depending on how many items are ordered each time.I would like to create a data entry screen in SAP Build Apps that can handle this kind of pattern.1. Create a variable to store this data.First, create a variable that can store data in a format corresponding to this JSON.Note that the contents of the list are objects, and each object has properties ItemCd and Quantity. Also, since this variable is an object type, some parts may be null when the page is first opened. For example, the Items list might be null. This can cause some trouble in later steps.so I want to assign an empty string instead. In the page logic, connect a Set app variable action to the Page mounted event.For variable1I will put one element into Items from the beginning , as initial value.2. Page DesignI will now design the page. The names of each object have been changed to make them easier to understand, so please check the TREE section in the screenshot to see where and what kind of components are placed.The “Card Container1” has a card-style layout applied so that it is displayed as a card. This is because ItemCd and Quantity need to be entered as a pair, but what do you think? (This part depends on design sense.)）3. Bind VariablesBind variables for input fields.Bind variable1.UserId to the Value of the “UserId Input Field”. This will assign the value entered in the “UserId Input Field” to variable1.UserId. The key point here is how “Card Container1” is bound.Bind variable1.Items to the “Repeat with” property of “Card Container1”. Since variable1.Items is a list type, “Card Container1” will be displayed repeatedly by the effect of Repeat with. Then, for the Value of the “ItemCd Input field”,Bind current.ItemCd from “Data Item in repeat”. This refers to the ItemCd of the current row of the list-type variable. Likewise, bind current.Quantity to the Value of the “Quantity Input field”.4. Create logic for plus iconThe plus icon will have the role that when it is clicked, it increases the number of ItemCd and Quantity input fields. In the previous section, I bound the list-type variable variable1.Items to “Repeat with”. The behavior of Repeat with is to repeat according to the number of elements in the bound list-type variable. So what should I do if I want to increase the number of input fields? Exactly, I just need to increase the number of elements in the array. Therefore, as the action when the plus icon is tapped, I use “Set app variable”,For variable1.Items, use FormulaWITH_ITEM(appVars.variable1.Items, {“ItemCd”: “”, “Quantity”: 0 })Add one array element to variable1.Items with the above settings. This will increase the number of repetitions in “Repeat with” by one and thus increase the number of input fields. Let’s check how it actually works in the Preview.Tap plus icon ,you will be able to see increase input fields for items.5. Create logic for minus iconThe minus icon does the opposite of the plus icon; it removes an Items input field. In other words, it decreases the number of elements in the variable1.Items array. Therefore, as the action when the minus icon is tapped, use “Set app variable” for variable1.Items.use FormulaREMOVE_ITEM(appVars.variable1.Items, index==repeatedInfo.current.index)Set the above formula to delete the element in the current row.”repeatedInfo.current.index” is a system variable that can be used with objects that use the “Repeat with” feature. You can reference it from “Repeat Information” in the formula editor, and there are other interesting variables such as whether the current row is the first or last one, or whether it is odd or even. When you check the behavior in the Preview, you should see that tapping the minus icon removes the input field.6. Convert the values entered in the form to JSON format and verify them.The input form is now complete, so the next step is to check whether it becomes the desired JSON. Place a button and assign the processing that will run when this button is tapped.There is an important point here: first, use the ENCODE_JSON function on the contents of variable1.I would like to display it as-is in an Alert dialog.Enter the data in the Preview and click the button.I can’t see the entire text, so I’ll copy and paste it to check.{“Items”:[{“ItemCd”:”ItemCd1″,”Quantity”:”10″},{“ItemCd”:”ItemCd2″,”Quantity”:”20″}],”UserId”:”User1″}Looking closely, you can see that the value after Quantity is enclosed in double quotes and is therefore a string. As mentioned at the beginning of this blog, the REST service requires this part to be a numeric value. The reason this happens is that the application developed with SAP Build Apps is a web application that runs after being converted to JavaScript. According to the specifications of JavaScript and HTML, the following behavior applies.Because JavaScript is a “dynamically typed language,” variables do not have a fixed type, and the type of their contents can be freely changed later, for example from number -> string -> object.The value entered into an HTML input field (HTMLInputElement.value) is treated as a string in JavaScript.The Value of the Quantity Input field on the page is bound to variable1.Quantity, but at the HTML level this is the value entered into the input field. Even though Quantity itself is defined as a Number type, the assignment is allowed, so the value is assigned as a string. Since the NUMBER function cannot be used at bind time, let’s insert logic to convert it to a numeric type when displaying it.Add a Set app variable logic for variable1.Items. For Assigned value, set the following as a formula.MAP(appVars.variable1.Items, { “ItemCd”: item.ItemCd , “Quantity”: NUMBER(item.Quantity)})This process uses the MAP function to read the contents of appVars.variable1.Items into a list-type variable called item, then redefines the object-type variable and, at that time, converts the value of Quantity to a numeric type with the NUMBER function and assigns it back to appVars.variable1.Items. Let’s see how it works.{“Items”:[{“ItemCd”:”ItemCd1″,”Quantity”:10},{“ItemCd”:”ItemCd2″,”Quantity”:20}],”UserId”:”User1″}With this, the JSON now has the required format. Ideally, SAP Build Apps would handle this part automatically, but at present it is necessary to deal with it in this way.”Repeat with” is a process that repeats according to the number of elements in an array, and it can also adapt to changes in the length of that array. By making good use of this, it is possible to create input fields for multiple items. This is a situation that will likely occur in practice, so please make full use of it.Regards, Read More Technology Blog Posts by SAP articles
#SAP
#SAPTechnologyblog
