Layout Groups

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, a stacked format, or a drop-down menu according to screen size. A layout group can contain any number of dynamic layouts, column layouts, repeating dynamic layouts, or other layout groups.

On the Components tab of the Skin form, you can set the 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.

Layout 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

Select one of four style formats for layout groups:

• Tab – In tab mode, each pane is displayed in a separate tab. When several tabs are needed, the tabs are displayed in a single row and you can scroll horizontally with the left and right arrows. Click the down arrow to view all the open tabs and switch to a tab directly.
• Accordion – Panes are selectable by dividers.
• Stacked – Panes are selectable by a stacked format.
• Menu – Panes are selectable by a menu.

A preview of the currently selected format is displayed 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, or Skin Preview.

Layout groups facilitate authoring options in App Studio

If you create a region from a layout group for a design template, run-time authors using App Studio can add, re-order, or remove content for the layout group, based on the list of available content. They can also rename tabs and modify how the layout group is rendered by switching between tabbed, accordion, menu, or stacked.

Swipeable content on a touch device

With a layout group, what would typically be displayed as a tab control on a regular desktop or laptop converts to a different navigation mechanism on a touch 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 are turned into an accordion or a menu format.

On a touch device that supports swiping, the user can swipe to navigate across available content in tabbed or menu-style layout groups. Select the Enable swipe action check box below the Display header and title check box. (The swipe action setting is enabled by default.) With this setting, visible indicators are displayed on the left or right when additional content is available to view. These swipe indicators are displayed when a user presses or taps the device and are hidden when the user lifts ("taps up") from the screen or moves to another area.

Customized swipe indicators

You can use customized Cascading Style Sheet (CSS) settings to change the following behaviors of swipe indicators:

• Fade-in duration – Tap-down transition can be adjusted.
• Fade-out transition duration – Tap-up transition can be adjusted.
• Show new indicators on every tap – By default, if a user rapidly taps the screen, the swipe indicators are displayed just once and then fade out. You can, however, show new indicators each time the user taps or quickly swipes through group items.

While there are no options to configure the swipe indicators in the Skin rule form, you can override the pzBaseCore classes to adjust indicator styling. The preferred approach is to add an additional style sheet to the skin rule form and define the styling there. For example, to override the default swipe indicators with an image called psMyCustomRightSwipeIndicator.png in the library webwb, you would use the following code:

border: none;

opacity: 1;

}

.left-swipe-indicator {

border-radius:0;

background-image:url(webwb/pzMyCustomLeftIndicator.png);

}

.right-swipe-indicator {

border-radius:0;

background-image:url(webwb/pzMyCustomRightIndicator.png);

}

UI Gallery

The UI Gallery landing page contains a working example of this element. For more information, see UI Gallery landing page.