Grid

The Grid element in Joget's Form Builder enables the capture of structured and related data. It is particularly useful for forms that require the input of multiple related entries, such as approval comments or expense items.

How does it work?

To see how the Grid works, use the built-in App Expenses Claims. Follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Under the Form Builder column, click Expense Claim Resubmit.
   
4. Click anywhere on the Grid element on the canvas under the Approval Comment(s) section to access the Property Editor.
5. Click UI & Validation, uncheck the Readonly checkbox, and click Apply Changes.
   
6. Click Preview. 
7. Click to edit to enter values.
8. Click the Add Row link to add more rows.

Configure grid 

Configuring the Grid element involves setting up column definitions, labels, validation rules, and data sources to ensure proper data capture and user interaction.

When adding a Grid, you will see the following fields available for configuration:

• Options: Define the column names and corresponding labels. The column name is defined in the Field ID column, whereas the label is defined in the Label column.
• Field ID: Element ID. By declaring it as approval_comments, a corresponding database table column c_approval_comments will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Label: The element label is to be displayed to the end-user.

UI & validation

UI and Validation settings configure the appearance, interaction, and validation rules for the Grid element.

Fill in the following fields:

• Readonly: Determines if the element is editable.
• Validator: Attach a Validator plugin to validate the input value. Validation occurs whenever a form is submitted, except when submitted as Save as Draft.
• 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 set above are not met.

Data

Data settings manage how the grid data is saved and loaded, ensuring the data is stored correctly and can be retrieved as needed.

Fill in the following fields:

• Load Data From: By default, grid data is saved/loaded in JSON format in its defined database cell. In this example, Multiple Form Row loads data from another form.
• Save Data To: Grid data is saved/loaded in JSON format in its defined database cell By default.

Data store - multiple form row

The Multiple Form Row in Joget's Form Builder allows you to handle multiple rows of data by specifying the source form and the foreign key for records lookup. This Data store is essential for managing complex data relationships in multiple form rows.

Fill in the following fields:

• Form: Specify the form to store to or load from. This target form contains the data to be displayed or captured in the grid.
• Foreign Key: Specify the foreign key for records lookup. This key links the data in the grid to the corresponding records in the target form, ensuring data integrity and proper association.