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-
FollowRSS feedLike
12 Li kes 1,837 Vi ew 18 Comments

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
theAnnotation 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
tomanifest.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, theAnnotation
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 Gobutton, 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
addingUI.DataFieldForAnnotation we must create Annotation path
forUI.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
atsap.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
addUI.DataField.
 Fig. 2.2.40

 Lets add Facet and add subnodes UI.ReferencrFacet for the UI.Facet to show
createdUI.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
haveCustomer 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 Facetextension
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