SAP

Author

Jason Yang

Jason Yang

Jason Yang is the Product Owner in the SAC Analytics Designer development team with over 10+ years of experience in Business Analytics.

Keep in touch

Subscribe for the latest news, updates, tips and more delivered right to your inbox.

Subscribe to updates

Category

Learning

Connect with us

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.

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

SAP Analytics Cloud earns a top ranking from BARC

See how SAP Analytics Cloud performed in the world’s largest survey of Business Intelligence software users.