Skip to Content

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

Capture.png

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

Capture.png


Step 2 : Template selection

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

Capture.png

Step 3 : Basic Information

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

Capture.png

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 :
https://sapes4.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/?sap-ds-debug=true

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.

Capture1.PNG

Step 5 : Template Customization

Application Settings

Capture.png

Data Binding – Object

Capture.png

Data Binding – Line Item

Capture.png

Capture.png

Step 6 : Confirmation

Capture1.PNG

STEP 7 : Enjoy the results

Capture.png

Capture.png

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.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

    1. Amol Gupta 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?

      (0) 
    1. Radek Chudziak

      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

      (0) 
  1. Danny Van der Steen

    Hi,

    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.

    (0) 

Leave a Reply