Skip to Content
Technical Articles
Author's profile photo Abhishek Sinha

SAP Business Application Studio with SAP UI5 and OData service binding

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

Assigned tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Naveen Jain
      Naveen Jain

      Dear Abhi,

      Nice blog.

      I am following same steps but using my own odata service which is working fine.

      But at last step in project creation getting below error.

      Please help with this.

      {“message”:”fiori-project generator failed – Failed to consume services due to: Unexpected close tag\nLine: 12\nColumn: 15\nChar: >\nAbort ui5-simple creation.”,”stack”:”Error: Failed to consume services due to: Unexpected close tag\nLine: 12\nColumn: 15\nChar: >\nAbort ui5-simple creation.\n at Ui5SimpleGenerator._abortGenerator (/extbin/generators/ui5-generators/generator-ui5-simple/generators/app/index.js:205:24)\n at Ui5SimpleGenerator.<anonymous> (/extbin/generators/ui5-generators/generator-ui5-simple/generators/app/index.js:168:26)\n at Generator.throw (<anonymous>)\n at rejected (/extbin/generators/ui5-generators/generator-ui5-simple/generators/app/index.js:5:65)\n at processTicksAndRejections (internal/process/task_queues.js:97:5)”}

       

      Regards

      Naveen Jain

      Author's profile photo Abhishek Sinha
      Abhishek Sinha
      Blog Post Author

      Hi Naveen,

      Are you able to build the project? It seems there is some syntax error in the view.

      Thanks,

      Abhi

      Author's profile photo Naveen Jain
      Naveen Jain

      Dear Abhi,

       

      Thanks for reply.

      I did not reached to view, i have just given the necessary information in template only, and project is not generated yet.at the final step getting this error.

       

      Regards

      Naveen

      Author's profile photo Abhishek Sinha
      Abhishek Sinha
      Blog Post Author

      Hi Naveen,

      Ok so you are getting error on "Choose the destination" step while creating the project. In that case please cross check the destination configuration you have maintained in Cloud Foundry cockpit(Step 2). Also, if possible provide screenshot of destination and as well the error so that I can help you with further details if required.

      Thanks,

      Abhi

      Author's profile photo Jaden Scheidegger
      Jaden Scheidegger

      Hi Abishek,

      Thanks for the guide!

      I have a question, when I get to the choose a destination part, I get a prompt to type in a username and password for the backend system. --> Here is a screenshot

      Do you know where I can find the username and password for this?

       

      Thanks again.

      Greetings,

      Jaden

      screenshot

       

      Author's profile photo Abhishek Sinha
      Abhishek Sinha
      Blog Post Author

      Dear Jaden,

      Looking at the screenshot it seems you are trying to connect to HANA DB(either its SCP or backend) so you need to provide the credentials for your database(DB User if its SCP HANA DB or GUI user credentials in case of ECC).

       

      Thanks

      Abhi

      Author's profile photo Naveen Jain
      Naveen Jain

      Dear abhishek,

      As am seeing in your XS-APP.JSON, there is no code for source and  destination..because here you are running configuration binding Data source And selecting s4l destinations for binding.

      But how the XS-APP.json should be look like if we want to deploy it at cloud foundry.

      Source And destination should be addded there.

       

      Thanks

      Naveen jain

      Author's profile photo Abhishek Sinha
      Abhishek Sinha
      Blog Post Author

      Dear Naveen,

      In Business Application Studio neo-app.json is replaced with xs-app.json file. We can maintain the destination in the same way we used to maintain earlier.

      "routes": [
      {
      "source": "^/sap/opu/odata/",
      "destination": "<YourDestination>"
      }
      ]

      Hope this helps.

       

      Thanks,

      Abhi

      Author's profile photo Brandon Caulfield
      Brandon Caulfield

      Hi Abhishek Sinha

      Thanks for the brilliant blog post!

      I'm trying to do exactly as you've described in the bl;og except with a local SAP developer trial thats connected to SCP Cloud foundry with the Cloud Connector. I've posted my issue here in the sap Community forums and I would be very grateful for any advice or input you may have? It's worked before in my neo environment but I'm sure I've missed something in cloud foundry or with my backend services.

      Thanks so much!

      B

      Author's profile photo Abhishek Sinha
      Abhishek Sinha
      Blog Post Author

      Dear Brandon,

      Thank you for reading the post. I have gone through the link you have shared. In the destination configuration there is one difference i think.

      WebIDESystem=gateway(This is for ES5). If you see the screenshot of S4L system(Step2.1) there I have mentioned WebIDESystem=S4L.
      So i think if you provide it correctly then may be that can solve your issue.
      
      Regards,
      Abhi
      Author's profile photo Somyali Gupta
      Somyali Gupta

      Whenever I am changing something in View, I have to build MTA again and again, else its not reflecting new changes while running in Run Configuration.

      Please suggest

      Author's profile photo Mahendra Ulvekar
      Mahendra Ulvekar

      Hello,

       

      How to add on premise SAP system in destination, as I don't see cloud connector option in cloud foundry.

      Author's profile photo Silas Rocha
      Silas Rocha

      I have done everything it seems to be working but for some reason the page loads the rows but the fields are blank: