Versions Compared

Old Version 3

changes.mady.by.user Aadrian Zarin

Saved on

compared with

New Version 4

changes.mady.by.user Aadrian Zarin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

Advanced Grid is best described as a Grid with rich inline editing transformation.

Depending on the target field, the Advanced Grid element would mimic the original target type for accurate and richer data entry capability.

The Advanced Grid is only available on Professional and Enterprise Edition.

Get Started

The easiest way to see how the Advanced 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:

StepsScreens (Click to view)
  1. Start 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)

  3. Click on "Create new form" and fill up the Form Details as follows:
      1. Form ID: advGrdTest
      2. Form Name: Advanced Grid Test
      3. Table Name: test
  4. Click on the Save button and you will be directed to the Form Builder.

  5. Drag and drop the Advanced Grid element on to the canvas.

  6. 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)

  7. 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*LabelFormat Type
      dateDateDate
      categoryCategory
      purposePurpose
      amountAmountDecimal
  8. Click on Preview to open up the Preview tab and try clicking on each column in the Advanced Grid. (see Figure 4)

  9. 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)



Figure 1: Advanced Grid form element


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.


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.


Figure 4: Advanced Grid Properties

Advanced Grid Properties

Edit Advanced Grid

NameDescriptionScreens (Click to view)
IDElement ID. (By declaring as "entries", a corresponding database table column "c_entries" will be created)

LabelElement Label to be displayed to end user.
FormTarget form for record editing.
Columns

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

NameDescription
Value

Field ID of the target form.

Info
iconfalse
titleExample

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

LabelColumn Label.
Format Type

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

Available Format Types

  • Date - formats the field as date.
  • Decimal - formats the field as decimal.
Width

Column width in characters.

Code Block
titleSample
200px
Readonly

Determines if the column is editable.

UI

Grid

NameDescriptionScreens (Click to view)
SearchEnable search capability within the grid data itself.







Readonly

Determines if the element is editable.

Disable Add FeatureDetermines if a new row can be added.
Disable Delete Feature

Determines if a row can be removed.

Default Sorting Column Number (Start from 1)

Defines the column index to sort by default. This field accepts integers starting from 1 onwards only.

Example: If the grid has 5 columns, inputting a "4" will sort the 4th column from the left in ascending order.

Delete confirmation messageConfirmation message when deleting a row.
Show Row Numbering?Shows numbering on the grid.

Editing

NameDescriptionScreens (Click to view)
Key to save cellKeyboard key to use to determine when to save and move on to the next cell.

Edit hintEdit hint message.

Paging

NameDescriptionScreens (Click to view)
Record Per PagePaging Parameter - Record to show per Page

Paging OptionsPaging Parameter - Paging Options

Validation & Data Binder

Validation

NameDescriptionScreens (Click to view)
Validator

Attach a Validator plugin to validate the input value. Please see Form Validator.

Info
titleWhen will validation takes place?

Validation will takes place whenever form is submitted except when it is submitted as "Save as Draft".





Unique ColumnColumn/Field ID to identify record ID.

Min Number of Row Validation (Integer)

Min Number of Row Validation (Integer)

Max Number of Row Validation (Integer)

Max Number of Row Validation (Integer)

Error Message

Error message to be shown when row requirements set above is not met.

Data Binder

NameDescriptionScreens (Click to view)
Load Binder

Option by default. Grid data will be saved/loaded in JSON format in its defined database cell.

In this example, Multirow Form Binder is used to load data from other form. See list of available Form Binder .

Store Binder

Option by default. Grid data will be saved/loaded in JSON format in its defined database cell.

In this example, Multirow Form Binder is used to load data from other form. See list of available Form Binder .