Back Forward Harness and section forms - Adding a Layout Group

 

A layout group is a way to present information responsively that is normally shown within one control type. A layout group can be rendered as a tab control, an accordion, stacked format, or a dropdown-style menu according to screen size. A layout group can contain any number of dynamic layouts, column layouts, repeating dynamic layouts, or other layout groups.

With a layout group, what would usually appear as a tab control on a regular desktop or laptop converts to a different navigation mechanism on a mobile device, negating the need for horizontal scrolling. You can set responsive breakpoints, enabling the layout to adjust to the available space. When the user resizes to the default or custom breakpoint dimensions, tabs turn into an accordion or a menu.

NoteLayout groups are available only to user interfaces rendered in HTML5 Document Type (standards mode). Layout groups have been designed to comply fully with WCAG accessibility guidelines.

Layout group formats

There are four style formats for layout groups:

A preview of the currently selected format displays to the right. You can also preview formats by selecting Actions > Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview.

Adding a Layout group

  1. In the harness or section, click Layout group and drag and drop.
  2. On the Choose layout-group format dialog, select one of the layout group formats: Tab, Accordion, Menu, Default (last selected), or Other (for a custom layout). The layout group displays.
  3. Click to open the layout group properties panel.
  4. On the Layout group properties panel, define the instance-specific properties of the layout group:

To view and interact with examples and review configurations, select > User Interface > UI Gallery and then select Layout Group in the Layouts and Containers group. Not implemented yet.

Definitions Layout group
Related topics

Skin form — Components tab — Layouts — Layout Groups