Hero Backgroud Elements 2
Reading Time: 5 Min

Creating Dynamic Layout in Analytics Designer

November 1, 2019

Learning
Author
SAP SAP

In this blog I would like to introduce how to use the new layout settings and layout APIs to create dynamic layout in Analytics Designer. We don’t have the mechanism yet to automatically flow the widgets when the screen size changes, which will be introduced in future. But we can cover some of the responsive scenarios by combining dynamic layout and the scripting APIs. In an analytic application, more than just flow UI, you have the flexibility to add a widget on top of a background shape, overlapping but not flow them, and they can shrink or grow in the same proportion when the window size changes.

Let’s first look at the demo:

You need two steps to make it happen:

Step 1. Set Size and Position in Styling Panel

You can set each widget's Left, Width, Right and Top, Height, Bottom values in Pixel, Percentage and Auto (relative to its parent container, root canvas if not in a container) values on the Styling Panel's Layout Section.

Get started today with your free 30-day trial for SAP Analytics Cloud. Sign up now. 

In order to adapt to the screen real-estate at runtime on different machines or browser window, you need to set the unit to percentage (%) or auto.

Step 2. Dynamically set the size and position in Application.onResize event

Application Canvas Resize Event, the event is cached to be dispatch every 500ms when the application window resizes.

Inside the Resize event, you can use the layout API to dynamically set the size and position.

Below code sample shows how to adjust the layout to fit a small screen size like phone.

// small screen size

if (screenWidth < 500 || screenHeight < 500) {

            Panel_3.setVisible(false);

            Panel_2.getLayout().setWidth(LayoutValue.create(98, LayoutUnit.Percent));

            Panel_2.getLayout().setBottom(LayoutValue.Auto);

            Panel_2.getLayout().setHeight(LayoutValue.create(376, LayoutUnit.Pixel));

           

            Panel_3.getLayout().setBottom(LayoutValue.Auto);

            Panel_3.getLayout().setLeft(LayoutValue.create(1, LayoutUnit.Percent));

            Panel_3.getLayout().setTop(LayoutValue.create(476, LayoutUnit.Pixel));

            if (screenWidth < 500) {

                        Panel_3.getLayout().setHeight(LayoutValue.create((baseChartHeight+padding)*4 + padding*3 + Table_1.getLayout().getHeight().value, LayoutUnit.Pixel));//one column

            } else {

                        Panel_3.getLayout().setHeight(LayoutValue.create(840, LayoutUnit.Pixel));//two columns

            }

            Panel_3.setVisible(true);

}

}

With the layout APIs, you have all the flexibility to adjust the application based on the screen size, to create a responsive application in Analytics Application.

Hope this blog could give you some inspirations when you meet similar use cases.

Enjoy your exploration with Analytics Designer!

  • Sample application (based on release 2019.20): Link
  • Documentation: Link