Skip to main content

Table grids and repeating dynamic layouts

One of the most common methods that is used to display data within an application is creating a list. With Pega Platform™, there are two ways of displaying a list of items that have a set of common fields. One way is by using a standard data table, and the other is by using Pega's Repeating dynamic layout (RDL).  

When designing for accessibility, the decision about which list type to use is critical, as standard data tables and the RDL are navigated very differently by keyboard-only and screen reader-users.

Table grids

You can use table grids to present large amounts of information in a clear and consistent format in your UI. They allow for the sorting, filtering, and grouping of data so that end users can more quickly make decisions or complete their tasks.

The following figure shows an example of a table with a column for deleting rows:

A table displaying records of some points of interest around the world

 

When using tables in a Pega application, ensure that you choose optimized tables for the most accessible experience for all users, particularly those who rely on screen readers. 

Optimized tables use the WCAG-standard grid navigation, and also provide improvements from a performance perspective to create optimal response times.

Note:  When adding a table component to a section rule in your UI, the default setting is for non-optimized tables. Non-optimized tables offer some configuration options not currently available with optimized tables, such as master-level row editing and using a report definition as a source. However, using non-optimized tables will introduce a less user-friendly experience for disabled users, as well as slower loading times.

 

Best Practices

  • Optimized table grids should be used for displaying read-only data. Tables should not be used for layout or for including form input fields.  
  • Pagination should be enabled for tables with large amounts of data.
  • For any actions configured on table rows, ensure that you configure an equivalent method using the keyboard.
    • Alternatively, configure another column with an actionable item to achieve the same action. For example, a link or a button to delete a row (as in the previous figure).
  • Provide clear and concise column header labels for each column in your table.
  • Avoid placing multiple actionable form components in the table cells, to minimize confusion and clutter.
  • Include a summary and set the table as responsive with 100% width.
  • Understand your application and user needs when deciding which table type is best for your needs. Using optimized tables is generally recommended.

Configuring table grids

The following figure highlights the configuration setting that you select to use optimized table code:

    A table configuration modal dialog with the optimize code checkbox checked

    Repeating dynamic layouts

    A repeating dynamic layout (RDL) is a container format used to organize and display a list of different items while maintaining a consistent template. RDLs can display an unlimited number of records while maintaining a consistent format for each item in the list. They are typically used for long lists of data that are not best suited to being displayed in a tabular format. RDLs should be used when form fields are required.

    The following figure demonstrates an RDL displaying content within the same template:

    Pulse messages displayed in a list of messages with the same elements and format

    While the RDL itself is not a visible component in the UI, there is an important configuration option that changes how users navigate RDL items by using the keyboard. This option is the Use form navigation (by tab) checkbox.

    The following figure shows the checkbox on the General tab of an RDL configuration window:

    The "use form navigation (by tab)" configuration option for an RDL

    When you clear the Use form navigation (by tab) checkbox, users who navigate with the keyboard can move between items within an RDL list using the Arrow keys. This is the standard WCAG grid cell method of navigation with Arrow keys. Users can then press Enter on an item in the list to navigate between, and interact with, that item. This method is best suited to users when working through long lists of items, because it removes the need to individually tab through each interactive element. If your RDL is structured to visually look like a table, this can also be a more contextual means of navigation for your users.

    When you select the Use form navigation (by tab) checkbox, instead of navigating on a row-by-row basis by using the Arrow keys, the RDL uses Tab navigation so that users can navigate through every interactive element within each item in the list. Tab navigation can be useful for lists that are not too extensive, and when each item has a minimum number of interactive fields. It is also a more intuitive navigation route for most users, especially when typical form components are included in each item in the list. 

    Recommended RDL navigation method under given conditions
    Arrow Key navigation Tab Key navigation
    List items > 10 List items < 10
    Designed visually as grid Designed visually as form or card
    Components per list item > 3 Components per list item < 4

    Best Practices

    • Use RDLs when input form fields are required.
    • Determine which navigation pattern is best suited to your application's RDLs by understanding your user and app requirements.
    • Use pagination for extensive lists, to reduce screen clutter and excessive navigation.
    • Avoid using 'drag to re-order' operations, as there is no accessible alternative for keyboard users.

     

    For further information on the differences in navigation with RDLs, see the Accessible navigation patterns with RDLs .

     

    Additional Resources:

    Pega Academy modules with additional guidance:

    Related W3C Web Content Accessibility Guidelines:

     

    Check your knowledge with the following interaction:


    This Topic is available in the following Module:

    If you are having problems with your training, please review the Pega Academy Support FAQs.

    Did you find this content helpful?

    Want to help us improve this content?

    We'd prefer it if you saw us at our best.

    Pega Academy 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