Skip to main content

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

Best practices for layouts

Updated on December 13, 2022
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.

Note: 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 layoutRecommended layout
    TabLayout group in tab format
    ColumnDynamic layout in inline middle format
    Column repeatDynamic layout group
    Grid (if not a table)Repeating dynamic layout
    AccordionLayout group in accordion format
    Row repeatRepeating dynamic layout
    Free form/smart layoutDynamic layout
    Container (in a harness)Screen layout inside a harness

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. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us