Skip to main content

Table of Contents

Best practices for layouts


Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

Ensure that you build a well-structured and consistent UI by learning about best practices for using layouts as building blocks for your interface.

As a general good practice, optimize your UI by addressing guardrail warnings that the system displays when you develop your application.
  • Avoid the use of dynamic layouts for the following elements:
    • Single items, such as a single field
    • Headers
    • Empty spaces in the section

    Large numbers of dynamic layouts cause slower UI rendering.

  • Avoid indicating column width by percentage-based values in layouts. Layout columns that determine width by percentage cause truncation issues when the content wraps on some screens.
  • Optimize your layouts to remove excess markup and to make your UI more lightweight and faster. By using optimized code, you ensure that your application is ready to take full advantage of any future enhancements.
  • Use expressions for visibility conditions, especially client-side expressions, instead of when rules. Expressions can be evaluated on the server or client side, while when rules are only evaluated on the server side, which impacts processing speed. Client-side expressions react to run-time changes faster and do not require refreshing.
  • For single-column rows of data without headers, use repeating dynamic layouts. Repeating dynamic layouts generate less markup than tables.
  • For multi-column rows of data and single-column rows with headers, use optimized tables. Optimized tables generate less markup than standard tables.
  • Use wrapper activities to consolidate actions in action sets. By consolidating actions, you reduce the number of HTTP requests and free up bandwidth.
  • Optimize the number of layouts by using CSS Flexbox layouts.
  • Use basic UI elements correctly:
    • Use buttons to perform a task on the current screen, for example, submit a form or open a modal window.
    • Use links to navigate to another area, for example, a help article.
    • Use icons as decorative elements that make your UI more intuitive.
    • Use icon classes instead of images to render icons.
    • For interactive elements, use buttons in icon format instead of icons.
  • Use a single level one heading (Heading 1), and ensure that the headings of subsequent, nested layouts follow the hierarchy is ascending order (Heading 2, Heading 3, etc.).
  • Avoid deprecated layouts, which are unsupported and code-heavy, and use more recent solutions.
    Deprecated layout Recommended layout
    Tab Layout group in tab format
    Column Dynamic layout in inline middle format
    Column repeat Dynamic layout group
    Grid (if not a table) Repeating dynamic layout
    Accordion Layout group in accordion format
    Row repeat Repeating dynamic layout
    Free form/smart layout Dynamic layout
    Container (in a harness) Screen layout inside a harness

Related Content




Did you find this content helpful?

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.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us