Skip to Content
Technical Articles
Author's profile photo Ankur Bajpai

Developing App with SAP Fiori Elements (List Report Page/Object Page) using Northwind OData service and how to create an extension of SAP Fiori Elements-

Hi All,

In this blog post, I’ll try to discuss how to develop SAP Fiori Elements (List Report Page/Object Page) using Northwind OData service and how to create an extension in detail.

1- Introduction: SAP Fiori Elements

  • SAP Fiori elements provide designs for UI patterns and predefined templates for common application use cases
  • We can use SAP Fiori elements to create SAP Fiori applications based on OData services and annotations.
  • To develop an SAP Fiori Elements app, we have not required JavaScript UI5 coding and uses predefined views and controllers.

 

1.1.1- So why we need SAP Fiori Elements app and why SAP propose SAP Fiori Elements?

  • High development efficiency- Reuse functionality that does not require specific programming. You do not need to build the UI again and again. Just reuse the common features required by most applications. They are provided by the SAP Fiori elements floorplans.
  • Design consistency- A common look and feel and UI behavior for all apps. Predefined floorplans, views, and controllers ensure UI consistency within and across similar apps.
  • Decoupling of UI and business logic- To develop SAP Fiori Elements apps we use annotations. It reduces the UI coding for the frontend developer. Developers can focus on the business logic.

 

1.1.2- SAP Fiori Elements Floorplans:

SAP provides some floorplans to create an SAP Fiori Elements. We can create apps using the following SAP Fiori elements floorplans.

  • List Report and Object Page- The list report allows the user to work with a large list of items. It combines powerful functions for filtering large lists with different ways of displaying the resulting item list. The object page lets you display, edit, and create objects, as well as save drafts. It is suitable for both simple objects and more complex, multi-faceted objects. The object page view gives you optimal support for multiple devices.
  • Worklist– A worklist displays a collection of items to be processed by the user. There is no need for sophisticated filtering.
  • Overview Page– An overview page is a data-driven SAP Fiori app for organizing large amounts of information. Information is visualized in a card format in an attractive and efficient way. Different cards are used for different types of content.
  • Analytical List Page– Analytical list page is an SAP Fiori elements application for detailed analytics. It lets you analyze data from different perspectives.

 

Fig. 1.2.1

 

1.1.3- Supported tool to develop or extend SAP Fiori Elements App-

  • We can use SAP Web IDE to create and maintain SAP Fiori element apps.

1.1.4- System Requirements-

  • SAP Web IDE 1.17 or higher.
  • If you want to use annotations in CDS: SAP NetWeaver5 SP01 or higher.

 

2- Developing an SAP Fiori Elements App Using SAP Web IDE

Pre-requisite-

2.1.1- Sign up for a free trial account on SAP Cloud Platform

https://www.sap.com/developer/tutorials/hcp-create-trial-account.html

2.1.2- Create a Northwind Destination on SAP Cloud Platform

https://www.sap.com/developer/tutorials/hcp-create-destination.html

Once you created your account and destination on SAP Cloud Platform, open SAP Web IDE Full-Stack.

 

2.1.3- How to open SAP Web IDE Full-Stack?

  • Login to your SAP Cloud Platform Account -> Neo Trial -> Services -> SAP Web IDE Full-Stack-> Go to Services.

Kindly follow below screenshot for better understanding-

     Fig. 2.2.1

Fig. 2.2.2

 

Fig. 2.2.3

 

Fig. 2.2.4

 

Fig. 2.2.5

 

 

2.1.4- Development of SAP Fiori Elements app (List Report/Object Page)

  • Before going to develop List Report page we must add extension (Annotation Modeler) on SAP Web IDE Full-Stack.
  • Please follow below screenshot to add extension on SAP Web IDE Full-Stack.
  • Go to SAP Web IDE Full-Stack-> Preferences-> Extensions-> Search-> Annotation Modeler.

 

Fig. 2.2.6

 

  • After changing mode to ON, press the button Save.
  • Now go to your Development Workspace and Make a new Project from Template.
  • In the menu bar, select File-> New-> Project from Template.
  • Under Template selection, select “List Report Application” and click Next.

Fig. 2.2.7

 

