Skip to main content

Modular design in Dev Studio

Suggest edit Updated on December 13, 2021
Applicable to Theme UI-Kit applications

A well-designed interface helps users interact with your application. By applying the principles of modular design to your portals, you can create optimal work environments with greater flexibility and less effort.

Pega Platform applications use a modular UI which encourages prototyping, and design consistency. You can reuse out-of-the-box UI components, group them into structural clusters, or nest one component inside another.

For portals, the most basic structural component is the harness. Harnesses organize the structure of the user display. When you create a portal in App Studio, Pega Platform automatically creates an associated harness to contain the screen layout. If you design your portal in Dev Studio, you must manually create a harness and associate it with a portal.

The harness contains one screen layout that is divided further into sections. Each section in the screen layout defines the content of one part of a user interface, such as the navigation pane or a header. You can populate a section with properties and controls, and choose a template to organize the section in a consistent manner. Like harnesses, sections are reusable and support nesting – you can embed a section inside another section.

Sample portal with a navigation pane and a header
The the portal contains a harness that contains sections arranged in a screen
Did you find this content helpful? YesNo

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us