Creating a column layout
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
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
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.
- Optional: 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 checkbox, 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 checkbox, and then clicking the Gear
icon to define a data transform in the Data Transform Record
For more information, see Data transforms.
- In the Visibility field, select when you want to display the
For example: Make the layout visible to all users by setting Visibility to Always.
- Optional: 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 checkbox.
- For the Two Column (Main - Sidebar) template, select the Hide right sidebar when nothing is visible checkbox.
- For the Three Column (Sidebar - Main - Sidebar) template, select either of the checkboxes.
- Optional: 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.
- Optional: 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.
- Optional: To enter text for a label, in the Caption radio button group, select Label, and then complete the Label settings section.
- Click Submit.
- In the Column template list, select a template for the column layout.
- 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.
Previous topic Modifying the presentation options of the dynamic layout Next topic Modifying the presentation options of the column layout