Enter Basic Information details as shown below Fig. 2.2.8 and click on Next.

Project Name FioriElementSalesOrder
Title Manage Sales Order
Namespace com
Description Manage Sales Orders App

Fig. 2.2.8

  • Choose Data Connection to connect with backend Northwind OData service.
  • Select Service URL option under Sources tab and choose your created Northwind OData Service connection which we had done in Step-2.1.2.
  • Enter relative URL “V2/northwind/northwind.svc” in the text field shown below and click on Test button to test OData connection.
  • If data is available in the Service table, click on Next.

 Fig. 2.2.9

 

  • There is no annotation provided by Northwind service. So, the Table is empty in the Annotation Selection Click on Next.

Fig. 2.2.10

Select OData Collection under Template Customization tab as shown in the Fig. 2.2.11.

 

OData Collection Orders
OData Navigation Order_Details

Fig. 2.2.11

 

  • For the OData Collection, select the Orders entity set. This will create the List Report Page and the first page of our Object Page. In the OData Navigation drop-down menu, select the Order_Details navigation property to create a navigation to the second object page.
  • Now we uncheck the Smart Variant Management for List Report We’ll discuss the functionality of this option. Click on Next.

Fig. 2.2.12

 

  • Click on Finish. New List Report app structure is created.

 

 

Fig. 2.2.13

Fig. 2.2.14

 

  • The newly created app or component reuses the views and controllers from suite.ui.generic.template. You can find the destinations in the neo-app.jsonfile.
  • The resource links and route definitions for navigation are in the app descriptor file (manifest.json)
  • To run the app, select webapp/Component.js, and choose Run.
  • We’ll see an almost empty list report with minimal default features.

Fig. 2.2.15

 

  • Here we can see two option of Standard, as we unchecked option of Smart Variant Management for List Report So now we are going to remove this option. Go to manifest.json file and open Code Editor.
  • Scroll down to ui.generic.app. Set “smartVariantManagement”: true as shown in Fig. 2.2.16.

Fig. 2.2.16

  • To run the app, select webapp/Component.js and choose Run. Now we can check there is no such option in Fig. 2.2.17

Fig. 2.2.17

 

  • Now we are going to Create a folder in the application project and creating a local annotation file.
  • Right-click on the webapp folder in your project, and choose New-> Folder.

Fig. 2.2.18

 

  • Enter annotations as the folder name and choose OK.

Fig. 2.2.19

  • Right-click on the annotations folder in your project and choose New -> Annotation File.

Fig. 2.2.20

 

  • Enter File name or accept the default one(annotation0) and choose Next.

Fig. 2.2.21

 

  • Choose The annotation file is created in your project with all the necessary annotation vocabulary references and nodes. Annotation files that are created by the wizard are automatically registered in the manifest.json file of your project as a data source.

Fig. 2.2.22

 

  • Double click on annotation0.xml file to open the file. In the annotation modeler, the Annotation Structure table shows all the available annotations applied to the selected target. Currently, there are no annotations in our project, so we can’t see any for now.

Fig. 2.2.23

 

  • Choose the ‘+’ button in the Local Annotations.

Fig. 2.2.24

 

  • Select LineItem annotation from the UI Vocabulary node and choose OK. Choose the ‘+’ button in the LineItem node. Select DataField from the records list and choose OK.
  • Here I took OrderID value under DataField.

Fig. 2.2.25

 

  • Choose Save and Run.

Fig. 2.2.26

  • Here in Fig. 2.2.26 we can see OrderID add as a column. But when I clicked on Go button, I got error of CORS something in the developer tool in Fig. 2.22.7.

Fig. 2.2.27

 

  • There is $batch issue when accessing Northwind OData service. To resolve this issue, I add “useBatch”: false parameter in the json file under “dataSource”: “mainService”. Then my application was working fine, and we can see data.

Fig. 2.2.28

  • Choose Save and Run.

Fig. 2.2.29

 

  • Now add more DataField in our List Report page. Go to UI.LineItem and click on ‘+’ to add DataField. Here I added Order Date, Required Date, Ship Address.

 

Fig. 2.2.30

 

  • Click on ‘+’ button on Local Annotations to add selection field on Header of the List Report page. SelectionFields is the record type.

 

