Creating a layout group
Use a Layout group to modularize closely related information so that you can optimize screen area and still provide all of the information that you want to make available in the application at run time.
- Search for and open an existing Section form.
- On the Design tab, from the Structural list, drag Layout group onto the work area.
-
In the Choose layout-group format dialog box, in the
Display type field, select one of the following formats for the
layout group:
- To display layouts in collapsible headers, such as Account and Transaction
Details, select Accordion.Note: 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.
- To display layouts as options in a menu, one at a time select Menu.
- To display all layouts at the same time in a list, with the layouts stacked on top of one another, select Stacked.
- To display a tab for each layout, one at a time, select Tab.
- To display the layouts in a custom format that is defined in the skin, select Other. Select the format in the adjacent field.
- To display layouts in collapsible headers, such as Account and Transaction
Details, select Accordion.
- To include elements in the group, expand the Structural list, and then drag any number of dynamic layout, column or section elements into the layout group.
- Click the Layout group, and then click the View properties icon.
-
In the Visibility field, select when you want to display the
group layout:
- Select one of the default options.
- To create your own condition, select Condition (expression)
and click the Open condition builder icon.
For more information, see Harness and Section forms — Using the Condition Builder to configure dynamic UI actions
- To specify the size of headers of items you included inside the Layout group, select an option in the Heading Level list under Container settings for layout group items.
- Click Submit.
Example: The UI Gallery landing page contains a working example of the Layout group. For more information, see UI Gallery landing page.