Applicable to Theme Cosmos applications
Optimize the window area by using a Layout group to arrange
information into orderly segments.
For example, you want to configure a Layout group to display
related information as a series of tabs that the user can efficiently browse. You want to keep
the styles consistent with the rest of the user interface, and you want the layout to include
a label.Note: The UI Gallery landing page contains a working example of the Layout group, which you can use as a reference or copy directly to the
application. For more information, see Accessing the UI Gallery.
Before you begin: Create or identify a section in which to nest your layout. For
more information, see Creating sections.
- Search for and open an existing section.
- If the section is based on a template, in the section editor header, click
convert to full section editor, and then confirm the
- On the Design tab, expand the Structural list, and then drag the Layout group item onto the work area.
- In the Choose layout-group format dialog box, select a format for
the layout group.For example: Group content into tabs by selecting Tab.
- In the Layout group header, click the View
- In the Layout group properties window, on the
General tab, specify the layout settings:
- In the Container format list, define the look of the
layout.For example: Apply the default formatting that you defined in the skin by setting
Container format to Default. For more
information, see Styling a layout.
- In the Visibility field, select when you want to display the
Layout group.For example: Make the layout visible to all users by setting
Visibility to Always.
- In the Caption section, select what kind of text you want to
use, and then complete the Settings section.For example: In the Caption field, select
Label, and then, in the Label field,
enter Related information.
- In the Heading level field, select the type of the header
that you want to use for the layout.
- Optional: To specify custom CSS behavior, on the Presentation tab, select
the Display advanced presentation options check box, and then
define the settings by performing any number of the following actions:
- To display the layout group below other floated layout groups within the container
in which the group is hosted, select the Clear floated layouts
- To define the inline style for the layout, in the Inline style (not for
production use) field, enter CSS code.Note: Entering inline style produces
a guardrail warning. For maintainability and reuse, use a custom CSS class. For more
information, see CSS helper classes.
- To specify the styling of the layout container, in the Content CSS
class list, select a predefined class or click the Open class
editor icon to see a list of available helper classes.
- Click Submit.
- On the section form, click Save.