Skip to Content
Author's profile photo Amol Gupta

An insight into SAP Fiori Master-Detail Application (Template in SAP Web IDE) step by step

Introduction : The SAP Fiori Master Detail Application from Template can be a good help where a lot of code and configuration is auto generated but the wizard sends beginners into a tail spin as it is not crystal clear which input in the wizard will lead to what output.

Target audience : Beginners and experts alike.

Date created : 05.09.2016

Note for the readers : This is a living document and work in progress. I will be iteratively enhancing it. Do let me know via comments if you find anything missing or incorrect or your suggestions.

High level overview of the process


The most important steps are Data Connection and Template Customization. In Data Connection you specify a service to use for your application and in Template Customization you specify the fields to be used and where they will show up in the running application.

Step 1 : Create project from template


Step 2 : Template selection

Developer chooses the SAP Fiori Master-Detail Application template here.


Step 3 : Basic Information

Developer mentions the preferred project name and if this project is going to be a mobile application


Step 4 : Data Connection
Developer in this step specifies the service source.

Sources Description
Service Catalog

Select SAP Gateway system and OData service.

Workspace Select local service from SAP WebIDE workspace
File System Upload the service information from a local file system
Service URL Copy your SAP Gateway service URL without host information.
You need to create Destinations to use this option.

For this example lets chose “Service URL” for an sample ES4 service. You will have to create a destination for the same details of which are explained in the following document :

An insight into Destinations for Northwind / ES4 services for use with SAP HCP / Web IDE

I am using the following OData Service :

This service is free to use but needs a one time registration but authentication every time you use it. The above links will help you through the process.


Step 5 : Template Customization

Application Settings


Data Binding – Object


Data Binding – Line Item



Step 6 : Confirmation


STEP 7 : Enjoy the results



Conclusion :

Its interesting to note that this given combination of template customization settings works like a charm but I tried to change the fields other than given here and it failed with an error. I have not tried to trouble shoot it yet, remains in my TODO list.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Jun Wu
      Jun Wu

      where is the insight......

      Author's profile photo Amol Gupta
      Amol Gupta
      Blog Post Author

      @Jun Wu - as I mentioned at the top this is a work in progress. As requested in the note for the readers, it would be great if you could provide your suggestions and it will be accomodated. Is there anything particular you were expecting but did not find here or were you not able to follow or generate the scenario with information provided here?

      Author's profile photo Krzysztof Bulanowski
      Krzysztof Bulanowski

      Hi, what happened to Fiori Master-Detail Template in WEB IDE on trial HCP platform?
      I cannot select it. Instead, there is Fiori Master-Master-Detail!

      Author's profile photo Former Member
      Former Member

      It happened to me as well. I think there was some issue where only the old templates were available (e.g. Master-Master-Detail). I then noticed I was getting the new templates on one PC and old template on other PC. I have cleared the cache and now both PCs are getting the new templates

      Author's profile photo Danny Van der Steen
      Danny Van der Steen


      this is already very nice.  But could you also provide a technical walktrough.  I mean explain what is happening in the browser at all different points inside the different pages.  This would be a great help on changing the app to do different things.  Like,i am.searching on not dooing the initial dataload from the backend but have no,clue on where to start.