Fig. 2.2.31

 

  • I added one more record which is %Gross and I want to show %Gross in progress bar, I used DataFieldForAnnotation to show %Gross in the progress bar. Before adding UI.DataFieldForAnnotation we must create Annotation path for UI.DataFieldForAnnotation. I added UI.DataPoint first by click on ‘+’ button on Local Annotations.

Fig. 2.2.32

  • Choose Save and Run.
  • This is how our app looks like-

Fig. 2.2.33

  • Now our List Report is looking fine, but there is no Multi Select option. We can sow Multi Select in our List Report by adding one property in our List Report page.
  • Go to json file and scroll down upto sap.ui.generic.app and add:-“multiSelect”: true

Fig. 2.2.34

 

  • Choose Save and Run. Now our Multi Select task is done. I forgot to add you one more point. In the Fig. 2.2.35 we can see Header data- Orders (830). For this we have to go to in Local Annotation and click on ‘+’ button and add HeaderInfo as showed in the below screenshot.

Fig. 2.2.35

 

Fig. 2.2.36

 

 

  • Now come to an Object page.
  • Go to Local Annotations click on ‘+’ button and add DataPoint(UI.DataPoint).

Fig. 2.2.37

 

  • Choose Save and Run. Now our Object Page header looks like this.

Fig. 2.2.38

 

  • I want to show my related apps in the Header bar of the Object page. For that I added a property in json file. Add “showRelatedApps”: true at sap.suite.ui.generic.template.ObjectPage.

Fig. 2.2.39

 

  • Also we are going to add annotation at content area of the Object Page.
  • Go to Local Annotations and click on ‘+’ button to add FieldGroup. Click on Edit Qualifier for respective UI.FieldGroup for the better identification.
  • Click on ‘+’ button on FieldGroup to add Data and click on ‘+’ button Data to add UI.DataField.

Fig. 2.2.40

 

  • Lets add Facet and add subnodes UI.ReferencrFacet for the UI.Facet to show created UI.FieldGroup at content area of the Object Page. Go to Local Annotation and click on ‘+’ button and add Facet. Click on ‘+’ button at UI.Facet and add UI.ReferenceFact.

Fig. 2.2.41

 

  • Now this is final view of our Object Page. We have Related Apps button option, we have Customer Details, Shipment Details at the content area of Object Page.

Fig. 2.2.42

 

  • Now we are fine with the Fiori Elements(List Report) Template.
  • For more information on Object Page configuration-

https://sapui5.hana.ondemand.com/#/topic/d26d3dd85f43441192e9c8b210746bf1

 

2.1.5- Extension of SAP Fiori Elements app (List Report/Object Page)

  • Various framework extension points are available for List Report and Object page.
  • Before developing an extension we must have some information about extension of Generated App- https://sapui5.hana.ondemand.com/#/topic/d9c146a4e0f049108cf8231bfca5585b.html
  • We can either use the extension wizard in the SAP Web IDE to create extensions or we can create them manually.
  • In List Report Page/Object Page, we can use SAP Web IDE to add the following extensions:

List Report- In the List Report Page we can extend- Filter, Action, Column

Object Page- In the Object Page we can extend- Action, Facet, Column, Header, Form.

  • Lets start Extension of the Fiori Elements app.
  • Go to SAP Web IDE -> Right Click on newly created project -> New -> Extension.
  • Here you get all supported extension those we can extend for created project. We can see error message of Analytical List Page, as we don’t have.
  • Click on List Report Extension to create a extension.

Fig. 2.2.43

 

  • Click on Next.

Fig. 2.2.44

  • We are going to add an Action on List Report Page.
  • Maintain Page and Action Label at Extension Settings as shown in Fig. 2.2.45

 

Page (Entity Set) Orders
Action Label Add

Fig. 2.2.45

  • Click on Next.

Fig. 2.2.46

  • Click on Finish.

Fig. 2.2.47

 

  • We have successfully added an Action.

Fig. 2.2.48

 

  • Now we can add our code in controller.js file. I am going to add a message box for the Add action- sap.m.MessageBox.success(“Add button clicked”);

