...
- 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 Composer. (see Figure 1)
Figure 1 - Click on "Create new formNew Form" and fill up the Form Details as follows (see Figure 2):
- Form ID: advGrdTest
- Form Name: Advanced Grid Test
- Table Name: test
Figure 2 - Click on the Save button and you will be directed to the Form Builder.
- Drag and drop the Advanced Grid element on to the canvas.
- Click the Advanced Grid element on the canvas and open up the Configure Advanced Grid properties.
- Fill up the Edit Advanced Grid properties as follows and click on OK (see Figure 3):
- ID : entries
- Form: Expense Claim Entry
Columns :
Field ID* Label Format Type date Date Date category Category purpose Purpose amount Amount Decimal
Figure 3 - Remember to click Apply Change and Save it.
- Click on Preview to open up the Preview tab, try clicking on each column in the Advanced Grid and notes each column's behavior. (see Figure 4)
Figure 4 - Open up Expense Claim Entry and note the Field ID's are the same as written in the Edit Advanced Grid. This is how the Advanced Grid mimics the targeted fields we listed in the step 7c from said target form. (see Figure 5)
Figure 5
...
| Name | Description |
|---|---|
Load Data From | Load Data From allows you to customize the method for data retrieval to populate the advance grid in the form. |
Save Data To | Save Data To allows you to customize the method on how the advance grid row records are saved to. This option is empty by default. An empty binder means that the advance grid records will be saved/loaded as a JSON format in the parent form & database table. See the list of available Form BindersBinder. The recommended binder to use is the Multirow the Multiple Form BinderRow so that each record is saved into a child database table via a subform definition. The binder will update the foreign key "parent id" into each child record to point to the parent database table. |
...