Skip to Content
Previous

Create a SAPUI5 interface

By Lsubatin

Create a SAPUI5 interface enhancing a Fiori Master-detail template

You will learn

You will create a user interface with a Fiori Master-Detail template.

Details


Step 1: Create a UI5 module

Create a new module using the Fiori Master-Detail Module

Create Fiori Module

Name it web

Name Fiori 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:

Name Fiori Module
Please log in to access this content.
Step 2: Map the OData fields with the user interface

You will first provide general information about the application:

Name Fiori Module

Scroll down and complete the binding for the header:

Name Fiori Module

Keep scrolling down and complete the binding for the items:

Name Fiori Module
Please log in to access this content.
Step 3: Check dependencies

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 mta.yaml file:

Name Fiori Module

Locate the dependency in the Code Editor.

Name Fiori Module

Paste the entire web module definition, including its requirements and no resources. Then click on Validate

×
Step 4: Modify the dependencies

Open the package.json file in the web module.

Open package json

And change the version of the @sap/approuter module to 2.9.1 to match the version delivered in your virtual machine:

Open package json

Save and close the file.

Please log in to access this content.
Step 5: Run the module

Build the entire project.

Make sure the js module is running first (remember, it’s a dependency).

js module running

Run the web module:

web module run

A new browser tab will open.

super web app

Click on any Purchase Order and check the URL to respond to the question below.

Which URL resembles the URL generated for your app?
×
Optional: Sync to GitHub and check next steps

If you want to take the code with you, remember you can Stage All and sync to GitHub.

Final sync

The application you have created can be enhanced to add more functionalities or features, such as user authentication.

Visit developers.sap.com to check the tutorials on XS Advanced and to get your own instance of SAP HANA, express edition.

Please log in to access this content.

Updated 10/10/2017

Time to Complete

15 Min

Beginner

Tags

Next
Back to top