Using Tables

Owned by Charles Evans (Unlicensed)
Jun 27, 2023
4 min read


Tables defined in FAB are very flexible. You can use a table to capture or display data.

Some of the features/capabilities are listed here:

  • The entire table can be hidden at various stages within the process flow
  • Columns within the table can be hidden
  • Cells within the row of a table can be of various control types. For example, Input, Text Searches, Buttons etc.
  • Cells within the row of a table can be a mixture of data entered or be disabled for display only
  • Cell width can be controlled (in the column header by setting a width in pixels)

Many more options are available and are determined by your particular use case and the properties set by you during the defining and manipulation of the table.

Note: If Responsive Table control is used as an input, with ability of using Tab key to set focus on the next control at the line item. Please do not using the growing mode ( properties: growing, growingThreshold) since it will cause the focus issue on the next control using Tab key.

1.      Table for capturing data

A table for capturing data is defined with the No Toolbar property set to false or left blank. This is a notable element to include in the Table property because it enables Export, +Add and Remove Icons that adds empty lines ready for data entry or removes lines. 

The Export button can be set to hidden in the definition property of the table

Click on the + Add button and a new row in the table is presented ready for data entry. 


Click on the Remove Icon (Trash Can) and all of the rows are presented with the Remove Icon alongside enabling

it to be pressed, resulting in the line being removed.

Click on the Remove Icon(Trash Can) again to remove the (X) remove icon against the fields you do not wish to delete.



2.      Table for displaying data

A table for displaying data is defined with Table property No Toolbar set to true indicating

that it is indeed true – No ToolBar is required (+ Add or Remove icons are not provided).

Note: If you need the export button to be available, the No Toolbar setting should be set to TRUE



Notice that in this example the table is paced in the FAB development tree at the same level as the Form.

This results in the table being fully left justified. When a table is included within a Form Element then it appears indented.

Also of note is that for this type of table it is recommended to have the cells defined as text elements because it is expected

that the contents are display only. Alternatively, the cells can be defined as inputs with each cell property Enabled set to false.


Here is sample where data was entered into a Comments input field and upon saving as Draft,  backend code updated the contents

of the Audit Trail table data. 




The form was opened again by the submitter and this time after comments were entered the Cancel

button was used. The backend code picked up the comments and saved them into the forms Audit Trail Table.



To achieve similar results in your form proceed as follows:


  1.  Define an input field for entering comments bind it to variable formComments.


2.  Define a table with five table column headings of Date, Time, Name, Activity and Comments.

  

3.  Define the five table cells AuditDate, AuditTime, AuditName, AuditActivity and AuditComments.


4.  Redefine the method ENHANCE_DATA_BEFORE_SAVE in the Implementation Class associated

     with your form. In this method pick up the ‘CurrentLevelAction’ field from the form data and call a

     custom built private method e.g. ADD_AUDIT_TRAIL.  Note: CurrentLevelAction is a FAB provided field, you do not

     have to define it in your FAB form.



5.  Each time this custom method is called append data to the contents of the forms Audit Trail Table.

     In your custom private method (ADD_AUDIT_TRAIL) update the form data fields of the Audit Trail Table

     with the information for Date, Time, User and Actvity. Use the comments in form variable ‘formComments’

     to update the AuditComments cell of the table and then clear out the contents of the formComments variable.