Use Layout APIs

As an application designer, you can directly set a widget's size and position in a parent container in the Styling panel. In addition to that, by leveraging the layout related APIs SAP Analytics Cloud, analytics designer, you can allow application users to dynamically set a widget's size and position according to the application logic and window size.

In some special cases, API calls will be ignored as they set invalid values:

  • Changing the height of widgets, such as dropdown, filter line, input slider, and range slider, won't take effect because they are read-only.

  • Different widgets have minimal width and height size differences. Input values smaller than the minimal size won't take effect.

  • Cannot set the size and position of a canvas. You can only get a canvas' current size and position (always {top: 0px, left: 0px}) and set them to a widget.

Related Layout script APIs are as bellow:

Code Syntax
LayoutUnit.Pixel // sets the unit of the layout as Pixel
LayoutUnit.Auto // sets the unit of the layout as Auto
LayoutUnit.Percent // sets the unit of the layout as Percent
LayoutValue.create(value: number, LayoutUnit: Unit) // sets the layout value by creating a value with a certain unit

getLayout(): Layout // gets the layout of a widget
Layout.getLeft(): Unit; // Returns the left margin between the widget that you define layout for and the widget's parent container.
Layout.setLeft(value: Unit); // Sets the left margin between the widget that you define layout for and the widget's parent container.
Layout.getRight(): Unit; // Returns the right margin between the widget that you define layout for and the widget's parent container.
Layout.setRight(value: Unit); // Sets the right margin between the widget that you define layout for and the widget's parent container.
Layout.getTop(): Unit; // Returns the top margin between the widget that you define layout for and the widget's parent container.
Layout.setTop(value: Unit); // Sets the top margin between the widget that you define layout for and the widget's parent container.
Layout.getBottom(): Unit; // Returns the bottom margin between the widget that you define layout for and the widget's parent container.
Layout.setBottom(value: Unit); // Sets the bottom margin between the widget that you define layout for and the widget's parent container.
Layout.getWidth(): Unit; // Returns the width of the widget that you define layout for.
Layout.setWidth(value: Unit); // Sets the width of the widget that you define layout for.
Layout.getHeight(): Unit; // Returns the height of the widget that you define layout for.
Layout.setHeight(value: Unit); // Sets the height of the widget that you define layout for.
 
// Application Canvas Resize Event, the event is cached to be dispatch every 500ms when the application window resizes.
Application.onResize() = function() {
};

Application.getInnerHeight() // If canvas' size is fixed, it returns the height of the canvas; if dynamic, returns the height of the viewport, the visible area of the window.
Application.getInnerWidth() // If canvas' size is fixed, it returns the width of the canvas; if dynamic, returns the width of the viewport, the visible area of the window.
Example
Add a table (Table_1), a button (Button_1) and two shapes (Shape_1, Shape_2) to the canvas. Write the script for Button_1 to click the button to set table size to 600*400, and meanwhile set the top margin of Shape_1 to 60 px and the top margin of Shape_2 to 10 percent of its parent container:
Sample Code
Table_1.getLayout().setWidth(600);
Table_1.getLayout().setHeight(400);
Shape_1.getLayout().setTop(LayoutValue.create(60,LayoutUnit.Pixel));Shape_2.getLayout().setTop(LayoutValue.create(10,LayoutUnit.Percent));

If you set the canvas’ size to dynamic, after you click the button and resize your window, the top margin of Shape_1 will stay as 60 px while the top margin of Shape_2 will automatically fit to new size of the window.

Example
When the application's canvas size is dynamic, write the script for the onResize event to make the size of Table_1 automatically adjust to the size of the window whenever you resize the window.
Sample Code
var ResponsiveHeight = Application.getInnerHeight().value;
var ResponsiveWidth = Application.getInnerWidth().value;

Table_1.getLayout().setHeight(ResponsiveHeight);
Table_1.getLayout().setWidth(ResponsiveWidth);
Related Information