- Start 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)
- Click on "Create new form" and fill up the Form Details as follows:
- Form ID: advGrdTest
- Form Name: Advanced Grid Test
- Table Name: test
- 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.
- Hover the mouse over the Advanced Grid element on the canvas and click on Edit to open up the Edit Advanced Grid properties (see Figure 2)
- Fill up the Edit 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 |
- Click on Preview to open up the Preview tab and , try clicking on each column in the Advanced Grid and notes each column's behaviour. (see Figure 4)
- When we configured the Advanced Grid (as shown in step 7), what we did was selecting a target form called Expense Claim Entry and mimic the fields we listed in the step 7c from said target form. (see Figure 5)
|
|