SAP API Business Hub is the central catalog of all SAP and partner APIs for developers to build sample apps, extensions and open integrations with SAP. In this blog, we would show case the discovery, exploration and consumption of the S/4 HANA Cloud APIs to build a Fiori Application.
In the part 1 of the blog series the Discover, Explore and Testing of the S/4 HANA Cloud APIs (Read Planned Orders) was captured and this part the consumption of the Read Planned Orders API in a Fiori application is showcased.
Build Fiori application using S/4 HANA Cloud APIs
SAP Cloud Platform Web IDE is a powerful, web-based integrated development tool that simplifies end-to-end application development and enables developers to quickly discover APIs from SAP API Business Hub to generate Fiori applications.
Once the Read Planned Orders API has been explored and tested from SAP API Business Hub, we can consume this API to build a Fiori application in SAP Cloud Platform Web IDE.
- Navigate to https://account.hanatrial.ondemand.com/cockpit
- Click on Neo Trial
- Navigate to Services tab, then search for Web IDE Full-Stack and then Click on the tile SAP Web IDE Full-Stack.
SAP API Business Hub integration is only available in SAP Cloud Platform Web IDE Full-Stack.
- Click on link Go to Service to open SAP Cloud Platform Web IDE.
- Click on the New Project from Template under the Create a Project group to create a new Fiori project.
- In SAP Cloud Platform Web IDE, a lot of application templates are pre-shipped. In this blog, we would be building a Fiori application showing list of Read Planned Orders and their details and therefore would be select the SAP Fiori Master-Detail Application template and then click on Next
- Enter a project name say MyPlannedOrders and then click on Next
- In the Sources, select SAP API Business Hub to view all OData services published in SAP API Business Hub. From the Select an API Package drop down, select SAP S/4 HANA Cloud to view all the OData APIs from S/4 HANA Cloud.
Currently only OData APIs from SAP API Business Hub is available for Data Connection binding.
- In the Search APIs, type in Read Planned Orders and then select the Read Planned Orders APIs to be used in the Fiori application data binding.
- In case you are prompted for the User credentials, provide in your SAP Community user name and password. This would fetch the API details from SAP API Business Hub. Then click on the Next
- Enter Application Settings as provided in the table below
My Planned Orders
My Planned Orders and Order Details
- Enter the Data Binding – Object details as provided in the table below
Object Collection Id
Object Numeric Attribute
- Enter the Data Binding – Line Items details as provided in the table below
Line Item Collection
Line Item Collection ID
Line Item Title
Line Item Numeric Attribute
- Click on the Finish button to generate MyPlannedOrders Fiori applications.
- Run the newly created Fiori application by selecting the MyPlannedOrders project and then click on Run
- Select html from the Choose the File to Run dialog box and then click on the OK button.
- In case the popup is disabled on your browser, then you might see the Disable Pop up Blocker Allow, SAP Web IDE application to launch a new pop up and then above step.
- The newly launched application will show list of My Planned Orders from the S/4 HANA Cloud API Sandbox.
The configuration required to consume the Read Planned Orders API from your own SAP S/4 HANA Cloud APIs tenant is covered in the Part 3 of this blog series.