Technical Articles
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
- 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
- Open the sub-account and click on subscription
2. Adding destination for OData service.
- In Cloud Foundry Cockpit click on destinations and provide the details as mentioned below:
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
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
Hi Naveen,
Are you able to build the project? It seems there is some syntax error in the view.
Thanks,
Abhi
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
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
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
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
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
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
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
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.
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
Hello,
How to add on premise SAP system in destination, as I don't see cloud connector option in cloud foundry.
I have done everything it seems to be working but for some reason the page loads the rows but the fields are blank: