Skin form — Components tab — Layouts — Layout Groups

  

A layout group is a way to display a set of content such as a list of financial accounts and related transactions. The layout group allows you to specify the type of navigation a user will use to navigate sets of information. For example, this could be a tab for each account, or by simply changing the type, the account list can be rendered as either a drop-down menu, accordion, tabbed, or list. Additionally, 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.

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.

Swipeable content on a touch device

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 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 turn into an accordion or a menu.

If using 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 appear on the left and/or right when additional content is available to view. These swipe indicators are shown when a user presses or taps down on the device and are hidden when the user lifts ("taps up") from the screen or moves to another area.

Customizing swipe indicators

You can use customized CSS to change the following behaviors of swipe indicators:

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 option 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:

.swipe-indicator {

background-color:transparent;

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);

}

Layout group formats

There are four style formats for layout groups:

Each layout type can be styled independently in the skin, presenting a large number of display options.

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.

Display Type: Tab, Accordion, Stacked, and Menu General options

Applies to the general styles for layout groups (rendered as a menu, accordion, or tabs).

Default text

Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin.

NoteThe Mixin field displays the name and a preview of the currently selected mixin. Click to select a different mixin from the list.

You can modify the following attributes:

  • Font — Select the font family. The font family defaults to (use overall), which is the font you specified in the Overall Font field at the top of the Mixins tab.
  • Font Size — Select the font size in pixels (px), points (pts), em (the current font size), or percentage (%).
  • Color — Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color.
  • Font Weight — Select a font weight from the list.
  • Text Decoration — Select a text decoration option from the list, if desired. For example, Underline. The blank selection indicates that no additional attributes are applied.
  • Transform Text — Select a text transformation option from the list, if desired. For example, Lowercase. The blank selection indicates that no additional attributes are applied.
  • Additional styles — Add additional styles, specific to styling the text for this element, by specifying a CSS Attribute and Value. Specify only CSS related to text styles. Click Add additional styles to define another CSS attribute-value pair. Clickto remove an additional style.
Default border

Select Use mixin to apply the skin's standard active mixin. You can then override individual border attributes. Select Specify styles to define all your own border attributes independently of the mixin.

Note The Mixin field displays the name and a preview of the currently selected mixin. Click to select a different mixin from the list.

You can modify the following border style attributes:

  • Apply to all sides — The selected border style is the same on all sides. Otherwise, you can select a different border style for each side: Top, Left, Right, Bottom.
  • Styles — You can choose from: None (no visible border), Solid, Dashed, Dotted. For mixins, you can also choose From mixin (the mixin style). You can specify width and color for solid, dashed, or dotted lines.
  • Rounded Corners — Enable for rounded corners (HTML5 only).
Default background

Select Use mixin to apply the skin's standard active mixin. Select Specify styles to define your own border attributes independently of the mixin.

You can modify the following default background attributes:

  • Type — Choose from Solid, Gradient, Image.
  • Solid — Click the check box and choose from the palette.
  • Gradient — Choose Vertical or Horizontal, Start and Stop shade, and Backup color (the color behind the gradient).
  • Image — Select Background color, Image location (using the Image Catalog), a Tiling option and position.
  • Additional Styles — As described above.
Minimum height

Specify the minimum height that the dynamic layout will display in the format you specified to ensure content is consistent when swiping on a touch device. Leave minimum height at 0 when a range is not desired.
Allow opening of multiple panes Select this check box if you want to create a multi-expand accordion that allows you to open any number of panes.
Hide header on touch devices

Choose the Menu style format to select this check box if you want to hide the menu header on a mobile device when swiping content to navigate the layouts.
Hide expand icon on touch devices

Choose the Menu style format to select this check box if you want to hide the expand icon from displaying on a mobile device when swiping content to navigate the layouts.
Enable support for responsive breakpoints

Select this check box if you want to add a responsive breakpoint to the layout group. When the screen size reaches the dimensions that you specify, the layout group format changes to the type you specify: Tab, Accordion, or Menu.

  • Breakpoint<n> — Select the format that the layout group should use when rendering at the dimensions specified for this breakpoint.
  • max-width — Specify the maximum width at which the layout group will display in the format you specified for this breakpoint.
  • unit — Specify the unit of measurement for the width of the layout: px (pixels) or em (font size).
  • min-width — Specify the minimum width at the layout group will display in the format you specified for this breakpoint. Leave min-width empty when a range is not desired.
  • unit — Specify the unit of measurement for the width of the layout: px (pixels) or em (font size).

  • Add breakpoint — Select to add another responsive breakpoint.

    Clickto remove an additional breakpoint.

