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 we are good with the List Report Page.
• For more information on List Report configuration – https://sapui5.hana.ondemand.com/#/topic/3af1d0381ffe4a97b8e86bf484eb94e3

 

• 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