Harness and section forms - Adding a Dynamic layout

Harness and section forms — Adding a Dynamic layout

Note: This topic is applicable only to user interfaces rendered in HTML 5 document type (standards mode). See PDN article Upgrading an application to render in HTML5 document type.

> About Dynamic layouts

A dynamic layout is a DIV-based layout that allows for highly flexible display of content.

Dynamic layouts separate content from presentation:

You add content, such as properties, controls, dynamic containers, and other sections, to a dynamic layout within a section.
You set the presentation of that content using dynamic layout formats specified in the skin. The formats set in the skin determine item and label placement, alignment, and spacing within the layout. They also define the responsive behavior of the layout. You can set responsive breakpoints for dynamic layouts, enabling the layout and its fields to adjust to the available space.
A number of dynamic layout style formats are available in the skin, including: Default , Stacked , Inline , Inline grid double , and Inline grid triple . You can modify and create additional formats. Changing the format in the skin automatically affects all sections using that format.

Dynamic layouts can be nested within other dynamic layouts.

As a best practice, use dynamic layouts when developing UI for applications rendered in HTML5 document type (standards mode).

> Adding a Dynamic layout

In the harness or section, click the Layout control group and select the Layout control.
On the Set layout type dialog, select Dynamic Layout . The Dynamic layout displays.
Click the Gear icon to open the Dynamic layout properties panel.
On the Dynamic layout properties panel, define the dynamic layout using the following tabs:

The UI Gallery landing page contains a working example of this element. To display the gallery, click Designer Studio > User Interface > Gallery > UI elements.

For more information, see PDN article Using layouts to structure content in sections.