LinkedIn
Copied!

Table of Contents

Creating a column layout

Version:

Only available versions of this content are shown in the dropdown

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.

Create or identify a section in which to nest your layout. For more information, see Creating sections.
  1. Search for and open an existing section.

  2. If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.

  3. On the Design tab, expand the Structural list, and then drag the Columns layout onto the work area.

  4. In the Columns header, click the View properties icon.

  5. In the Column layout properties window, on the General tab, specify the layout settings:

    1. 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)
      Group content into three columns by selecting the Three Column (Sidebar - Main - Sidebar) template.
    2. In the Column format field, select how the layout arranges its contents.

      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.
    3. In the Container format list, define the look of the layout.

      Apply the default formatting that you defined in the skin by setting Container format to Default. For more information, see Styling a layout.
    4. 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.

    5. 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.

    6. 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.

    7. In the Visibility field, select when you want to display the Columns layout.

      Make the layout visible to all users by setting Visibility to Always.
    8. 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 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.
    9. 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.

    10. 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.

      In the Title field, select Text, and then enter Product information in the adjacent field.
    11. Optional:

      To enter text for a label, in the Caption radio button group, select Label, and then complete the Label settings section.

    12. Click Submit.

  6. On the section form, click Save.

Depending on your business needs, you can now further customize the look of the layout. For more information, see Modifying the presentation options of the column layout.

Related Content

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.