Fig. 2.2.49

  • Choose Save and Run.

Fig. 2.2.50

  • Click on Add button which we created.

Fig. 2.2.51

  • Message box is successfully working.
  • Lets add another Extension for the List Report Page.
  • Right click on project -> New -> Extension -> List Report Extension-> Next.
  • Now we are going to add Column on List Report Page.
  • Maintain Page and Fragment Name as shown in Fig. 2.2.52

 

Page (Entity Set) Orders
Fragment Name CustomColumn

Fig. 2.2.52

  • Click on Next -> Finish.

Fig. 2.2.53

 

  • Our Column is successfully added.

 

Fig. 2.2.54

Fig. 2.2.55

  • Now we can add Filter also to follow the same process.
  • Lets extend Object Page.
  • Click on Project -> New -> Extension -> Object Page Extension -> Next.

Fig. 2.2.56

 

  • We have following (Fig. 2.2.57) extension for the Object Page. Now select Facet extension for the Object Page.

Fig. 2.2.58

 

  • Click on Next -> Finish.

Fig. 2.2.59

 

  • Choose Save and Run Facet is added at content area of the Object Page.

Fig. 2.2.60

 

3- Conclusion-

My experience with SAP Fiori Element is too good!

To develop an SAP Fiori Elements (List Report Page/Object Page) might be took extra effort initially than developing a freestyle SAP Fiori App. In the future we will be richly rewarded for this effort after we have created more apps this way.

For more information on SAP Fiori Elements- https://sapui5.hana.ondemand.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd

SAP Fiori Elements Guidelines-

https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/

SAP Community: Fiori Elements-

https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+Elements

 

I hope my blog post helps you!

 

Regards,

Ankur Bajpai

 

 

 

 

 

