Create a SAPUI5 interface
- How to create a user interface with a Fiori Master-Detail template
- This tutorial is designed for SAP HANA on premise and SAP HANA, express edition. It is not designed for SAP HANA Cloud.
- Step 1
Create a new module using the
Fiori Master-Detail Module
The wizard will present with options to bind the web interface to a data provider. In your case, you have created an OData service. Choose it from the list:
- Step 2
You will first provide general information about the application:
Scroll down and complete the binding for the header:
Keep scrolling down and complete the binding for the items:
- Step 3
The web module depends on the Node.js module to fill the interface with data. This time, Web IDE has added the dependencies automatically in the
Locate the dependency in the Code Editor.
Paste the entire web module definition, including its requirements and no resources. Then click on Validate
- Step 4
package.jsonfile in the web module.
And change the version of the
2.9.1to match the version delivered in your virtual machine:
Save and close the file.
- Step 5
Build the entire project.
Make sure the
jsmodule is running first (remember, it’s a dependency).
Run the web module:
A new browser tab will open.
Click on any Purchase Order and check the URL to respond to the question below.
Which URL resembles the URL generated for your app?
- Step 6
If you want to take the code with you, remember you can Stage All and sync to GitHub.
The application you have created can be enhanced to add more functionalities or features, such as user authentication. Here are some links if you want to get your own system or continue learning for free:
- Get your own SAP HANA, express edition, instance: https://developers.sap.com/topics/hana.html
- Tutorials for Development in XS Advanced : https://developers.sap.com/group.hana-xsa-get-started.html
- XS Advanced Development for (not so) dummies (blog): https://goo.gl/vsuy2H
- Intro to Core Data Services (SAP
- Intro to XS OData (SAP
developers.sap.comto check the tutorials on XS Advanced and to get your own instance of SAP HANA, express edition.