Skip to main content


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

Creating a table layout with code optimization

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Help users access and compare data with table layouts. Use tables in your applications as a flexible basis for users to process large amounts of information. For example, tables in a price comparison application can help users efficiently identify the best offer. You can also configure table layouts to support sorting and custom presentation options.

Note:
  • Sourcing two columns from the same property can produce run-time issues in personal views. For example, if a user adds a second column sourced from the same property as an existing column in the view, the column might appear in the wrong place in the selector menu, or might not hide when toggled in the column selector.
  • The UI Gallery landing page contains a working example of a table layout, which you can use as a reference for your application. For more information, see Accessing the UI Gallery.
Sample table layout
An example of a table with stock price comparison
  1. In the navigation pane of Dev Studio, click Records.
  2. Expand the User Interface category, and then click Section.
  3. Search for and open an existing section.
  4. If the section is based on a template, in the section editor header, click convert to full section editor, and then confirm the conversion.
  5. On the Design tab, expand the Structural list, and then drag the Table layout onto the work area.
  6. In the layout header, click the View properties icon.
  7. On the General tab, in the Table preference section, select the Optimize code checkbox.
    Note: On mobile devices, or to enable table personalization at run time, use the option for improved client-side performance. The optimization feature does not support all configurations of the table layout, such as table responsiveness or sourcing data from a report definition.
  8. Optional: To enable user personalization of tables, perform the following actions:
    1. Select the Personalize table checkbox.
    2. In the Default view name field enter a name for the default view.
    3. Optional: To automatically save a personalized view, select the Save personalization automatically checkbox.
      Note: By enabling personalization of table layouts, you help users change and save their table preferences, such as visibility, the order and width of columns, and sorting and filtering settings at run time as one or more views.
  9. In the Data source section, specify the source of the data for the Table layout:
    • To source the data from a page list or page group, select Property, and then in the List/Group field specify the name of the property.
    • To access data from a range of sources on a clipboard, select Data Page, and then in the Data Page field specify the name of the page that you want to reference.
  10. In the Grid caption field, type a description of the table for accessibility purposes.
    Note:
    • You can override the .grid-caption CSS class to modify the visual presentation of the caption.
    • The grid summary attribute is no longer recommended because the HTML standard no longer supports it. Consider using the grid caption attribute instead.
  11. In the Conditions section, in the Grid visibility field, select when you want to display the table layout.
    For example: Set Grid visibility to Condition (expression), and then select IsMobile in the adjacent field.
  12. In the Row visibility field, select when you want to display the table rows.
  13. Optional: To split the database output into more manageable segments, in the Pagination section, perform the following tasks:
    1. In the Pagination format field, select the Pagination 1,2,3 option.
    2. In the Page size (number of rows) field, define the number of rows that you want to have on one page of your table.
    Note:
    • Use pagination when you need to display significant number of rows in a grid. It is convenient to show just a few rows at a time, and load extra rows as and when required.
    • Pagination improves the performance of the application.
    • The UI Gallery landing page contains a working example of the Paging element. For more information, see Accessing the UI Gallery.
  14. Optional: To enable low-code authors to modify the table from App Studio, in the Additional settings section, select the Editable in App Studio checkbox.
    For more information, see Configuring a table at run time.
  15. Click Submit.
  16. On the section form, click Save.
  • Modifying presentation options of the optimized table layout

    Define the look and behavior of a table layout in your user interface to build a responsive, intuitive, and user-friendly application that meets your business needs. For example, you can select the transparent style for your table or enable display of custom actions in the toolbar.

  • Arranging column visibility by importance

    Ensure that the most important information in a table is always displayed by specifying which columns have priority.

  • Prioritizing information in tables

    Ensure that important information is always displayed by specifying which columns have the top priority.

  • Configuring table activities

    Improve the user experience by creating optional activities that respond to changes in a Table layout. For example, if a user reorders a list of tasks to display the most important assignments first, you can use activities to propagate the changes back to the data source and save their preferred setting.

  • Configuring drag-and-drop functionality for tables

    Configure tables and optimized tables so that users can reorder individual rows to adjust the content of tables.

  • Enabling table personalization

    Improve productivity by giving users the option to save specific table configurations as reusable profiles.

  • Previous topic Operations and actions in a table layout
  • Next topic Modifying presentation options of the optimized table layout

Related articles

Design templates

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us