Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Creating a column layout

Updated on December 13, 2022
Applicable to Theme Cosmos applications

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.

Before you begin: 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)
      For example: 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.
      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.
    3. 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.
    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 checkbox, 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 checkbox, 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.
      For example: 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 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.
    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.
      For example: 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.
What to do next: 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.
  • Previous topic Modifying the presentation options of the dynamic layout
  • Next topic Modifying the presentation options of the column layout

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us