SAP Fiori Element List Report Step By Step

Introduction

Fiori Element List reports is one of the standard sap Fiori floorplans which offers features like users can view a large set of items. User can search the relevant items using filters, sorting, and grouping as out of box feature of this floorplan. such reports support without or minimal code and configurations on the client-side. All you require an annotation-based OData service either via CDS view exposed with annotations or with vocabulary integrated into gateway layer while OData development.

you can explore more about the list report floor plan from here –https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/.
All Fiori Element Floorplan UI is a metadata-driven approach to Fiori development.
UI controls get generated at the client-side while sensing annotations attached to an entity type in OData metadata.

Setup cloud platform destination for OData

Let’s get started with our sap cloud platform and setup a northwind public OData service for our list report development.
once you logged into your cloud platform neo account goto connectivity- > Destinations option of the left-hand side panel.

now click on New Destination and fill all the required information as below.

Let’s Start the development on SAP WEB IDE

Now go to you sap web ide and right-click on workspace -> new -> project from template ->

Now click next and fill in the project-related basic information.

Now click next and provide data connection details which you added in the destination of sap cloud platform.

Now skip the annotation selection as the northwind v2 service by default doesn’t provide the annotation file from the backend. Go to the template customization section and select the entity type from the dropdown on which you want to create a list report app and click on the Finish button.

Now application project file is created in your workspace with all required files to run this app. select the project and click on the run button and a popup will come to select the file to run here you can select flpSandbox.html to run the app in the browser.
once your app opens in a browser it does not open directly but with a tile, you can click your project name tile and let’s open the app.

Once your app opens up it will come as below screen by default hence we have not provided any annotations from the backend so we need some UI annotation configurations to load the columns.

Now we can create UI annotation file for our project to configure the UI of the list report using the annotation modeler.

Create Annotation file ->right click on web app >> new >> Annotation file >> rename option will be there and Odata service to which it needs to bind also be there.

Now open your annotation file in annotation modeler mode by default your entity will select which you chose during project creation.

Now click on the + button on the Local Annotation node under your entity type and a popup will come for UI annotation option and here you can select LineItem annotations for the list report.

Once LineItem added you can again select the + button on LineItem Node and select the data field node.

Your DataField Node will contain a path for all the properties under your Entity Type and each time you can select the number of data fields the same way.
You can create a data field based on your column requirement of the list report column as each data field here will become a column in your List table.

Now you can save your LineItem Annotations and re-run your app. This time your LineItem data fields will be loaded as a column by default and you can click on go to load the data in List table.

For the Filter section on the list report, you can select filter fields also from entity type using- SelectionFields Annotation.

Under SelectionField annotation you can select Item.

Item will provide you all the available properties under the entity type so you can select the property provided as filterable from metadata. Now save your files and run your app again. you will see your app below.

Adding Criticality colors to the Fiori element list report data field.

Adding Criticality color to any field data of the table you can select the + button on any UI.DataField of LineItem in an annotation modeler.

Adding criticality color to ReorderLevel Data field

Now provide criticality values like Critical for orange color, Positive for the green color, Negative for red color, etc. Save and run the app again to see the changes.

Developers can select Expression Type of Criticality from EnumMember to the path and provide values from the backend property of entity set based on some backend logic dynamically colors can possible.

I have just provided the Critical value to the ReorderLevel DataField.

Adding Progress bar to the Fiori element list report data field

Adding the Progress bar to the list report requires annotation – UI.dataFieldForAnnotation. You can select this annotation as a part of UI.LineItem.

Now you require one more annotation to provide as a target to above annotation so lets add UI.DataPoint annotation under your entity type -Local Annotation.

Under UI.DataPoint annotation select – Value, TargetValue, Visualization properties.

Now provide Entity type property name in value field based on which you want to create progress bar. Here i am selecting UnitsInStock Property.

Save the annotations and run your app.

Adding selection variants to the list report.

You can add selection variants in the Fiori element list report using UI.SelectionVariant annotations under Local Annotation of the entity type.

Under Selection variant annotation add Text(it will become the label of tab) and SelectOptions properties.

Under SelectOptions type provide Ranges and SelectionRangeType and provide String value of variant filter as it will become filter parameter value in batch read operations like $filter=CategoryId eq ‘1’.
Now add some Qualifier to UI.SelectionVariant.

After adding annotation add some settings for list report in the manifest file of your app under pages->ListReport section like mention below.

Property – “quickVariantSelectionX” will be required which provide variants starting from 0 indexing and a key will be your qualifier added for SelectionVariant.

Save the files and run the app.

Category tab added on List report.

Changing List report from default single select to multi-select.

By default List report app behave as a single-row select type if you want to make list report to multi-select you can add a property of list report in the manifest as “multi-select”:true.

App Changed to multi-row select

Bold highlight any data field of list report

You can highlight any data field with bold text using Common.SemanticKey annotation under Local Annotation node.

Add Item under SemanticKey.

Provide any Entity type property for Item PropertyPath and run the app. For this Report, I have highlighted ProductName.

Product Name column with bold text.

Our Basic app is ready to deliver with some more features using annotations only.

Conclusion

Thanks for reading.
I hope this blog helps you to understand the use of various UI annotations to develop an awesome Fiori application without code.

Although the NEO environment support by SAP has been deprecated from TRIAL accounts the development environment is still available for purchase licenses for web ide.

In the Above blog, I just wanted to demonstrate the use of UI annotation to develop a List report without any JS code or SAP UI5 API.

I will keep updating this blog post with more UI annotation use cases.