Best practices for sections and layouts

Ensure that you build a well-structured and consistent UI by learning about best practices for using sections and 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.
Procedure
  • Keep the size of your sections balanced. Do not create too big or too small sections.
    The size of your sections should support granular but functional reuse.
    For example: A section that captures user address information contains data that fits into a reusable category. Instead of nesting multiple sections for every piece of data, the section consolidates multiple layouts. In this way, you can optimize maintenance and processing speed.
  • When the contents of one section affect the contents of another section, use action sets to refresh specific layouts instead of refreshing entire sections.
    For example: When you add a product to a shopping cart (section A), use action sets to refresh the contents of the shopping cart (section B).
    Action sets are more granular, which reduces the negative impact on performance of the excessive processing.
  • 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 slow down 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.
  • Avoid obsolete layouts, which are unsupported and code-heavy, and use more recent solutions.
    Obsolete 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