Table of Contents
Introduction
| English |
|---|
| The Grid enables one to capture structured and related data. |
Get Started
The easiest way to see how the Grid works are to use the existing built-in App Expenses Claims. Here are the steps:
...
- Start the Joget Server and open the App Center.
- Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)
Figure 1 - Under FORMS column, click on Expense Claim Resubmit (see Figure 2)
Figure 2 - Hover the mouse over the Grid element on the canvas under Approval Comment(s) section and click on Edit to open up the Edit Grid properties.
- Click on UI & Validation, uncheck the Readonly checkbox and click OK. (see Figure 3)
Figure 3 - Click on Preview to open up the Preview tab, click on Click to edit to enter values and click on Add Row link to add more rows.
Figure 1
Figure 2
Figure 3
Grid Properties
Edit Grid
| Name | Description | Screen (Click to view) |
|---|---|---|
| ID | Element ID (By declaring as "approval_comments", a corresponding database table column "c_approval_comments" will be created) Please see Form Element for more information about defining the ID and list of reserved IDs. |
|
| Label | Element Label to be displayed to the end-user. | |
| Options | Column definition and column label. The column name is defined in the value column whereas the corresponding label is defined in the label column. |
UI & Validation
| Name | Description | Screen (Click to view) | ||||
|---|---|---|---|---|---|---|
| Readonly | Determines if the element is editable. |
| ||||
| Validator | Attach a Validator plugin to validate the input value. Please see Form Validator.
| |||||
| Min Number of Row Validation (Integer) | Min Number of Row Validation (Integer) | |||||
| Max Number of Row Validation (Integer) | Max Number of Row Validation (Integer) | |||||
| Error Message | Error message to be shown when row requirements set above is not met. |
Data Binder
| Name | Description | Screen (Click to view) |
|---|---|---|
| Load Binder | Option by default. Grid data will be saved/loaded in JSON format in its defined database cell. In this example, Multirow Form Binder is used to load data from another form. |
|
| Store Binder | Option by default. Grid data will be saved/loaded in JSON format in its defined database cell. |
...
Data Binder - Multirow Form Binder
| Name | Description | Screen (Click to view)|
|---|---|---|
| Form | Form to store to or load from | |
| Foreign Key | Foreign Key for records lookup. |
