Fiori list report application showing data in multiple tabs

Hello Friends,

In this blog, I’m going to explain How to create a Fiori List Report application having multiple tabs  from a single data source based on any condition.

Let’s consider a scenario where we need to categorize products as ‘Expensive’ or ‘Cheap’ based on its Unit Price. If Unit Price is equal to higher than 50.0000 then it would be considered as ‘Expensive’ else ‘Cheap’. To achieve this, we are using Northwind OData service as our data source and ‘Products’ as entity set. Here as a prerequisite, it is assumed that you know how to create a Fiori list report application using smart template and a destination for Nothwind OData service is already created.

Following are the steps to implement this scenario:-

Step 1. Create a  Fiori application using ‘List Report Application’ template in SAP Web IDE.

Step 2. In Data Connection step, select ‘Service URL’ tab -> Northwind destination system and its relative URL – /V2/Northwind/Northwind.svc. In next step select ‘Products’ as OData  Collection and finish project creation.

Now run the application and add required columns and filters, all the data will be shown in the list.

Step 3. To achieve the tab structured view, it will be done via annotations. Add a new folder under ‘Project -> webapp’ named annotations’ and add a annotation file under it call it annotation.

Step 4. Open annotations.xml file and add annotation for ‘SelectionVariant’. Under ‘SelectionVariant’ add annotations for ‘SelectOptions’ and underneath add ‘SelectOptionType.

\

Under PropertyName of SelectOptionType select ‘UnitPrice’ as its value.

Now we need to define a range for Unit Price to categorize as ‘Expensive’ if Unit Price is greater than or equal to 50.0000. To achieve this, add annotations ‘Ranges’ and underneath add  ‘SelectionRangeType’ and set the values in RangeType.

You can add a ‘Text’ annotation to add the tab name that you want to show in list report, let’s say it ‘Expensive’

Step 5. Give a Qualifier name to this SelectionVariant which can be used further to call this variant. Let’s name it ‘Expensive’

Step 6. Now our variant for ‘Expensive’ category is completed. Repeat above steps 4 & 5 by creating another ‘SelectionVariant’ for ‘Cheap’ category. Set its ‘SelectionRangeType’ as UnitPrice is less than 50.0000 and set it’s text as Cheap. Let’s keep qualifier name for this variant as ‘Cheap’.

Step 7. Modify manifest.json file by adding following code which specifies property “quickVariantSelectionX” having two variants which we created above ‘Expensive’ and ‘Cheap’. These variants will be displayed as tabs in the list report.

"pages": {
			"ListReport|Products": {
				"entitySet": "Products",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,
					"settings": {
						"smartVariantManagement": true,
						"quickVariantSelectionX": {
							"variants": {
								"0": {
									"key": "_tab1",
	                                "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Expensive"
								},
								"1": {
									"key": "_tab2",
	                                "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Cheap"
								}
							}
						}
					}
				},

Run the application and you can see two tabs – ‘Expensive’ and ‘Cheap’ based on Unit Price value.

So to conclude, we have successfully implemented the tab layout for a Fiori application built based on Fiori elements using annotations itself. Multiple tab layout helps business users to view the relevant data aggregated together in one shot.

Thank you!

Saurabh Mathur