Creating list view tables with customizable columns

As an application developer, create list view tables that application users can customize in the following ways:

• Resize
• Set width
• Rearrange
• Change visibility

To create list tables with customizable columns

1. In Developer Studio, create a new form.
   AR System Navigator > All Objects > Forms > New Regular Form
   
2. Create a progressive view.
   1. Select Form > Create New View.
      The Create New View dialog box is displayed.
   2. 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.
   For 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 fields from the remote form.
    
    For example, fields related to users are added from the remote form to the table columns.
11. Set the default column widths.
    1. Select the column in the 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. 
       Success

       Best practice
       Avoid setting Pixel and Percentage for different columns of the same table.

12. (Optional) With the table selected, perform the following steps:
    1.  To the Custom CSS style property value, append the string scrollable.
       This makes the table scrollable when the height property is set, and the table exceeds that height.
    2. Set a value for the Size of Chunk property to display a limited number of rows.
       This helps you manage the table size when there are a large number of records.
    3. Set the Toolbar Visibility property to True.
       This enables the column visibility and reset options.
13. Save the form.

To validate the list view tables in Progressive Web Applications

1. In a browser, log in to PWA:
   (On-premise) 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-premise) 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 topic

   Field properties

   Process commands

   Creating active links​​​​

Related topics