Creating list view tables with customizable columns

As an application developer, create list view tables that give application users the flexibility to tailor the interface to their needs. These tables allow users to resize columns, set specific column widths, rearrange the column order, and change column visibility, enabling a more personalized and efficient viewing experience.

To create list tables with customizable columns

1. In Developer Studio, select AR System Navigator > All Objects > Forms > New Regular Form.
   
2. To create a progressive view, perform the following steps:
   1. Select Form > Create New View.
   2. In the Create New View dialog box, from the View Type list, select Progressive. 
      
      Developer Studio automatically creates a Section panel.
3. Drag Table - List View into the view.
4. With the table in the view selected, in the Properties tab, navigate to Attributes > Tree/Table Property. 
5. In the Value column, click the ellipsis () button.
   The Tree/Table Property dialog box opens.
6. Click the ellipsis () button adjacent to Form Name.
   The Form Selector dialog box opens.
   
7. Search for a form name.
   In this example, in the Name field, enter User.
   The forms with matching names are displayed.
8. From the search results, select the form from which you want to add data to the table.
   For example, select the User form.
   
9. In the Qualification field, add a qualification to specify the fields you want to list in the table.
   In this example, add a qualification that picks all fields that have a request ID available:
   $Request ID$ != $NULL$
10. Map the table columns to the fields on the remote form.
    
    In this example, fields related to users are added from the remote form to the table columns.
11. To set the default column widths, perform the following steps:
    1. Select the table column in the progressive view.
    2. Set the display width value in the properties at Display > Column Width.
    3. Set the Width Unit property to either Pixel or Percentage. 
12. (Optional) To make the table scrollable when it exceeds the value set in the Height property, append the string Scrollable to the Custom CSS style property value.
13. (Optional) To manage table size when there are a large number of records, set the Size of Chunk property to display a limited number of rows.
14. (Optional) To enable column visibility and reset options, set the Toolbar Visibility property to True.
15. Save the form.

To validate the list view tables in Progressive Web Applications

1. In a browser, log in to PWA:
   (On-premises) http://<midtierHostName>:<portNumber>/arsys/pwa/#/login
   (Helix) http://<helixBaseURL>/arsys/pwa/#/login
2. Change the URL to include the Progressive View form that you created in Developer Studio.

3. (On-premises) http://<midtierHostName>:<portNumber>/arsys/pwa/#/forms/<AR_Server_Name>/<formName>/
   (Helix) http://<helixBaseURL>/arsys/pwa/#/forms/<AR_Server_Name>/<formName>/
   The table is displayed with customizable columns. 

   Related topics

   Field properties

   Process commands

   Creating active links​​​​