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=true

Hope it’s helpful 😊

Thanks,

Divya MANDAVA