Applicable to Theme Cosmos applications
Optimize the window area by using a Dynamic layout group. In this way, you can modularize closely related information and present all the
relevant data to the application users at run time.
Dynamic layout groups
provide a flexible display of content. Because the data is sourced from a property or data
page, the output changes when the source changes, which ensures that the information on the
page is current.
For example, you want to create a tabbed interface that displays the
employees in your company, in which each tab represents a different department. For this
purpose, you create a D_Employees data page.Note: The UI
Gallery landing page contains a working example of the Dynamic 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 Dynamic layout group item onto the work area.
- In the Dynamic layout group header, click the
View properties icon.
- In the Layout group properties window, in the
Source field, specify the source of the data for the
dynamic layout group:
For example: Select Data page, and then, in the Data
page field, enter D_Employees.
- To source the data from a page list or page group, select
Property, and then, in the
List/Group field, specify the name of the
- To access data from a range of sources in a clipboard, select
Data Page and then, in the Data
Page field specify the name of the page.
- On the General tab, specify the layout settings:
- In the Display type field, select a format for
the dynamic layout group.For example: Group content into tabs by selecting
- 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
- 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 Employees by
- In the Heading level field, define the type of
the header that you want to use for the layout.
- Optional: To define additional layout behavior, select the check boxes that
represent specific personalization settings.For example: To enable the tabs to adjust their size to content, select
Enable stretch for tabs.
- 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
- 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.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.