Working with dynamic layouts
A new set of standards-based layouts enable you to provide an optimal user experience on a desktop, tablet, and phone.
The following layouts, available to applications rendered in HTML 5 document type (standards mode) are styled entirely in the Skin rules. Since presentation, including responsive breakpoints, is defined in the skin, you can separate content from presentation, ensuring greater consistency and promoting reuse.
You can also define responsive behaviors for these layouts that adjust the layout based on screen size and/or device type.
Selecting a screen layout
Select a Harness form Adding a screen layout format to determine the overall structure of your harness.
For example, you may choose the
Header Footer Left
format, which provides
a header, a left column, a center panel, and a footer. There are multiple screen layout
formats available in the
Skin form — Components tab — Layouts — Screen layouts.
Screen layouts adjust to the available screen space and replace the deprecated panel set layout.
Building sections using dynamic layouts and column layouts
Populate your screen layout with sections. As a best practice, build sections using dynamic layouts and column layout. Add content such as properties, controls and other sections to a dynamic layout and to column layouts within a section. Set the presentation of that content using Skin form — Components tab — Layouts — Dynamic layouts specified in the skin.
The formats in the skin determine the width of the layout and the arrangement of items in the layout; for example, inline, stacked, or inline within a grid. They define placement and alignment of items and labels, including spacing between items.
Dynamic, column, and screen layout formats also specify responsive breakpoints—screen widths that trigger a change to the presentation of the content. For example, at a certain width, a layout displays as stacked rather than inline, or is hidden and is accessible via an icon.
- column layout
A Columns layout provides the ability to display main content, such as a work item, alongside supporting content, such as an attachment.
- Dynamic layouts
A Dynamic layout is a DIV-based layout that allows for highly flexible display of content.
- Skin form: column layouts
Styles set here apply to column layout formats. Column layouts provide the ability to display main content alongside supporting content. You may choose to display main content, such as a case, in the main area and supporting content in a sidebar.
- Skin form — Components tab — Layouts — Dynamic layouts
- Skin form — Components tab — Layouts — Screen layouts
Styles set here apply to screen layout formats. Screen layouts are available only to user interfaces rendered in HTML5 document type. As a best practice, update deprecated panel sets to use screen layouts.