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.