Technical Articles
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
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
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.
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
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.
Thank you Jocelyn!
Agreed - Different versions on frontend and backend systems can make a difference.
Good blog Saurabh.
Thank you very much Shanthi 🙂
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
Thank you Syam!
Refer below link for versioning and other compatibility rules. Here you can also search for '
https://sapui5.hana.ondemand.com/#/topic/91f021426f4d1014b6dd926db0e91070
Hope this helps.
Thanks,
Saurabh Mathur
Thank you!!
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.
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
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
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
Can anybody please explain how can i put a chart inside the newly created tab
This blog is useful for one of our client requirement, it worked in my case. Thanks Saurabh
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.
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?