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.
Note: The UI Gallery landing page contains a working example of the Dynamic layout, which you can use as a reference or copy directly to your
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.
Dynamic layouts are DIV-based. If
your section uses a template, the template that you select controls the layouts for you.
However, if you build your UI with the full section editor, you need to configure the dynamic
layout manually. This approach provides more flexibility, but might require more experience
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
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
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
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.