Creating a dynamic layout
Reduce UI maintenance and development efforts by using dynamic layouts, which display content flexibly while separating content and presentation. When you add UI elements to a dynamic layout, the layout's format automates the alignment of fields and labels, and saves you manual work.
For example, you want to create a footer for your application that holds general information
about your company. You want the footer to have two columns, a header, and use a custom
Footer
container style format. You also want the footer to disappear on mobile
devices. For this purpose, you create a custom IsMobile condition. You
can now use the style and the condition to create and configure a dynamic layout to build this
interface element with less effort.
- Search for and open an existing section.
- If the section is based on a template, in the header of the section editor, click convert to full section editor, and then confirm the conversion.
- On the Design tab, expand the Structural list, and then drag the Dynamic layout onto the work area.
- In the Dynamic layout header, click the View properties icon.
- In the Dynamic layout properties window, on the
General tab, specify the layout settings:
- In the Layout format list, select how the layout arranges
its contents.
For example: Group content into two columns by selecting Inline grid double. - In the Container format list, define the look of the
layout.
For example: Apply a custom format by setting Container format to Other, and then selecting Footer in the adjacent field. For more information, see Styling a layout. - Optional: To define when the layout contents are refreshed, next to the Refresh
condition field, click the Open condition builder
icon, and then build a conditional expression.For more information, see Defining conditions in the condition builder.
- In the Visibility field, select when you want to display the
Dynamic layout.
For example: Set Visibility to Condition (expression), and then select IsMobile in the adjacent field. - Optional: To prevent the layout from loading its content on initialization of the page, select Defer load contents.
- Select Display header and title, and then complete the
Container settings section.
For example: In the Title field, select Text, and then enter About the Company in the adjacent field. - Click Submit.
- In the Layout format list, select how the layout arranges
its contents.
- On the section form, click Save.
Previous topic Best practices for layouts Next topic Modifying the presentation options of the dynamic layout