Skip to Content
Technical Articles
Author's profile photo Mohit Bansal

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.

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sumit Kumar Kundu
      Sumit Kumar Kundu

      Nice one Mohit Bansal . This is very similar to expression binding.

      Author's profile photo MOHIT BANSAL
      MOHIT BANSAL

      Thanks Sumit

      Author's profile photo Sebastiano Marchesini
      Sebastiano Marchesini

      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 ?

      Author's profile photo Hemchand sharma
      Hemchand sharma

      This is helpful information.

      Thanks Mohit sir

      Author's profile photo Massimo Olivieri
      Massimo Olivieri

      Can do the same Control/switch by a "toggle Button" ?  Grid Table : on/off

      Thanks