Organize data in your UI with a column layout, which displays primary content, such as a work item, alongside related supporting content, such as an attachment. When you structure your content with a column layout, you enhance the readability and visual appeal of your application.
For example, you can configure a product page that displays search filters in the left sidebar, a product description in the main window, and price and purchase details in the right sidebar.
Search for and open an existing section.
If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.
On the Design tab, expand the Structural list, and then drag the Columns layout onto the work area.
In the Columns header, click the View properties icon.
In the Column layout properties window, on the General tab, specify the layout settings:
In the Column template list, select a template for the column layout.The position of the sidebar column in relation to the main column determines the layout type and its behavior. The following configurations are available:
- Two-Column (Sidebar-Main)
- Two-Column (Main-Sidebar)
- Three-Column (Sidebar-Main-Sidebar)
For example: Group content into three columns by selecting the Three Column (Sidebar - Main - Sidebar) template.
In the Column format field, select how the layout arranges its contents.
For example: Apply the default formatting that you defined in the skin by selecting Three Column (Sidebar - Main - Sidebar) format.The available column formats are dependent on the column template that you selected.
In the Container format list, define the look of the layout.
For example: Apply the default formatting that you defined in the skin by setting Container format to Default. For more information, see Styling a layout.
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.For more information, see Defining conditions in the condition builder.
If you defined the refresh condition in step 5.d , you can specify a pre-activity by selecting the Run activity check box, and then clicking the Gear icon to define a pre-activity in the Activity Record Configuration window.
If you defined the refresh condition in step 5.d, you can specify a data transform by selecting the Run Data Transform check box, and then clicking the Gear icon to define a data transform in the Data Transform Record Configuration window.
For more information, see Data transforms.
In the Visibility field, select when you want to display the Columns layout.
For example: Make the layout visible to all users by setting Visibility to Always.
To optimize the display of the content when the sidebar is not populated with data, perform the following actions:
- For the Two Column (Sidebar - Main) template, select the Hide left sidebar when nothing is visible check box.
- For the Two Column (Main - Sidebar) template, select the Hide right sidebar when nothing is visible check box.
- For the Three Column (Sidebar - Main - Sidebar) template, select either of the check boxes.
To prevent the layout from loading its content on initialization of the page, select Defer load contents, and then define the pre-loading activity in the Specify a pre-loading activity field.
To enter text in the header or a subheader, in the Caption radio button group, select Header, and then complete the Container settings section.
For example: In the Title field, select Text, and then enter Product information in the adjacent field.
To enter text for a label, in the Caption radio button group, select Label, and then complete the Label settings section.
On the section form, click Save.
- Modifying the presentation options of the column layout
Customize the styling and behavior of the column layout in your user interface to build a responsive application that meets your business needs.