Page History

...

Steps

Screens (Click to view)

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)
Click on "Create new form" and fill up the Form Details as follows (see 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.
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):
1. ID : entries
2. Form: Expense Claim Entry
3. 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)

^{Figure 1}

^{Figure 2}

^{Figure 3}

^{Figure 4}

^{Figure 5}

...

Name

Description

Screens (Click to view)

ID

Element ID. (By declaring as "entries", a corresponding database table column "c_entries" will be created)

Label

Element Label to be displayed to the end-user.

Form

Target form for record editing.

Columns

The columns defined here must be correspondent to the Form chosen above.

Name

Description

Value

Field ID of the target form.

Info

icon	false
title	Example

In "Expense Claim Entry" form, there are Form Elements with the ID "date", "category", "purpose", and "formattedAmount"

Label

Column Label.

Format Type

If you would like to format the returned value, you may make use of the format type.

Available Format Types

Width

Column width in characters.

Code Block

title	Sample

200px

Readonly

Determines if the column is editable.

...

Space shortcuts