Display Type: Tab, Accordion, Stacked, and Menu Styling options

Control-Specific Styling

Applies to the layout-specific styles for the layout group panel. These options apply individually to the rendering of accordions, menus, and tabs.

Height, Left Padding, Right Padding

Determines the position of the labels (tab name, accordion pane names, or menu names) in the layout group.
Collapse icon, Expand icon

Applies only to accordions. Specify an image for collapsing a pane and for expanding the pane. Choose the horizontal position: Left, Right, Center. Set a width (gap) in pixels from the left, center, or right of the panel (according to position)
Tab Panel Alignment

Applies only to tabs. Specify the alignment of tabs within the layout group: Left, Right, Center. Also specify Inner Spacing: the spacing between the tabs. Also specify a Left Offset or Right Offset to determine the space between the first tab or last tab from the left or right side of the layout group.
Image, Width, Horizontal position

Applies only to menus. Specify a menu image. Choose the horizontal position: Left, Right, Center. Set a width (gap) in pixels from the menu label (according to position)
Enable rounded corners only for first and last tabs Applies only to tabs. Restrict rounded corners to the first and last tab only.
Tab Panel Background

Applies only to tabs. Select to use the default background you specified for the layout group (in General settings) or specify a tab panel-specific background using the current mixin or by specifying styles. See Default background for a description of options.

Note This is applicable to the whole panel, not the tabs themselves.
Tab Panel Border

Applies only to tabs. Select to use the default border you specified for the layout group (in General settings) or specify a tab panel-specific border using the current mixin or by specifying styles. See Default border for a description of options.

Note This is applicable to the whole panel, not the tabs themselves.
Typography
  • Use same typography for active, inactive and hover — Select the check box to use the same font style for tabs in the active, inactive and hover state. Do not select the check box if you want to specify font styles individually for each state.

For all tab states or individually for the Active Text, Inactive Text, and Hover Text, choose from the following:

  • Use default text for this format — If using the same font specification, select whether or not to apply the default border used for General settings.
  • Use mixin or Specify styles— Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin. The font options are the same as for Default text. See Default text for a description of options.
Borders
  • Use same border for active, inactive and hover — Select the check box to use the same border style for tabs in the active, inactive and hover state. Do not select the check box if you want to or specify borders individually for each state.

For all tab states or individually for the Active Border, Inactive Border, and Hover Border, choose from the following:

  • Use default border for this format — If using the same border style, select whether or not to apply the default border used for General settings.
  • Use mixin or Specify styles — Select Use mixin to apply the skin's standard active mixin. You can then override individual border attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own border attributes independently of the mixin. See Default text for a description of options.
  • Border style — See Default border for a description of options.
Backgrounds
  • Use same background for active, inactive and hover — Select the check box to use the same background style for tabs in the active, inactive and hover state. Do not select the check box if you want to or specify backgrounds individually for each state.

For all tab states or individually for the Active Background, Inactive Background, and Hover Background, choose from the following:

  • Use default background for this format — If using the same border style, select whether or not to apply the default border used for General settings.
  • Use mixin or Specify styles — Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin. See Default text for a description of options.
  • Background style — See Default background for a description of options
Padding

Determines the position of the text in the layout group. Choose the same padding on all sides or specify the top, right, bottom, and left padding in pixels.

Content: Accordion, Stacked, Tabs, and Menu

Display-Specific Styling

Applies to the layout-specific styles for the text content inside the layout group panel. These options apply individually to the rendering of accordions, menus, and tabs.

Border
  • Use default border for this format — If using the same border style, select whether or not to apply the default border used for General settings.
  • Use mixin or Specify styles — Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin. See Default text for a description of options.
  • Border style — See Default border for a description of options.
Background
  • Use default border for this format — If using the same border style, select whether or not to apply the default border used for General settings.
  • Use mixin or Specify styles — Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin. See Default text for a description of options.
  • Type and Color — See Default text for a description of options.
  • Additional styles — See Default text for a description of options.

Creating a custom layout group style

To create a new style format:

  1. Click Add a format.
  2. In the Create a new format dialog, type the Format name using only alphanumeric characters (a-z and 0-9) and spaces. The name cannot begin with a number. The style name that you enter is converted into the name CSS class/classes.
  3. Type a Usage annotation, if desired.
  4. Click OK. The new format is populated with default values.

If you want to create a new format that is a copy of an existing format, right-click the format that you want copy and then click Clone.

Related topics

Harness and section forms — Adding a Layout Group

About Skin rulesAbout Skin rules

Open topic with navigation