In the previous blog in this series, we learned about Container Widgets. In this blog, let us learn about building a Responsive Layout in Analytics Designer.

* * *

Widget Layout Properties

All widgets have Layout properties in Styling panel. You are allowed to change the width, height and margins. The Layout Unit can be of three types – Pixel, Percentage and Auto. You can specify a value in a pixel which is the most common and smallest unit of any digital display. When you specify the value in percentage, then the pixels are calculated based on the available viewport size. The viewport is the display area that is available in a browser to display your web page.

When you specify two layout properties (in pixel or percentage), the third property is set to Auto by default. For example, when you set width and left margin for a widget, then the left-over property, the right margin will be calculated automatically.

Please note that you can only enter a natural number as the value for pixel (with no decimals). For percentage, any positive integer less than 100 can be entered with two decimals. Also, the summary percentage of opposite margins should be less than 100%. i.e. if Top Margin is 30%, then the Bottom Margin should be less than 70% (or any other value specified in pixels).

Dynamic Width and Height

In order to create a widget that is responsive to the screen size, you need to set the width or height of the widget to be dynamic. One way is to specify all four margins in either pixel or percentage. Another way is to use the percentage option for width or height property. Percentage always changes the widget size according to the available viewport size. If you set the width to be 50% and your viewport size is 1366 px in width, then the width is calculated as 683 px. Also, when the viewport size changes to 1024 px, the width is automatically calculated to be 512 px.

Please note that at any two layout properties will always be set to Auto.

Changing Layout using Script

Often when you are designing a responsive layout, you may need to adjust the layout dynamically using scripting. To adjust the layout in scripting, as a first step, you need to get the layout object of the widget using the getLayout function. Then you can add functions like setWdith, setTop to the layout object for dynamically changing the layout. These functions only have one argument i.e. Layout Value. Layout Value should be created using the function LayoutValue.create() which has two arguments – value and unit. Value can be any number while the unit can be either pixel (LayoutUnit.Pixel) or percentage (LayoutUnit.Percent). When you want to set a layout property as Auto, then value and unit should be mentioned as LayoutValue.Auto.value and LayoutUnit.Auto respectively.

Designing a Layout for Multiple Screen Sizes

When you design a layout for multiple screen sizes, there are chances that you may need to move the widgets one below the other so that the widget or the visualization is visible in a desired or minimum size. To do that, you can use the onResize event of the main canvas. To find the available size, use the functions Application.getInnerHeight and Application.getInnerWidth. They return the viewport size if the main canvas size set to be dynamic or the fixed width and height if the main canvas size is set to be fixed. In Styling panel, you have the option to fit the content to the device size. The device preview option can be enabled to preview the application at various predefined viewport sizes.

Consider the following example, where you have two charts and a text box within a panel widget. The height of the panel is fixed at 500 px. The charts and the text widget have relative positions to the panel widget so that the charts and text box resize accordingly.

Now if the above layout is viewed in devices with a smaller width, then the width of the charts will be too small, and the end-users will not be able to interpret information properly. In this case, you need to use the onResize event and move the second chart to the bottom of the first chart. While doing it, the height of the panel should be increased to avoid vertical scroll bars. The following script in the onResize event checks whether the width is less than 1024px and then changes the layout of the panel and the widgets within the panel.

The script is executed whenever there is a change in browser size and the widgets are realigned according to the layout properties mentioned in the onResize script event.

***

In the next blog, we will discuss the Timer Widget and exporting the Analytic Application to PDF.

Click here to evaluate if SAP Analytics Cloud is right for you. To know about the Analytic Applications of SAP Analytics Cloud, please check out our blog series here.