Skip to Content

Create a SAPUI5 interface

Create a SAPUI5 interface enhancing a Fiori Master-detail template
You will learn
  • How to create a user interface with a Fiori Master-Detail template
LsubatinLsubatinJanuary 5, 2021
Created by
September 21, 2017


  • 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

    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
    Log in to complete tutorial
  • Step 2

    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
    Log in to complete tutorial
  • 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 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

    Log in to complete tutorial
  • Step 4

    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.

    Log in to complete tutorial
  • Step 5

    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?

    Log in to complete tutorial
  • Step 6

    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. Here are some links if you want to get your own system or continue learning for free:

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

    Log in to complete tutorial
Back to top