Skip to Content
Author's profile photo DINESH KUMAR AKULA

Enhancing user interaction in Adaptive layouts by leveraging Maximize and Minimize feature using Global and local scripting

Introduction:

Adaptive Layout is a nice feature provided in SAP LUMIRA which seamlessly adapts the report to different viewing devices of varying screen sizes and this helps the Customer to experience the richness of the application on their handheld mobile devices,ipads , Laptops as well as Desktops. In this blog we will further enhance the user interaction of the Adaptive layout by custom coding the Maximize and Minimize functionality using Move component method and Global script features in LUMIRA.

To further enhance user interactivity with the chart we can use the  maximize and minimize functionality as shown below.

Figure 1

Clicking on the above icon maximizes the report selected by moving chart component to Dialog screen which is displayed in runtime as shown below

Figure2

On clicking  the close button the chart is moved back to the original Panel.

In this example we use an Adaptive Layout with 4 blocks with Large Colspan 3 as configuration for each block.

Figure 2

Each block has a chart and icon . Pressing the icon triggers the global script function which invokes the   Dialog box which is hidden as configured.

 

 

 

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Dinesh,

      One suggestion for improvement: since the main intent of this blog is to demonstrate how the Adaptive Layout user interaction can be enhanced via custom coding with local and global scripts, the educational value of this post could be enhanced by also sharing the supporting script code rather than just the screenshots of the result.

      Regards,

      Mustafa.

      Author's profile photo Ahmad Abdelrahim
      Ahmad Abdelrahim

      Hello Mustafa,

      Please check the following blog (which demonstrate how to maximize / minimize container w/ Adaptive layout) in Lumira 2.x

      https://blogs.sap.com/2019/01/24/maximize-minimize-container-in-lumira-designer-2.x-w-adaptive-layout/

      Regards,

      Ahmad