Hello Team,
This is my first blog related to SAP build app.
Today’s topic: How to pass a data object from one page to another page.
Pre requirement: Build app application project should be created, all permissions should be enabled.
Step 1: Navigate to the integration tab and create Data entity and save as TestDataEntity.
Data entity created.
Step 2 : Create the data entity with the same format of data objects you are planning to be used across the applications.
Below We have used basic details such as ID, first name, Lastname, Job code, Department and Location. ID will be default for every data entity during the time of creation. if the data object is having more deep drilling nodes, then define the object structures accordingly. Here i am creating a plan JSON format structure.
Below the final saved format of our data entity.
Step 3: Create a Data variable from an existing integration object.
Below OData integration entity is already being created from the SAP build app classic data entities. We will be publishing another blog for how to create a success factor OData entity in build app. It can be any data entity such as an external API, HANA OData etc. For this given case study, we are using SuccessFactors OData a service.
Navigate to the page to which the data variable is creating and click on create a data variable.
Chose the EmpJob variable type. which was created above using the emp OData entity.
New variable is automatically taken the name as EmpJob1
Step 4: Create an App variable (App variables are used to carry the data within multiple pages of the application.
Below created an app variable named as TestGlobal and set variable value type as “any value”.
“Any value” will help the developers to assign any formatted data.
Step 5: Loading the data variable with the OData based condition at specific process/logic on page no 1.
For example. The data variable will be filled with the specific userid data during the page load.
For the above scenario, we have to navigate to the Page 1 where the load configurations are setting up.
Add a get data collection object from the Variable logical canvas. and add the below configurations to the get data collection object.
* Resource name should be chosen as the data object (Ex: Empjob).
* Set the filter condition to retrieve only the relevant the data from the object.
Select Object with properties and click on add conditions.
As an example select the property as Userid, under the value section add the userid to be extracted from the SuccessFactors.
Now add the second flow object (Set data object) to store the data coming from the Get data collection to the Data variable created.
Click save.
Add a toast to check the function is working correctly and the data object is being pulled during the page load. define the toast output as the selected output form the pervious node.
click save.
Click to the preview mode to confirm the data object is picking the data.
Now the data object is rendering and storing to the local variable on Page no 1 successfully.
Step 6: Copy the data from the Local page data variable to the pre-defined App variable.
There are two steps involved here.
1 : Copying the page 1 local data variable to App variable.
As an example, we need to perform this copy while doing a button click. We have added a button object in page 1 as shown below.
Added the below logic at the logical canvas. Added a Set app variable object and chose the variable name in input as the global variable and the assigned value as Empjob1 (The variable we have assigned from the above steps)
Now the data is successfully copied to the global variable. however the catch here is the structure of the data variable is defined in page 1 is local in scope hence once this global variable (App variable) refer to any other page variables it will not retrieve the data to the correct structure, hence we need to also define the structure of the data object to the receiving pages to retrieve the data from the App variable.
2 : Retrieve the data from the App variable to a local variable in page 2.
We have added another page (Page no 2 ) and going to perform this activity. Below page 2 is created.
We will be creating a local data variable in page 2, assign the data variable structure to the predefined structure created the above step 2 (TestDataEntity).
Data variable created.
Add a java script from the advanced logical canvas area.
Open the java script object and perform the following initializations.
Inputs sections
input1 to be assigned to the App variable (TestGlobal). since we don’t need any other input parameters only one variable is required to perform the logic.
Add the below script to transfer the data from the Global variable to the local data object.
Make sure the output value type is Object and the Result property type is list.
Below the code snip :
…………………………………………………………….
let incomingGlobalData = inputs.input1; //Declaring a local variable from the input1 data.
const jsonString = JSON.stringify(incomingGlobalData); //Converting the value to string
const jsonArray = JSON.parse(jsonString); //Parse it to JSON
let OutputData=jsonArray.map(item=>({ //Itrating with each data objects //
userId: item.userId, // Navigate the source data oject and define the path of each fields correctly.
lastName: item.userNav.lastName,
firstName: item.userNav.firstName,
location: item.location,
department: item.department,
ManagerID: item.managerId
}));
return { result: OutputData }; //The funtion will return the value in outputData.
//Make sure the output value type is Object and the Result property type is list
……………………………………………………………………………………….
Add an alter at the end of the flow to review the java script response.
3. Create a navigation from the page 1 click button to page 2. It will enable the navigation between page 1 and page 2.
4. Save the pages.
Now the application is ready to test.
click on preview and click to the button “Copy to Global variable” form the page no 1.
After click the page 2 will render with the alert pop up with the data from the location variable created in page no 2.
The data copy from the altert will be like below.
[
{
“userId”: “XXXXXX”,
“lastName”: “DeeTest2”,
“firstName”: “Test1”,
“location”: “XXX-B4”,
“department”: “DEPT00XXXXX”,
“ManagerID”: “XXXXXX”
}
]
Thanks for reading this knowledge note. Hope you got the correct direction and the answer.
Regards,
Deepu
Hello Team,This is my first blog related to SAP build app. Today’s topic: How to pass a data object from one page to another page.Pre requirement: Build app application project should be created, all permissions should be enabled.Step 1: Navigate to the integration tab and create Data entity and save as TestDataEntity.Data entity created.Step 2 : Create the data entity with the same format of data objects you are planning to be used across the applications. Below We have used basic details such as ID, first name, Lastname, Job code, Department and Location. ID will be default for every data entity during the time of creation. if the data object is having more deep drilling nodes, then define the object structures accordingly. Here i am creating a plan JSON format structure.Below the final saved format of our data entity.Step 3: Create a Data variable from an existing integration object.Below OData integration entity is already being created from the SAP build app classic data entities. We will be publishing another blog for how to create a success factor OData entity in build app. It can be any data entity such as an external API, HANA OData etc. For this given case study, we are using SuccessFactors OData a service.Navigate to the page to which the data variable is creating and click on create a data variable. Chose the EmpJob variable type. which was created above using the emp OData entity.New variable is automatically taken the name as EmpJob1Step 4: Create an App variable (App variables are used to carry the data within multiple pages of the application.Below created an app variable named as TestGlobal and set variable value type as “any value”.”Any value” will help the developers to assign any formatted data.Step 5: Loading the data variable with the OData based condition at specific process/logic on page no 1.For example. The data variable will be filled with the specific userid data during the page load.For the above scenario, we have to navigate to the Page 1 where the load configurations are setting up.Add a get data collection object from the Variable logical canvas. and add the below configurations to the get data collection object.* Resource name should be chosen as the data object (Ex: Empjob).* Set the filter condition to retrieve only the relevant the data from the object.Select Object with properties and click on add conditions.As an example select the property as Userid, under the value section add the userid to be extracted from the SuccessFactors.Now add the second flow object (Set data object) to store the data coming from the Get data collection to the Data variable created.Click save. Add a toast to check the function is working correctly and the data object is being pulled during the page load. define the toast output as the selected output form the pervious node. click save.Click to the preview mode to confirm the data object is picking the data. Now the data object is rendering and storing to the local variable on Page no 1 successfully.Step 6: Copy the data from the Local page data variable to the pre-defined App variable.There are two steps involved here.1 : Copying the page 1 local data variable to App variable. As an example, we need to perform this copy while doing a button click. We have added a button object in page 1 as shown below.Added the below logic at the logical canvas. Added a Set app variable object and chose the variable name in input as the global variable and the assigned value as Empjob1 (The variable we have assigned from the above steps)Now the data is successfully copied to the global variable. however the catch here is the structure of the data variable is defined in page 1 is local in scope hence once this global variable (App variable) refer to any other page variables it will not retrieve the data to the correct structure, hence we need to also define the structure of the data object to the receiving pages to retrieve the data from the App variable.2 : Retrieve the data from the App variable to a local variable in page 2.We have added another page (Page no 2 ) and going to perform this activity. Below page 2 is created.We will be creating a local data variable in page 2, assign the data variable structure to the predefined structure created the above step 2 (TestDataEntity). Data variable created.Add a java script from the advanced logical canvas area.Open the java script object and perform the following initializations.Inputs sections input1 to be assigned to the App variable (TestGlobal). since we don’t need any other input parameters only one variable is required to perform the logic.Add the below script to transfer the data from the Global variable to the local data object. Make sure the output value type is Object and the Result property type is list.Below the code snip :…………………………………………………………….let incomingGlobalData = inputs.input1; //Declaring a local variable from the input1 data.const jsonString = JSON.stringify(incomingGlobalData); //Converting the value to stringconst jsonArray = JSON.parse(jsonString); //Parse it to JSONlet OutputData=jsonArray.map(item=>({ //Itrating with each data objects //userId: item.userId, // Navigate the source data oject and define the path of each fields correctly.lastName: item.userNav.lastName,firstName: item.userNav.firstName,location: item.location,department: item.department,ManagerID: item.managerId}));return { result: OutputData }; //The funtion will return the value in outputData.//Make sure the output value type is Object and the Result property type is list………………………………………………………………………………………. Add an alter at the end of the flow to review the java script response. 3. Create a navigation from the page 1 click button to page 2. It will enable the navigation between page 1 and page 2.4. Save the pages. Now the application is ready to test.click on preview and click to the button “Copy to Global variable” form the page no 1.After click the page 2 will render with the alert pop up with the data from the location variable created in page no 2.The data copy from the altert will be like below. [{“userId”: “XXXXXX”,”lastName”: “DeeTest2″,”firstName”: “Test1″,”location”: “XXX-B4″,”department”: “DEPT00XXXXX”,”ManagerID”: “XXXXXX”}]Thanks for reading this knowledge note. Hope you got the correct direction and the answer.Regards,Deepu Read More Technology Blogs by Members articles
#SAP
#SAPTechnologyblog
// Nürburgring