Creating a layout group

Use layout groups to modularize closely related information so that you can optimize screen area and still provide all the information that you want to make available in the application at run time.

1. Open an existing section or create a new section on the Section form.
2. On the Design tab, click Layout > Layout group and drag the element into a layout.
3. In the Choose layout-group format dialog box, in the Display type field, select one of the following formats for the layout group:
   • Accordion – Displays layouts in collapsible headers, such as Account and Transaction Details. Only one layout from the layout group is displayed at a time. Because accordions take up less horizontal space than tabs, this is the preferred format for tablets.
   • Menu – Displays layouts as options in a menu, one at a time.
   • Stacked – Displays all layouts at the same time in a list, with the layouts stacked on top of one another.
   • Tab – Displays a tab for each layout, one at a time.
   • Other – Displays the layouts according to the format that you select in the adjacent unlabeled field.
4. Click the View properties icon for the layout group.
5. On the General tab of the Layout group properties dialog box, specify the visibility for the group layout.
6. To enable users of touchscreen devices to swipe the contents of the layout group at run time, select the Enable touchscreen swipe for tabs and menus check box.
   To set the corresponding responsive breakpoints, use the skin.
7. To make tabs stretch horizontally or vertically to fit the available space at run time, select the Enable stretch for tabs check box.
8. Select the Display header and title check box, and under Container settings complete the following tasks:
   1. Specify the header name by entering text, specifying a property, or selecting a field value for the Title option.
   2. Determine how the title is styled by selecting a level in the Heading Level field.
   3. To include an icon in the header, select the Include icon with title check box and use the corresponding Icon and Icon title fields to specify the icon and its title.
   4. Set the visibility of the container by selecting one of the following Body visibility settings:
      • Always – The contents of the container are always visible.
      • Condition (expression) – The container is visible under the condition that you specify. Select a condition or click the Open condition builder icon and define a condition in the Visible When dialog box. You can define a simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can use operators to combine the expression with a when condition rule or another expression.
      • Condition (when) – The container is visible under the condition that you specify by selecting a when rule in the adjacent field. To create a when condition or to review an existing when condition, click the Open icon.
   5. Set the Header type field to one of the following settings:
      • Collapsible – Displays a horizontal bar that application users can expand or collapse.
        • To specify an expression that determines when the header expands in the application, use the corresponding Expand when option.
        • To have the header expand when the layout group is first displayed in the application, select the Expanded on load check box.
      • Bar – Displays a horizontal bar that persists.
      • Fieldset – Displays a border around the contents of the layout with a single text label, instead of a header.
9. To specify a container heading level that generates semantic markup and makes the user interface structurally understandable for assistive technology users, use the Heading Level option under Container settings for layout group items.
10. To make minor adjustments to the styling of the group layout, specify a Cascading Style Sheet (CSS) helper class on the Presentation tab:
    1. Select the Display advanced presentation options check box.
    2. For the Custom CSS class field, click the Open class editor icon.
    3. In the Helper class picker dialog box, select a standard, predefined Cascading Style Sheet (CSS) helper class. For example, to double the standard right margin for the layout, select margin-r-2x.
11. Click Submit.