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

1. In the harness or section, click and select .
2. On the Set layout type dialog, select Dynamic Layout. The Dynamic layout displays.
3. Click to open the Dynamic layout properties panel.
4. On the Dynamic layout properties panel, define the dynamic layout using the following tabs:
   

• General
• Presentation
• Actions

To view and interact with examples and review configurations, select Designer Studio > User Interface > UI Gallery and then select Stacked Dynamic Layout in the Layouts and Containers group.

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

	dynamic layout
	Harness and Section forms - Adding a dynamic layout HTML5 Application Readiness Dynamic layout - General tab Actions tab Skin form — Components tab — Layouts — Dynamic Layouts

Open topic with navigation