Overview:- SAP Build apps enables quick application development which will reduce our coding dependence and give result oriented comprehensive user experience.
Motivation:-
In this blog you will learn how to post data from SAP Build Apps web application to S/4 HANA System.
Business Scenario:- Design a SAP build app which will post data to SAP S/4 HANA Z Table using OADAT POST Call.
Create an ODATA with Create Entity Method and Create a Custom Z Table.
Now Create a new SAP Builds app
![](/legacyfs/online/storage/blog_attachments/2023/09/1-38.jpg)
Click on create button
Click on Build an Application
![](/legacyfs/online/storage/blog_attachments/2023/09/2-20.jpg)
SAP Build an application
Click on Web & Mobile Application
![](/legacyfs/online/storage/blog_attachments/2023/09/3-17.jpg)
Web and Mobile Application
Give the Project Name and Description
![](/legacyfs/online/storage/blog_attachments/2023/09/4-17.jpg)
Create an application
Build apps UI Canvas
![](/legacyfs/online/storage/blog_attachments/2023/09/5-13.jpg)
Build apps UI Canvas
Now Its time to create a Destination in SAP BTP cockpit under Connectivity, give all the required details as given in below screen shot's and add the additional properties. In the URL give your ODATA URI and click on Save button then do the connection test.
![](/legacyfs/online/storage/blog_attachments/2023/09/6-14.jpg)
Create Destination
Connection test
![](/legacyfs/online/storage/blog_attachments/2023/09/7-14.jpg)
Connection Test
Go to SAP build app Auth tab and click on Enable Authentication
![](/legacyfs/online/storage/blog_attachments/2023/09/8-13.jpg)
Auth Tab in UI Canvas
Click on SAP BTP authentication
![](/legacyfs/online/storage/blog_attachments/2023/09/9-14.jpg)
BTP authentication
Click on Save button
![](/legacyfs/online/storage/blog_attachments/2023/09/10-18.jpg)
Authentication
Click on Data Tab and click on Add Integration button
![](/legacyfs/online/storage/blog_attachments/2023/09/11-12.jpg)
Data Tab
Click on BTP Destination
![](/legacyfs/online/storage/blog_attachments/2023/09/12-13.jpg)
BTP Destination
Select your created destination which has been created in destination under Connectivity in BTP cockpit
![](/legacyfs/online/storage/blog_attachments/2023/09/13-10.jpg)
Select created Destination
Click on Install Integration
![](/legacyfs/online/storage/blog_attachments/2023/09/14-11.jpg)
Install Integration
Click on Data Entity
![](/legacyfs/online/storage/blog_attachments/2023/09/15-8.jpg)
Enable Data Entity
Enabled Data Entity and Save
![](/legacyfs/online/storage/blog_attachments/2023/09/16-9.jpg)
Enabled Data Entity
Open UI Canvas and Click on green arrow for switch to Variable mode
![](/legacyfs/online/storage/blog_attachments/2023/09/17-9.jpg)
UI Canvas
In the variable mode here we can define App and Data variable
![](/legacyfs/online/storage/blog_attachments/2023/09/18-8.jpg)
Variable mode
Click on App variable as MATNR , MAKTX , I have only 2 fields in my ODATA & Custom Table.
![](/legacyfs/online/storage/blog_attachments/2023/09/19-10.jpg)
Creation id App variable
Click on Data variable + sign and select the Data entity
![](/legacyfs/online/storage/blog_attachments/2023/09/20-6.jpg)
Data Variable
Select the Data entity
![](/legacyfs/online/storage/blog_attachments/2023/09/21-6.jpg)
Select Data Entity
Added Data variable and click on Save
![](/legacyfs/online/storage/blog_attachments/2023/09/22-4.jpg)
Added data variable
Switch to view mode from variable mode
![](/legacyfs/online/storage/blog_attachments/2023/09/23-4.jpg)
Switch to view mode
In UI Canvas drag and drop the fields
![](/legacyfs/online/storage/blog_attachments/2023/09/24-5.jpg)
Drag and drop fields
Give Screen fields name as per your requirement
![](/legacyfs/online/storage/blog_attachments/2023/09/25-4.jpg)
Screen fields name
Assign screen fields with App variable, select the fields and click on value icon
![](/legacyfs/online/storage/blog_attachments/2023/09/26-5.jpg)
Assignment of app variable
After clicked on Value below popup will open, Select the Data and Variable
![](/legacyfs/online/storage/blog_attachments/2023/09/27-5.jpg)
Data and Variable
click on App variable
![](/legacyfs/online/storage/blog_attachments/2023/09/28-5.jpg)
App Variable
Select the App variable and click on Save , Please do the same activity to assign app variable for MAKTX fields and save.
![](/legacyfs/online/storage/blog_attachments/2023/09/29-3.jpg)
Bind field with MATNR
MATKX assignment with App variable
![](/legacyfs/online/storage/blog_attachments/2023/09/30-3.jpg)
MAKTX assign with App variable
Select the button and click on Show Logic for BUTTON 1
![](/legacyfs/online/storage/blog_attachments/2023/09/31.jpg)
Select the button
On the bottom of screen button logic will be open
![](/legacyfs/online/storage/blog_attachments/2023/09/32.jpg)
Button Logic window
as per our requirement, We need to perform the create operation so here in logic window drag and drop create record tool to logic canvas as shown below
![](/legacyfs/online/storage/blog_attachments/2023/09/33.jpg)
After Dragged the Create record
![](/legacyfs/online/storage/blog_attachments/2023/09/34.jpg)
Select item for drag and drop
Now its time to mapping so here you need to map button even to create record just drag the cursor from component tap to Create record ad shown below in yellow color and click on save
![](/legacyfs/online/storage/blog_attachments/2023/09/35.jpg)
Mapping
Assign App variables with Data entity
![](/legacyfs/online/storage/blog_attachments/2023/09/36.jpg)
Assign fields with App variable
Click on Formula
![](/legacyfs/online/storage/blog_attachments/2023/09/37.jpg)
Formula
Map the Entity fields with App variable and Save
code -{Matnr: appVars.MATNR, Maktx: appVars.MAKTX}
![](/legacyfs/online/storage/blog_attachments/2023/09/38-1.jpg)
Mapping of variables
Drag and drop the toast for user confirmation popup after data saved and right side you can give any custom message
![](/legacyfs/online/storage/blog_attachments/2023/09/43.jpg)
Now its time to run the App
![](/legacyfs/online/storage/blog_attachments/2023/09/39.jpg)
Launch the app
And then click on Preview on Web button select the App
![](/legacyfs/online/storage/blog_attachments/2023/09/40-1.jpg)
Select the App
Preview of App
![](/legacyfs/online/storage/blog_attachments/2023/09/41.jpg)
App Preview
Before enter the data , Showing S/4 Custom table entry
![](/legacyfs/online/storage/blog_attachments/2023/09/42.jpg)
Table entry
Now its time to fill data on the Build apps and click on Save button
![](/legacyfs/online/storage/blog_attachments/2023/09/44.jpg)
Saving Data to S4 System
Now its time to check table in the S/4 system
![](/legacyfs/online/storage/blog_attachments/2023/09/45.jpg)
Table entry
Summary:
This blog can help you to understand how SAP Build Apps perform any ODATA call for POST Method.
Since I am also new to writing blogs, Need Expert suggestions & feedbacks are much appreciated.
If you like this blog post you can follow me for more blogs I will try to make in coming future specifically related to SAP BTP Technologies & SAP Build Apps.
Thank You,
Dinesh Kumar