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.
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.
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