Introduction

Get Started

The easiest way to see how the Form Grid works is to use the existing built-in App Expenses Claims and create a new form to mimic an existing form in the app. Here are the steps:

...

1. Start the Joget Server and open the App Center.
   
   
2. Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)
   
   Image Added
   Figure 1
   
   
3. Under FORMS column, click on Expense Claim Form (see Figure 2)
   
   Image Added
   Figure 2
   
   
4. Drag and drop the  Form Grid  element on to the canvas.
   
   
5. Hover  the mouse over the

...

1. Form Grid element on the canvas and click on  Edit  to open up the Edit

...

1. Form Grid properties.
   
   
2. Fill up the Edit Form 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

   Image Added
   Figure 3
   
   

3. Click on  Preview  to open up the Preview tab, click on the plus sign on the Form Grid and it will open up a popup displaying the Form that it was referred to. (see Figure 4)
   
   Image Added
   Figure 4
   
   
4. Open up Expense Claim Entry and note the Field ID's are the same as written in the Edit Form Grid. This is how the Form Grid displays the data from said target form. (see Figure 5)
   

^{Image Removed}

^{Figure 1}

^{Image Removed}

^{Figure 2}

^{Image Removed}

^{Figure 3}

^{Image Removed}

^{Figure 4}

1. 
   Image Added

1. 
   Figure 5

...

...

Form Grid

...

Image Removed

Figure 2: Screenshot of Form Grid in sample HR Expenses Claim app - Add New Row

Image Removed

Form Grid Properties

Edit Form Grid

Image Added

200px

UI

Sorting

Image Added

Name	Description

Screen (Click to view)

Enable Sorting Feature	Determines if the ordering of rows is to be enforced.

Image Removed

The property fields "Enable Sorting Feature" and "Field ID for Sorting" stores the form grid record row sequence, meaning it records which ID sits in row 1, row 2, and so on and rearranges it back in this same ascending sequence on load binder. If you are using this property, key in a unique field ID in "Field ID for Sorting" property . This field ID must *not* be an existing field in your form which you use for your form data. Typically we use the field ID "sort" and Joget will automatically create this column in your database table (Do not use the field ID "sort" anywhere else in your form). If you need automatic sorting on another column value when loading the form grid/spreadsheet, use Load Grid Data with Custom Sorting and Filtering or JDBC Form Binder with the "ORDER BY ASC" SQL statement.

Field ID for Sorting

Field to keep the ordering sequence; must correspond with a field id (i.e. hidden field) to keep the sequence number (i.e. 0,1,2,3,4) in the target form.

Form

Image Added

Name	Description

Screen (Click to view)

Form Submit Button Label (Normal Mode)

The label of the Submit button in normal mode.

Image Removed

Form Submit Button Label (Readonly Mode)

Label

The label of the Submit button in read-only mode.
Display field as Label when readonly?	Displays the value of the element as plain text when an element is set to "Readonly".
Popup Dialog Height	Specifies the height, in characters. Code Block title Sample 200px
Popup Dialog Width	Specifies the width, in characters. Code Block title Sample 200px

Grid

Image Added

Name	Description

Screen (Click to view)

Readonly	Determines if the element is editable.

Image Removed

Disable Add Feature	Determines if a new row can be added.
Disable Delete Feature	Determines if a row can be removed.
Delete confirmation message	Confirmation message when deleting a row.
Show Row Numbering?	Shows numbering on the grid.
Paging Size	Items to be displayed per page.

Validation & Data Binder

Validation

Image Added

Data Binder

Image Added

Child Form Data Deletion Options

Image Added

Download Demo App

• APP_form_grid_file_image_upload_dx_kb.jwa
• APP_form_grid_with_jdbc_binder.jwa  -  Read JDBC Form Binder for more information.

Related Tutorials

• File Upload in Grid
• Duplicate Form Grid

Related Tutorials

...