Hello All,
In this Blog I would like to share some knowledge on how to Create a list app using Sap BUILD Tool and we are going to use the SAP S/4Hana Sandbox system to connect and fetch the data.
This blog can we divided into two sections:
1.
Configuration of SAP BUILD APP Setup
2. Creating a Sample Build APP
Please follow the First section for Step-by-Step process of Configuration of SAP BUILD APP Setup.
Let.. Set.. Go!!!
😊
NOTE: May Be This Blog Seems To Be Lengthy, Still Give It A Try U Will Surely Love IT 😉
Creating a Sample Build APP:
Once we are done with SAP BUILD Configuration, now you will be seeing the SAP BUILD Environment like below.
Step:1 Initially Click on
Create Button.
In this we will be asked to select whether we need to develop Front end or Back- end Application.
As, we are developing Front end application select
Web and Mobile Application.
Select
Build an Application ----->
Web and Mobile Application.
Step 2: Next give the Project name and Description and then click on create.
Here you will be able see the project you have created. Now let us set up our system to get the data.
Step 3: Go to SAP BTP account and Click on
Connectivity -------> Destinations.
Creating a Destination:
As I have mentioned you before we will be Using the SAP S/4HANA system, please click on the below URL, and then login will your SAP Credentials.
https://api.sap.com/products/SAPS4HANACloud/apis/ODATA
Step 4: Go
to APIs -----> ODATA V2.
Then search for the
product and select
product master (A2x).
Step 5: Scroll down below and go to
Configuration Details.
Copy the sandbox URL under the Configuration details.
Step 6: Come back to Sap BTP Cockpit and Paste it in the
URL input field and enter the
Name of your Choice.
As we are using Sandbox system, we need to add some
additional properties.
url.headers.APIKey beside that get the Key from S4Hana API and copy it.
Step 7: Go back to
SAP S/4 Hana Cloud ------>
Product Master(A2X) ----->
Show API Key (You can find this button just below your profile Icon).
Click on Show API key and copy it.
Step 8: Next come back to SAP BTP cockpit and Then enter that copied API key right behind the headers input box. Refer the image below.
Now let us add one more additional property as
HTML5.DynamicDestination and give Beside as
true.
Enter third additional property as
AppgyverEnabled and set it as
true.
Once all the properties are entered Now Click on
Save.
Step 9: Now let’s start building our apps in SAP BUILD Environment.
Come back to sap build environment and click on the app we have created and then select
AUTH.
We need to connect to the S/4 HANA sandbox system we need to add authentication, Click on
enable and select
SAP from below.
Step10: Click Ok on popup and click save on your right top corner.
Step 11: Click on
Help and select check box. So now it turns the authentication and turns to use data sources.
Step 12: Now click on
DATA ---->
ADD INTEGRATION.
Step 13: Now select
BTP Destinations.
Adding our BTP destinations.
Note: If you have multiple destinations in your BTP only first one would be shown here.
Select the
destination (Appears Name of the System we have entered in SAP BTP), then click on
Browse real Data.
Hmm!! It looks good as its showing data now go back and click on
Install Entity appears on the top-right corner.
Enable data entity and click on
save which is on top of the screen.
Step 14: As we have established the data connectivity, we need to develop UI screen which needs to be displayed along with data. Now let us start with the basic list. As its not here go to
Market Place to get the default template available.
Step 15: Search for the
Basic List and click on
install.
As
SAP BUILD is all about
LOW CODE - NOW CODE Functionality, we don’t need to write any code for view unlike in our sap apps, we just need to Drag and Drop the existing designs we need.
Now go to Home page (
UI CANVAS) then
Drag & Drop the list to your canvas.
Step 16: Now click on the list which is dragged and select to configure with our data source.
Select this
A_Product entity Set, and we can see fields which need to be viewed. So, drag and drop them based on your requirement.
Now we need to configure the authentication, so click on
Properties.
Step 17: Click on the
X mark.
Step 18: We will get the different binding types here, so select
Object with properties.
Now set the Authentication type to Public and Save.
After Save, we get this again
Save and Exit (Right top Corner). Now in UI canvas our project is ready so save it.
Now we are ready to test our app, click on
LAUNCH.
Open Preview Portal and preview your app, here we will get mobile and web preview. I have selected the Web preview.
Now open web preview.
Hurray!! Our APP is Running Successfully.
References:
https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/
https://help.sap.com/fiori_bs2013/helpdata/en/a7/1564526ba1f25fe10000000a423f68/content.htm?no_cache...
Hope it’s helpful
😊
Thanks,
Divya MANDAVA