LinkedIn
Copied!

Table of Contents

Creating a layout group

Version:

Only available versions of this content are shown in the dropdown
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.

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.
Create or identify a section in which to nest your layout. For more information, see Creating sections.
  1. Search for and open an existing section.

  2. If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.

  3. On the Design tab, expand the Structural list, and then drag the Layout group item onto the work area.

  4. In the Choose layout-group format dialog box, select a format for the layout group.

    Group content into tabs by selecting Tab.
  5. In the Layout group header, click the View properties icon.

  6. In the Layout group properties window, on the General tab, specify the layout settings:

    1. In the Container format list, define the look of the layout.

      Apply the default formatting that you defined in the skin by setting Container format to Default. For more information, see Styling a layout.
    2. In the Visibility field, select when you want to display the Layout group.

      Make the layout visible to all users by setting Visibility to Always.
    3. In the Caption section, select what kind of text you want to use, and then complete the Settings section.

      In the Caption field, select Label, and then, in the Label field, enter Related information.
    4. In the Heading level field, select the type of the header that you want to use for the layout.

  7. 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 check box.
    • To define the inline style for the layout, in the Inline style (not for production use) field, enter CSS code.
      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.
  8. Click Submit.

  9. On the section form, click Save.

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.