Technical Articles
Fiori Element’s List Report : Dynamically control table display based on the device type
I have come across one interesting scenario where we need to control the Fiori Elements List Report display behavior dynamically based on the Device type used.
Fiori Element’s List Report can be displayed using different table types: Such as Grid Table and Responsive table.
Grid table is more suitable for Desktop based display and Responsive is more suitable for Phone / Mobile.
This can be achieved without any additional extension used in the List Report.
Business Scenario
Many time Business wants to display more column in Grid layout when report is accessed via GRID Layout and responsive when accessed via Mobile / Tablets.
Technical Explanation
Please refer link for Basic Fiori Elements based List Report development.
Detailed Technical Explanation
Understand the Default behavior ( Responsive) and GRID Layout:
Before explaining the dynamic behavior, let us understand both layout in a nutshell.
- Generated List Report based on the Core Data Service and UI annotation and generate the List Report. By default, it will show the Responsive Table.
- Now adjust the table type as GRID in manifest.json if it is working with default behavior.
Now add the Dynamic Behavior – Based on the Device type
- Adjust the component.js as below.
- Adjust the manifest.json to support dynamic behavior based on the device selection
Demo
Open the App in the Laptop/ Desktop and it will display the app in GRID view.
Open the App in Responsive device ( Mobile / Tablets ) and will display in Responsive.
Disclaimer : I have used North wind sample service with Mock data and Entity Set Order and Trial Web IDE for developing demo scenario.
Nice one Mohit Bansal . This is very similar to expression binding.
Thanks Sumit
Hi Mohit,
thank you so much !
I thought we can do that but never try, super interesting.
Do you think is only with a particular version of SAPUI5 ?
This is helpful information.
Thanks Mohit sir
Can do the same Control/switch by a "toggle Button" ? Grid Table : on/off
Thanks