Skip to main content


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

Creating sections

Updated on November 10, 2022
Applicable to Theme Cosmos applications

Use sections to build a modular user interface that promotes reusability and design consistency. By populating your sections with content, you can create a functional chunk of interface that has a specific purpose, and can be used in many contexts.

When you create a section, you can use a design template to define layouts and regions to which you add user interface elements and controls. Each design template contains one or more regions, which are marked with names or with capital letters.

  1. In the header of Dev Studio, click CreateUser InterfaceSection.
  2. On the Create Section tab, specify the label, context, class, and ruleset for the section, and then click Create and open.
  3. On the Design tab, click the Change template icon.
  4. In the Select a template window, select the template for the new section.
  5. Optional: To customize a region, next to the region name, click the Edit region icon, and then change the default settings:
    1. In the Region properties window, select the Override default region settings check box.
    2. To include a header for the region, in the Title field, select the type of header that you want to use, and then define text and formatting for the header.
    3. To format the region, for example as a warning message, in the Container format field, select the format type and reference.
    4. To add an icon to the header, select the Include icon with title check box, and then select an icon from the catalog by clicking Show Image Viewer.
    5. To add a style to the region, such as a border, in the Styles line, select a style from the catalog by clicking the Open class editor icon.
    6. To prevent the region from being displayed when empty, select the Hide region when empty check box.
    7. Click Submit.
  6. Click Save.
  • Creating an embedded section

    Conveniently reuse modular content in your application by embedding existing sections inside other sections. For example, you can create a section that contains summarized product information and use that content in a product list, and then reuse the section for the shopping cart.

  • Using full section editor

    Use the full scope of editing capabilities that are available in Dev Studio by removing the section's design template in the full section editor. By default, all new sections use fixed templates that match common UI patterns in business applications. The full section editor provides you with the tools to build highly customizable free-form sections that use flexible layouts.

  • Adding a React table to a section

    Improve the performance of tables and benefit from a richer set of features by embedding a React table in a section.

  • Displaying the list of recent items in your application

    Add the list of recent items to your application so that users can instantly access the most frequently used or recently closed items, which improves navigation and enhances the user experience.

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