Best practices for layouts
Ensure that you build a well-structured and consistent UI by learning about best practices for using layouts as building blocks for your interface.
-
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
Previous topic Layouts Next topic Creating a dynamic layout