Skip to main content


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

Creating a table layout without 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, by configuring tables with non-optimized code, you can keep your data always up-to-date with report definitions and make your table layouts adaptable to screen size changes.

Note:
  • Consider switching to optimized tables whenever possible.
  • Because of accessibility compliance, the non-optimized table now interprets the text in label controls as an ARIA label. Consequently, you can no longer pass HTML tags in directly in the text field. As an alternative, you can use custom CSS markup.
  • 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.
  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. In the Data source section, specify the source of the data for the layout:
    ChoicesActions
    Property
    1. In the Source field, select Property.
    2. In the List /Group field, enter a Page List property or a Page Group property with which you want to populate the layout.
    Report definition
    1. In the Source field, select Report Definition.
    2. In the Applies To field, enter the class of the report definition.
    3. In the Report definition field, enter the report definition rule with which you want to populate the layout.
    4. Optional: To set your table to duplicate the display of the columns from the report definition, select the Create grid dynamically checkbox.
      Note:

      The run-time display is automatically updated when the report definition changes; you do not need to update the section that contains the table.

    5. Optional: To specify a virtual report definition page that is a clipboard page of the Rule-Obj-Report-Definition type, select the Specify virtual report definition checkbox, and then define the report definition by name or by property reference.
    6. If you complete step 7.d and your report definition has parameters, in the Parameters section, perform one of the following actions:
      • To use all the existing parameters from the Parameters tab of the report definition, select the Pass current parameter page checkbox.
      • To pass only selected parameters to the report definition, enter the parameter values in the Value field.
    7. Optional: To save the report definition results in an existing page in the clipboard, instead of the default results page, select the Specify custom results page checkbox, and then specify the clipboard page by name or by property reference.
      Note:

      When you specify the clipboard page by referring a property, the system resolves the property at run time and uses the associated clipboard page.

    Data page
    1. In the Source field, select Data page.
    2. In the Data page field, enter the data page with which you want to populate the layout.
  8. In the Grid summary field, type a description of the table for accessibility purposes.
    Note: The description is not visible in the UI. The system stores the description in HTML for screen reader access.
  9. 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.
  10. In the Row visibility field, select when you want to display the table rows.
  11. In the Row refresh field, select when you want to refresh the table rows.
  12. Optional: To display a table header and footer, in the Header and footer section, select the relevant checkboxes, and then in the drop-down lists that appear, select when you want to display the table header and footer.
    Note:
    • You can use the table header and footer to include actions like Add and Delete row.
    • If you turn on pagination, the header includes controls for pagination.
  13. Optional: To split the database output into more manageable segments, in the Pagination section, perform the following tasks:
    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.
    1. In the Pagination format field, select one of the available formats.
    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.
    3. If you select a property or data page as the source of data for your table in step 7 and you want to use a custom activity that will load data from the source, select the Specify pagination activity checkbox, and then, in the Pagination activity field, define the activity.
    4. If you define a pagination activity in step 13.c, you can also manage sorting and filtering with the activity by selecting the checkboxes that appear.
  14. Click Submit.
  15. On the section form, click Save.
  • Modifying presentation options of the non-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 style your table like a spreadsheet or make the table responsive to the screen width changes.

  • Configuring master-detail settings

    Show extra information about the contents of each row by configuring the master-detail settings in your table. By enabling users to access data in a row, you help them avoid losing the current context.

  • Previous topic Adding custom actions to the table toolbar
  • Next topic Modifying presentation options of the non-optimized table layout

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.

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

Close Deprecation Notice
Contact us