Using Flow Layout Manager to Design Responsive Layout (Beta)

Note

Flow layout manager (not including individual flow layout panel widget, which has gone public) is currently only available for selected Beta customers. If you are interested in the Beta program, please contact your SAP account manager.

Please note that the following conditions apply during the Beta period:

  • Your company acknowledges that the software is a preliminary version and not subject to any productive use license agreement or any other agreement with SAP.

  • SAP has no obligation to include or remove any functionality from the software in any future version or in any SAP standard product.

Flow layout manager and flow layout panel are containers that provide responsive layout to automatically adapt to screen size. For example, in a flow layout panel, if a screen size is too small to fit two widgets in one row, then the widget on the right will flow to the next row automatically.

Configuring Responsive Rule

As an application designer, you can configure the breakpoint rules for different screen sizes in the Builder panel of a flow layout panel or flow layout manager. For a flow layout panel, breakpoints define how certain widget’s width and height will be adjusted on each breakpoint. For a flow layout manager, breakpoints define how each lane's width and height will be adjusted on each breakpoint.

Lanes in a flow layout manager are similar to lanes of a flow layout panel, which are groups you can add various widgets to.

Designing Responsive Layout

You have the flexibility to keep some content fixed to a certain position while others adapting to responsive layout, such as always placing a header on the top or a navigation panel on the right of the page.

You only need to place a flow layout panel and other widgets side by side to create any of the typical layouts of analytic applications below:

Besides this, you can nest a common panel in a flow layout panel widget to create more sophisticated layouts.

Inside each flow container, a widget's width and height (either in pixel, percentage or auto) are respected, but its position (left, right, top, bottom) will be automatically adjusted to the screen size. Layout API methods such as setLeft, setTop, setRight, setBottom won’t take effect.

To be more specific:

  • If a widget’s width is set as static, such as pixel, the widget will flow to the next row if the screen size is too small for it to fit in.

  • If a widget’s width is set to percentage (recommended for mobile), when the screen size gets smaller, the widget’ size will shrink as well by its percentage until its minimal width is reached. After that it will flow to the next row.

Noted that widgets that are set to invisible don’t take up any space inside a flow layout panel.

When working with a flow layout manager widget, you can adjust the spacing between lanes in its Styling panel.