Assigned Tags

      36 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sudhir Lenka
      Sudhir Lenka

      Thank you so much Ankur for writing this.

      This is very informative,

      Thanks,

      Sudhir.

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Sudhir Lenka for feedback. ?

      Author's profile photo Manish Kumar
      Manish Kumar

      Nice Blog, very helpful.

       

      Thanks

      Manish

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thank you Manish Kumar !☺️

      Author's profile photo Sumit Gangadhare
      Sumit Gangadhare

      Excellent blog Ankur, I wold like to see more subsequent blogs from you so keep addition.

       

      Thank You.

      Sumit Gangadhare.

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Sumit Gangadhare for feedback. Definitely, I'll try to post my new blog soon.☺️

      Author's profile photo Sameer Ahmad
      Sameer Ahmad

      Nice Blog and very useful

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Sameer Ahmad!

      Author's profile photo mahak gupta
      mahak gupta

      Nice blog Ankur. I implemented same and working fine for me.

      Thanks,

      Mahak

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thank you mahak gupta for feedback!

      Author's profile photo Nitin Kant
      Nitin Kant

      Impressive!Thanks for this one Ankur.

      I will come back to read more blogs like this 🙂

      Nitin

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Nitin Kant. Sure, I'll try to publish.

      Author's profile photo saurabh vakil
      saurabh vakil

      Good job Ankur! Looking forward to more such blogs. All the best!

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thank you so much saurabh vakil! Sure, I’ll try in future.

      Author's profile photo Gaurav Karkara
      Gaurav Karkara

      Hi Ankur,

      Thank you very much for this blog. I could follow it step-by-step and could generate an application. Looking forward to more such blogs from you. Good job!

      Regards

      GK

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Gaurav Karkara for the feedback! I'll try my best.

      Author's profile photo Hans Raj
      Hans Raj

      Great work Ankur Bajpai , explained everything step by step.

      appreciate your effort  🙂

       

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks a lot Hans Raj!

      Author's profile photo Jean Leon
      Jean Leon

      Thanks Ankur!

      But just a little question, how can we hide the default search filter on the List Report Page? Maybe we must set a manifest option or maybe there is a specific annotation to achieve this? I tried even in the extension controller trying to get the element by Id and set visible false, but still have the filter. Any help could be great!

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Jean,

       

      In OData service we have annotation option “sap:searchable”.To disable the search function, “sap:searchable” must be set to “false” for the root entity set.

      Author's profile photo Manjunatha Devadiga
      Manjunatha Devadiga

      Nice blog Ankur. Well explained.

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Manjunatha Devadiga

      Author's profile photo Mariam Id-Manssour
      Mariam Id-Manssour

      Hi Ankur Bajpai

      Thank you for this amazing blog .

      I couldn't couldn't connect  the Fiori elements project from template  “List Report Application”  to My Odata v4 service  . How can I handle this issue ?

       

      Author's profile photo Nitin Kant
      Nitin Kant

      Hi Mariam,

      SAP is planning to release the first version of SAP Fiori Elements Floorplans for OData V4 in Q3/2020.

      You can check the following blog by Peter for more information.

      https://blogs.sap.com/2020/03/17/fiori-elements-floorplans-for-odata-v4-coming-soon/

      Thanks

      Nitin Kant

      Author's profile photo Mariam Id-Manssour
      Mariam Id-Manssour

      Hi Nitin Kant

      Thank you for your answer, well i used  v2 proxy to get the Odata v2 version of my service.

      Now I ‘m facing this issue with data connection between the backend OData service ( which is already created using CAP model and deployed to SCP CF ) and the Fiori app that i want to create . Here are the steps that I tried to do:

      note :

      – SAP Web IDE is connected to the same CF subaccount where I set the destination

      – The “ ParkingAppOdata “service that is shown in the drop down list is an old destination that I have already setup in my SCP trail account now I’m working in another global account on live landscape

      I will be extremely grateful if u help me to solve this issue .

      Thank you

       

       

       

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Mariam Id-Manssour

       

      As Nitin Kant suggested for OData V2 and V4, I think you get the clear picture for the same. But for this error, Can you confirm that you have successfully connected with your SAP System?

      Please have a look of my this blog, I hope this will help you in the Destination connectivity. In this blog checkout- 3. Create Destination in SAP Cloud Platform and in SAP Hana Cloud Connector to access On-premise data.

       

       

      Thanks,

      Ankur Bajpai

      Author's profile photo Mariam Id-Manssour
      Mariam Id-Manssour

      Thank you for your answer, I solved this issue by creating my Odata service destination in Neo sub account which contain the SAP Web IDE service. Before I was creating the destination in  the CF sub account which is connected to SAP web Ide by endpoint .

      Author's profile photo Mariam Id-Manssour
      Mariam Id-Manssour

      Hi Ankur Bajpai

      I tried to follow the steps in this tutorial but when i run the app ( select webapp/Component.js, and choose Run ) I always get the same empty page like is shown below 

      this is my workspace:

       

      Thank you,

      Mariam

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Mariam Id-Manssour ,

      Can you share your developer tool(F12) screenshot whenever you run your application?

       

      Thanks,

      Ankur Bajpai

      Author's profile photo Mariam Id-Manssour
      Mariam Id-Manssour

      Hi Ankur Bajpai ,

      I'm  still facing same issue , you will find below my developer tool

       

      Thanks,

      Mariam

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Please check your OData service. Here it is showing error related to an OData.

      Author's profile photo Vijay Varee
      Vijay Varee

      Hi Ankur ,

       

      Nice Blog!! Very well articulated the details around Fiori elements.

      What would be the significance of adding a new column through extension while we could do the same thing by adjusting the annotation file with a new datafield under UI.line items.

      Thanks

      Vijay

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Vijay Varee,

      Extension scenerio would be helpful for our standard app if there is any requirements to do.

       

      Thanks,

      Ankur Bajpai

      Author's profile photo krishnakumar Kumavat
      krishnakumar Kumavat

      Hi Ankur,

       

      How to deploy the fiori element apps (developed using visual studio) on cloud foundry.

       

      I am not getting any sample for mta file. appreciate any form of help.

       

      Regards

      Krishna

      Author's profile photo krishnakumar Kumavat
      krishnakumar Kumavat

      it worked, there was some issue with the mta.yaml file and menifest.json ! the generator doesn't generates the file correctly sometimes.

      Author's profile photo Shantanu Deshmukh
      Shantanu Deshmukh

      Hi Ankur,

       

      I am using OData V4 model. How to disable $batch processing in it? I tried setting groupId = $direct but still it did not work