Harness and section forms — Adding a Column Layout

Based on dynamic layout technology, column layouts provide the ability to display main content, such as a work item, alongside supporting content, such as an attachment.

There are three types of column layouts:

• Two Column (Sidebar-Main)
• Two Column (Main-Sidebar)
• Three Column (Sidebar-Main-Sidebar)

Column layouts separate content from presentation. You can add a Column layout to a section and then add content, such as properties, controls, and other sections, to the column layout.

In the skin, you can specify the presentation using column layout formats. Changing the column layout format in the skin automatically affects all sections using that format. See Skin form — Components tab — Layouts — Column layouts.

Dynamic columns work well where you have primary and related supporting content - for example, a product description in the main window and price and sizing details in the sidebar. Column layouts are designed so that the main area stretches to take up available space, whereas the sidebars are a fixed width you set. Column layouts are responsive for different display devices, so that the sidebars can shift below the main area if you set a "responsive breakpoint".

Column layouts also have responsive behaviors.

Apply or modify the desired format for a Column layout in the Column layout properties panel.

Column layouts are available only to user interfaces rendered in HTML5 Document Type (standards mode).

Adding a Column layout

1. In the harness or section, click and select .
2. On the Set layout type dialog, select Column layout, and then select the desired column layout format, for example, Two Column (Sidebar-Main).
3. Click OK. The Column layout displays.
4. Drag a property, section, UI element, or dynamic layout into each of the columns.
5. Click in the Column layout header to open the Column layout properties panel. Complete the following:
   • General tab
   • Presentation tab

Column layout - General tab Column layout - Presentation tab Actions tab HTML5 Application Readiness Skin form — Components tab — Layouts — Column Layouts