List Grid

The List Grid is similar to a Form Grid but allows new records to be added from a List. This feature is available only in Joget's Enterprise Edition.

How does it work?

To see how the List Grid works, Follow the steps below:

1. Drag and drop a Text Field element onto the canvas in the Form Builder.
2. Open the Configure Text Field properties and set:
   • ID: name
   • Label: Name
     
3. Click Apply Change and Save the changes in the Form Builder.
   
4. Click Generate App, select Generate CRUD, and click Generate.
   
   
5. Once the App Generator is complete, launch the UI and create at least 2 data records.
6. Return to the App Composer. Click on the Create New Form button and fill in the Form Details:
   • ID: formB
   • Form Name: Form B
   • Table Name: lg_b
7. Click Save to be directed to the Form Builder.
8. Drag and drop a List Grid element onto the canvas in the Form Builder. Open the Configure List Grid properties and set:
   
   • List: List - Form A
   • Columns:
     • Field ID: name
     • Label: Name
       
9. Click Preview, click the plus sign on the List Grid, and a popup list displaying the data entered will appear. Select any number of rows and click Submit. The selected data will be displayed in the List Grid.

Configure list grid

Configuring the List Grid involves setting the label, ID, UI options, columns, sorting, and data handling properties.

Fill in the following fields:

• Label: The element label is to be displayed to the end-user.
• ID: Element ID. By declaring it as an account, a corresponding database table column c_account will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• List: List to display for selection.
• Columns: The columns defined here must correspond to the above Data List.
  • Field ID: Field ID of the target form.
    For example, the Account form sourced in the List Account Listing contains Form Elements with the id and accountName.
  • Label: Column label.
  • Editable: Yes/No
  • Format Type: Format the returned value. Default choice: Text.
    Available Format Types:
    • Text: Formats the value as text.
    • HTML: Outputs data as HTML
    • Multiple lines text: Maintains the spacing and formatting for multiple lines of text, such as TextArea.
    • Decimal: Format as a decimal. The number of decimals is expected in the Format field.
    • Date: Formats as a date. Original Date and New Date formats are expected in the Format field.
      • Original value: 5/23/2012
      • Expected value: 2012/5/23
      • Format : M/d/y|y/M/d
        
        See Java SimpleDateFormat for the date format.
    • File: Show the value as a link to the attachment. Form ID is expected in the Format field.
      
      Expected Form Def ID: Specify the Form ID that contains the actual File Upload form element.
    • Image: Show the value as a thumbnail of the attachment. Form ID is expected in the Format field.
      
      Expected Form Def ID: Specify the Form ID that contains the actual Image Upload / File Upload form element.
      
    • Options: Show the label of a multiple-choice element given the value given. Form ID is expected in the Format field.
      
      Expected Form Def ID: Specify the Form ID that contains the actual Select Box / Radio / CheckBox form element.
  • Format: Additional argument depending on the chosen Format Type.
  • Width: Column width in characters (e.g., 200px).

UI

UI settings configure the Form Grid's appearance and behavior, including sorting, layout, and interaction features.

Sorting

Sorting in Joget's Form Builder allows you to control the order of rows in a form grid. This ensures data is displayed in a specific sequence, enhancing data organization and readability.

Fill in the following fields:

• Enable Sorting Feature: Determines if the ordering of rows is to be enforced.
• Field ID for Sorting: The field to keep the ordering sequence must correspond with a field ID in the target form.

List

Fill in the following fields:

• Insert Button Label: Label for the insert button.

Form

Form properties in Joget's Form Builder allow you to configure the form's behavior and appearance, including the submit button labels and read-only settings.

Fill in the following fields:

• Form to Edit Row: The user may edit the record row by opening it in the defined form.
• Form Submit Button Label (Normal Mode): Label of the submit button in normal mode.
• Form Submit Button Label (Readonly Mode): Label the submit button in read-only mode.
• Display field as Label when readonly?: Displays the element's value as plain text when an element is set to Readonly.

Grid

The Grid element in Joget's Form Builder enables the capture of structured and related data. It supports multiple features to enhance data entry, including row numbering, pagination, validation, and popup dialog dimensions.

Fill in the following fields:

• Readonly: Determines if the element is editable.
• Disable Add Feature: Determines if a new row can be added.
• Disable Delete Feature: Determines if a row can be removed.
• Delete Confirmation Message: Confirmation message when deleting a row.
• Show Row Numbering?: Shows numbering on the grid.
• Paging Size: Items to be displayed per page.
• Popup Dialog Height: Height in characters. (e.g., 500px)
• Popup Dialog Width: Width in characters. (e.g., 90%)

Data & validation

Validation settings ensure data integrity, while data store settings manage how data is retrieved and saved.

Validation

Validation settings help ensure that the data entered in the grid meets specific criteria before saving it.

Fill in the following fields:

• Validator: Attach a Validator plugin to validate the input value. Validation occurs whenever a form is submitted except when submitted as Save as Draft.
  Available options:
  • BeanShell (Multirow)
  • Grid
• Unique Column: Column/Field ID to identify record ID.
• Min Number of Row Validation (Integer): Minimum number of rows required.
• Max Number of Row Validation (Integer): Maximum number of rows allowed.
• Error Message: Error message to be shown when row requirements are unmet.

Data store

Data store settings manage how the grid data is retrieved and saved.

Fill in the following fields:

• Load Data From: Customize the method for data retrieval to populate the multi-row form grid.
• Save Data To: Customize how the form grid row records are saved. 

By default, this option is empty. An empty Data Store means the form grid records will be saved/loaded as JSON in the parent form and database table. See the list of available Form Data Store for more options.

The Multiple Form Row is recommended to save each record into a child database table via a subform definition. The Data Store will update the foreign key parent id in each child record to point to the parent database table.

Child form data deletion options

These settings specify how to handle the deletion of associated data when a row is deleted from the grid.

Fill in the following fields:

• Delete Associated Grid Data?: Deletes inner grid data if the popup form has grid elements.

• Delete Associated Child Form Data?: Deletes child data if the popup form has child elements.

• Delete Files?: Deletes actual uploaded files if the popup form contains file upload elements.

• Abort Related Running Processes?: Aborts process instances related to the deleted row.

Bulk deletion

The Form Grid now supports bulk deletion of rows of data (temporary deletion).

Fill in the following fields:

• Selection: Users can select the records they want to delete by checking individual checkboxes or using the checkbox in the header to select all rows.
• Deletion: After selecting the rows, click the trash icon above the table to delete the selected rows.

Advanced

Fill in the following fields:

• URL Request Parameters for List: Refine the target Data List selections by defining the filter criteria.
  • Parameter: Target Data List filter parameter name.
  • Field ID: Current form element field ID.
  • Default Value: Default value for the search parameter.