Using Flow Panel Manager to Design Responsive Layout (Beta)

Note

Flow panel manager (not including individual flow 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 panel manager and flow panel widget are containers that provide responsive layout to automatically adapt to screen size. For example, in a flow 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 panel or flow panel manager widget. For a flow panel widget, breakpoints define how certain widget’s width and height will be adjusted on each breakpoint. For a flow panel manager widget, breakpoints define how each lane's width and height will be adjusted on each breakpoint.

Lanes in a flow panel manager widget are similar to flow panel widgets, 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 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 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 panel.

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