...
Steps | Screens (Click to view) |
---|
- 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 (see Figure 2):
- 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.
- 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 |
- 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)
- 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)
| ![](/community/download/thumbnails/66814477/advgrid_step1.png?version=1&modificationDate=1571371460000&api=v2)
Figure 1
![](/community/download/thumbnails/66814477/advgrid_step2.png?version=2&modificationDate=1571371676000&api=v2)
Figure 2
![](/community/download/thumbnails/66814477/advgrid_step3.png?version=1&modificationDate=1571371437000&api=v2)
Figure 3
![](/community/download/thumbnails/66814477/advgrid_step4.png?version=1&modificationDate=1571371436000&api=v2)
Figure 4
![](/community/download/thumbnails/66814477/advgrid_step5.png?version=1&modificationDate=1571371429000&api=v2)
Figure 5 |
...
Figure 1: Advanced Grid form element
Image Removed
Figure 2: Screenshot highlighting Advanced Grid on Date Picker element
A Date Picker will show up when editing if the source field itself is a date picker element.
Image Removed
Figure 3: Screenshot highlighting Advanced Grid on Select Box element
A Select Box will show up when editing if the source field itself is a select box element.
Image Removed
Figure 4: Advanced Grid Properties
Advanced Grid Properties
Edit Advanced Grid
...