Maximize & Minimize Container in Lumira Designer 2.x (w/ Adaptive Layout)

[former_member540339]

Hello,

 In my previous blog, I have shown how to “Maximize & Minimize Panel Container in Lumira Designer / Design Studio”.  In SAP Lumira 2.x, SAP introduced the “COMPONENETS” and “Adaptive Layout”, as you may know, you need always to set the height of BLOCK to a fixed height. I’ve been asked by colleagues: how to Maximize & Minimize Container in Lumira Designer 2.x while using Adaptive Layout.  This blog will show you the steps:

 

Background:

Adding “minimize & maximize” functionality is NOT available (out-of-the-box) in Lumira Designer; this method (enabling maximize/minimize) is a “nice trick” ones because it uses a panel property named:

.move component(component)

Also this method utilizes popup to achieve this goal.  Note that this method does NOT require creating any additional containers (or replicating components - which may have an impact on the performance).

Simply, we will move desired components from one container into another (from its original container into the a new container that is maximized)!

Note that this property “.move component(component)” is available for Panel components (but not to all component)!  Normally, Panel could be container of any other container.  So, if you want to move something from one location to another… simply, wrap in a panel container!



The following steps will show you how to add the functionality of minimize/maximize into a dashboard from scratch. If you need to replicate the functionality from this dashboard into another one, you can copy the created components/functions from an existing dashboard and past them into the new dashboard. You may need to fix the script to reference the correct container id.

The goal is to add new functionality into the tile (Panel/Container) which you can maximize and minimize (see screenshots)



 









 

Also applicable for Adaptive layout





 

Step by Step Procedure:

1. On the root of your application, create a POPUP component and configure it as follow:

 



Note that the POPUP component should be created on the root and the remaining contents (body) can come after that.  This is to prevent unexpected behavior from Lumira (some clickable buttons my not work because popup window is on the top layer - even if the popup is closed)!

 

2. Create a Panel component (as child inside the POPUP component created in step #1).

 



 

3. Create a class (in your CSS file) and assign it to the created component and set it as follow:

 

.popup_container {

       background-color: #FFFFFF;

}

 

4. Create a Panel component (as child inside the PANEL component created in step #2).

 



 

5. Create a class (in your CSS file) and assign it to the created component and set it as follow:

 

.tile_header {

       background-color: #FFFFFF;

       border-bottom: 1px solid #808080;       

       padding-left: 10px;

       padding-right: 10px;

       border-top-left-radius: 0px;

       border-top-right-radius: 0px;

}

6. Your components should look like the following:



Note that you may increase or decrease the padding as desired by configuring each component individually.  You may also choose to pick a darker color as background for the application (other than white) to create contrast!

Create your adaptive layout as required.  For this demo, I’ve created 5 tiles with various sizes using the adaptive layout.  Your requirements may be different… but the same concept can be applied on any design/layout.



 

Note that a panel is created as a child inside each block which work as container for contents of the tile.  This is important as we will use this panel container ID to move contents into it (when restoring maximized screen).

 

7. Create a Panel component (as child inside the Block component) and configure it as shown.



8. Create a class (in your CSS file) and assign it to the created component and set it as follow:

.kpi_tile {

                border-radius: 0px; 

                border: 1px solid #F1F3F4; 

                transition:0.3s; 

                border-image: url('') none; 

                display: block; 

                background-color: #FFFFFF;

}

 

9. Create a Panel component (as child inside the Panel component created in step #7 – which is used a header container for the tile) and configure it as shown.



 

10. Create a class (in your CSS file) and assign it to the created component and set it as follow:

 

.kpi_tile {

                border-radius: 0px; 

                border: 1px solid #F1F3F4; 

                transition:0.3s; 

                border-image: url('') none; 

                display: block; 

                background-color: #FFFFFF;

}

 

11. Create a Text component (as child inside the Panel component – created in step #9) to be used as a title and configure it as shown.



 

12. Create a class (in your CSS file) and assign it to the created component and set it as follow:

 

.kpi_title {

       color: rgb(108,108,108);

       font-weight: bold;

       font-family: sans-serif;

       font-size: 14px;

       white-space: nowrap;

       overflow: hidden;

       width: 100%;

       text-overflow: ellipsis;

       text-align: left;   

}

 

13. Create an Icon component (as child inside the Panel component – created in step #9) to be used as an icon to maximize the title and configure it as shown.

 



 

14. Create an Icon component (as child inside the Panel component – created in step #9) to be used as an icon to restore the title and configure it as shown.

 



 

15. Create a Chart component (as child inside the Panel component – created in step #7) and configure it as shown.

 

Note that you could have different type of component other than Chart (Ex. CrossTab, Grid w/contents… etc.)

 



16. Repeat the steps (#7 – #15) for all of your tiles/blocks.

17. Create two functions (“onMaximize” and “onRestore”)



18. In this following step, we need to capture/identify which icon/tile the user clicked on so we can maximize it.  We can achieve this by passing parameter when the user clicks on Maximized icon an call the function onMaximize().

19. For onMaximize() function, create an input parameter (ex. “panel_id”) as string then add following code:

 

if (panel_id == "1") // Tile 1

{      

       POPUP.open(); // Open the POPUP window

       POPUP_PANEL_HEADER.moveComponent(TEXT_NOTES_ORG_TITLE); // MOVE the tile header into the POPUP header container    

       POPUP_PANEL_HEADER.moveComponent(ICON_CLOSE_01); // Move the CLOSE ICON into the POPUP header container    

       POPUP_PANEL_CONTAINER.moveComponent(DONUTCHART_1); // Move the CHART into the POPUP container    

       ICON_CLOSE_01.setVisible(true); // Show the Close icon (as it's not visible by default)



}

 

Make sure that you reference the correct component IDs for your application to avoid any errors!

 



 

20. For the Maximized icon (which was created in step #13), add the following script onClick:

 

GLOBAL_SCRIPTS.onMaximize("1");  // Call the funciton onMaximize and pass the parameter "1" (for 1st tile)

 

21. To restore maximized screen, we need to capture/identify which icon/tile the user clicked on so we can restore it and put back all components to their original location before we close the popup..  We can achieve this by passing parameter when the user clicks on Restore icon an call the function onRestore().

 

22. For onRestore() function, create an input parameter (ex. “panel_id”) as string then add following code:

 

if (panel_id == "1") // Tile 1

{  

       PANEL_10.moveComponent(TEXT_NOTES_ORG_TITLE);  // Put back the tile header into its original container 

       

       PANEL_10.moveComponent(ICON_MAXIMIZE_01); // Put back the maximize icon into its original container 

       PANEL_10.moveComponent(ICON_CLOSE_01);  // Put back the close icon into its original container 

       

       PANEL_9.moveComponent(DONUTCHART_1);  // Put back the chart into its original container 

              

       ICON_CLOSE_01.setVisible(false); 

       

       POPUP.close();



}

 



 

23. For the Close icon (which was created in step #14), add the following script onClick:

 

GLOBAL_SCRIPTS.onRestore("1");  // Call the function onRestore and pass "1" (for 1st tile)

 

24. Repeat the steps for the remaining tiles/containers.  Make sure you pass unique parameter for each tile (for both: onMaximize and onRestore).

 

Now, Save your dashboard and you should be able to Maximize/Restore any desired container.

 











 

As you can see, this method will enable the developer to add "Maximize and minimize" feature into Lumira Designer 2.x containers without much coding.  Furthermore; it will reduce number of components in your application (because you are moving components from one location to another - not creating new ones)  which will be reflected in faster performance.

 

— The End —