Skip to Content
Technical Articles
Author's profile photo Saurabh Mathur

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

 

 

Assigned Tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sai Kowluri
      Sai Kowluri

      Nice Informative Blog Saurabh,

      I have tried this annotation approach a few months back. The results were fine on the WebIDE Sandbox. But, the variants/tabs were not displayed when the app was deployed.

      I tried to deploy the app multiple times but the variants would not show up. So, I gave up on this idea and chose an alternate approach.

      Cheers,

      Sai

      Author's profile photo Saurabh Mathur
      Saurabh Mathur
      Blog Post Author

      Thank you Sai!

      I recently used the same approach and deployed this successfully for a client. Not sure if you encountered any kind of error in the application at run time that you might have noticed from console log/debug mode.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli

      Your query is answered by Jocelyn Dart

      https://blogs.sap.com/2019/03/26/fiori-list-report-application-showing-data-in-multiple-tabs/comment-page-1/#comment-455264

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Nice blog! Thanks so much I have added it to the Fiori elements wiki.

      Just a reminder: Please always check your SAPUI5 ABAP Repository version vs. your SAPUI5 version to make sure the annotations you are using are supported in your version.

      Author's profile photo Saurabh Mathur
      Saurabh Mathur
      Blog Post Author

      Thank you Jocelyn!

      Agreed - Different versions on frontend and backend systems can make a difference.

      Author's profile photo Shanthi Bhaskar
      Shanthi Bhaskar

      Good blog Saurabh.

      Author's profile photo Saurabh Mathur
      Saurabh Mathur
      Blog Post Author

      Thank you very much Shanthi 🙂

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Hi Saurabh,

      Thanks for sharing detailed blog on this.

      Can you please let me know,which SAPUI5 ABAP Repository version onwards will support this feature.

      Thank you,

      Syam

      Author's profile photo Saurabh Mathur
      Saurabh Mathur
      Blog Post Author

      Thank you Syam!

       

      Refer below link for versioning and other compatibility rules. Here you can also search for '

      The SAPUI5 ABAP Repository and the ABAP Back-End Infrastructure' –

      https://sapui5.hana.ondemand.com/#/topic/91f021426f4d1014b6dd926db0e91070

       

      Hope this helps.

       

      Thanks,

      Saurabh Mathur

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Thank you!!

      Author's profile photo Susana Dimitri
      Susana Dimitri

      Thanks for sharing detailed blog on this.

      Fiori is more than just a new user interface. It is a set of cross-device applications that, among other things, allow users to start a process on their desktop and continue it on a tablet or smartphone. SAP is developing its Fiori apps on its latest user interface framework, SAPUI5.

      Author's profile photo Gurpreet Jaspal
      Gurpreet Jaspal

      Hi Saurabh,

      Thanks for sharing this blog. Can you let me know how to use different set of fields on UI for each view/tab. For eg, if I have to hide "SupplierId" in "Cheap" tab.

      Regards

      Gurpreet

       

      Author's profile photo Jinin Thomas
      Jinin Thomas

      I am also expecting something similar , trying to display data from 2 different table with 2 different tabs let me know if you got anything 

      Thank you 

      Author's profile photo Avinash Menon
      Avinash Menon

      Hi

      I have an application where data is displayed on multiple tabs . CDS views are used for the tabs

       

      Issue : When i click on Tab1 I can still see Tab2 data in Tab1 .

      Is there a way we can display only Tab1 data in Tab 1 and no data from Tab2 or Tab3 and vice versa

      Author's profile photo Sanchit Shedale
      Sanchit Shedale

      Can anybody please explain how can i put a chart inside the newly created tab

      Author's profile photo Raksha Jaiswal
      Raksha Jaiswal

      This blog is useful for one of our client requirement, it worked in my case. Thanks Saurabh

      Author's profile photo Sivaprasath Sekar
      Sivaprasath Sekar

      Hello Saurabh,

      I have a application with 6 tabs. i want to display different set of column set in the respective tabs. Before i use to hande this in SAUI5 visual editor and hide the columns. but now the options is disabled in webIde.

       

      Author's profile photo Juan Lee
      Juan Lee

      I have created a  list report that displays 4 tabs using below command.

      My intent for this List report always automatically displays 1st tab.   How can I send command with the intent to automatically  view  2, 3 or 4th tab  in URL?

      "quickVariantSelectionX": {
      							"variants": {
      								"0": {
      									"key": "_tab1",
      	                                "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Expensive"
      								},
      								"1": {
      									"key": "_tab2",
      	                                "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Cheap"
      								}
      							}