Hello everyone and thank you for reading this blog.

Purpose for writing this blog is to provide details as how to get familiar with SAP Business Studio in trail account and then integrate OData service to our custom SAP UI5 application using the tool.

So let’s begin with a quick intro of the tool.

What is SAP Business Application Studio ?

It’s is a new SAP Cloud Platform service in SAP Cloud Foundry which offers a modern development environment tailored for efficient development of business applications for the SAP Intelligent Enterprise.

It will provide one or more dev spaces where we can create our applications and it ensures that all the tools are readily available in order to create the application of our needs. Additional tools can also be supplemented if required.

Let’s get started and get some experience on the system with HANA CF-Trial account with below mentioned steps.

 

1. Getting the subscription

1. First and foremost SAP HANA Trial account is required with cloud foundry account. Refer link. https://developers.sap.com/tutorials/hcp-create-trial-account.html
2. Open the sub-account and click on subscription

2. Adding destination for OData service.

1. In Cloud Foundry Cockpit click on destinations and provide the details as mentioned below:
2. 

   HTML5.DynamicDestination=true
   WebIDEEnabled=true
   sap-client=100
   WebIDESystem=gateway
   WebIDEUsage=odata_abap,dev_abap​

3. In case you do not have a backend system you can still use SAP Development Gateway system ES5 and create your destination. Refer this URL – https://developers.sap.com/tutorials/gateway-demo-signup.html

1. Below is the results for EmployeeSet entity from service which we will consume in SAP UI5 application.

3. Creating Dev Space and Sync-up with CF

• After activating the subscription go-to the application to create dev space

• Now we need to create a dev space where all the projects will be hosted. So, choose SAP Fiori and then create.

• Once the dev space is created it will appear as shown below with unique id

• Click on the dev space name and application will be opened as below:

• In order to sync with cloud foundry account to deploy the application we need to click on the bottom purple bar on the left hand side.

• Once we click there it will ask for CF url and other details as shown below

 

Your HANA Trial login email

Login Password

 

Choose CF trial Sub-account

 

Choose CF trial space where application will be deployed.(Do not get confused this space is Cloud Foundry Space which will be created in step 1a. This is not application studio dev space).

 

Once account is synced it will show in the notification.

 

4. Creating SAP UI5 application with table data.

• Choose “Create New Project From Template”(Just changed the theme to dark mode )

• Choose – SAP Fiori Freestyle Project Generator

 

• Select Cloud Foundry as target running environment

 

• Choose runtime as shown below

• Provide the necessary details

• View Name
• Choose the destination

• We can view the project in Project explorer

 

• Open manifest.json from webapp and copy id(line no 4)

• Open approuter folder and add the below property in XS-APP.JSON file.

“welcomeFile”: “<id from manifest without dot(.)>”

• Now as you can see in webapp-manifest datasource has been added.

• Lets give a name for the odata Model.

 

• Adding a responsive table to show the data

 

• Build the mta.yaml file

 

5. Creating a run-configuration and testing the application.

• Goto Run configuration tab and click on

• Choose the appropriate folder

• Choose Yes to pick from build

• Select UI version

 

• And then give any name for config and run

• Select the destination on left hand side and click on Bind

• Choose system(S4L in this case)

 

• Binding will turn green

• Now run the module and click on Expose and Open as it creates a mock url and port to run the app

• Data from EmployeeSet displayed in the table format !!

So that’s it then. We have successfully mapped OData service to UI5 application and tested it using SAP Business Application Studio. Hope this read was instructive and helpful. Please do comment for any clarification.

Warm Regards,

Abhi Sinha