| Panel |
|---|
| borderColor | greenpurple |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ddffcc#ddccff |
|---|
| borderStyle | solid |
|---|
| title | Definition |
|---|
| List |
New feature added in Joget Workflow v6. - Paging
- Delete Options
- Multiple Lines Format Type
|
Introduction
The List Grid is best described similar to a Form Grid, but with the capability to add new records from a Datalist instead
...
.
The Advanced Grid is only available on Professional and Enterprise Edition.
Get Started
The easiest way to see how the AJAX Subform works is to create a new app. Here are the steps:
| Steps | Screens (Click to view) |
|---|
- Start the Joget Server and open the App Center.
- Log in as admin and click on the Design New App button. (see Figure 1)
- Fill up the App Details as follows and click Save (see Figure 2):
- App ID: listgrid
- App Name: List Grid
- You will be directed to the Design App. Click on the Create New Form button and fill up the Form Details as follows (see Figure 3):
- Form ID: formA
- Form Name: Form A
- Table Name: as_a
- Click on Save and you will be directed to the Form Builder.
- Drag and drop a Text Field element on to the canvas.
- Hover the mouse over the Text Field element on the canvas and click on Edit to open up the Edit Text Field properties.
- Fill up the Edit Text Field properties as follows and click on OK (see Figure 4):
- ID: name
- Label: Name
- Click on Save on the Form Builder.
- Click on Generate App, select Generate CRUD and click OK (see Figure 5)
- Once the App Generator is complete, click on the link to launch the userview.
- Click on New button and Save at least 2 records of data (see Figure 5)
- Head back to the Design App.
- Click on the Create New Form button and fill up the Form Details as follows (see Figure 6):
- ID: formB
- Form Name: Form B
- Table Name: as_b
- Click on Save and you will be directed to the Form Builder.
- Drag and drop a List Grid element on to the canvas.
- Hover the mouse over the List Grid element on the canvas and click on Edit to open up the Edit List Grid properties.
- Fill up the Edit Select Box properties as follows and click on Next (see Figure 7):
- Label: Choose record from Form A
- Or Choose Options Binder: Default Form Options Binder
- Fill up the following details in the Edit Select Box and click OK (see Figure 7):
- ID: field1
- Form: Form A
- Label Column: name
- Drag and drop an AJAX Subform element on to the canvas.
- Hover the mouse over the AJAX Subform element on the canvas and click on Edit to open up the Edit AJAX Subform properties.
- Fill up the Edit AJAX Subform properties as follows and click on Next (see Figure 8):
- Form: Form A
- Tick the first three checkboxes and click Next (see Figure 8)
- Fill up the Edit AJAX Subform properties as follows and click on OK (see Figure 8):
- Parent Field to keep Subform ID: field1
- Click on Preview and select between the records in the Select Box to see the Subform dynamically loads the appropriate record.
|  Image Added
Figure 1 |
Image Added
Image Added
| Panel |
|---|
| borderColor | purple |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ddccff |
|---|
| borderStyle | solid |
|---|
| title | New Feature |
|---|
|
New feature added in Joget Workflow v6. - Paging
- Delete Options
- Multiple Lines Format Type
|
...
Figure 1: Screenshot highlighting List Grid in Form Builder
Modified the form in http://localhost:8080/jw/web/console/app/crm/1/form/builder/crm_contact
Image Removed
Figure 2: Screenshot highlighting adding new records using List Grid in Form
Figure 3: Screenshot highlighting new records added in List Grid in Form
Figure 4:
List Grid Properties
Edit List Grid
| Name | Description |
|---|
| ID | Element ID (By declaring as "account", a corresponding database table column "c_account" will be created) |
| Label | Element Label to be displayed to the end-user. |
| Datalist | Datalist to display for selection. |
| Columns | The columns defined here must be correspondent to the Data List chosen above. | Name | Description |
|---|
| Value | Field ID of the target form. Example: In the "Account" form sourced in the Datalist "Account Listing", there are Form Elements with the ID "id", and "accountName". | | Label | Column Label. | | Editable | Yes/No | | Format Type | If you would like to format the returned value, you may make use of the format type. Default choice: Text Available Format Types - Text - formats the value as text
- HTML - outputs data as HTML
- Multiple lines text - maintains the spacing formatting for multiple lines text, such as TextArea.
- Decimal - formats as a decimal.
|
|
Number - The number of decimals is expected in the "Format" field.
Date - formats as a date. Original Date and New Date formats are expected in the "Format" field. | Panel |
|---|
| borderColor | blue |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ddffcc |
|---|
| borderStyle | solid |
|---|
| Format: (original format)|(new format) Example of usage:
Original value: 5/23/2012
Expected value: 2012/5/23
Format : M/d/y|y/M/d Note: Please refer to Java SimpleDateFormat for date format. |
File - Show the value as a link to the attachment. Form Def ID is expected in the "Format" field. | Info |
|---|
| title | Expected Form Def ID |
|---|
| Specify the Form Def ID that contains the actual File Upload form element. |
Image - Show the value as a thumbnail of the attachment. Form Def ID is expected in the "Format" field. | Info |
|---|
| title | Expected Form Def ID |
|---|
| Specify the Form Def ID that contains the actual Image Upload / File Upload form element. |
Options - Show the label of a multiple-choice element given the value given. Form Def ID is expected in the "Format" field. | Info |
|---|
| title | Expected Form Def ID |
|---|
| Specify the Form Def ID that contains the actual Select Box / Radio / |
|
|
Check Box | | Format | Depending on your chosen Format Type, an additional argument may be entered here. | | Width | Column width in characters. |
|
...
Figure 5: List Grid Properties -
UI
| Name | Description |
|---|
| Enable Sorting Feature | Determines if the ordering of rows is to be enforced. |
Field ID for Sorting | Field to keep the ordering sequence; must correspond with a field id in the target form. |
Insert Button Label | Insert Button Label |
Form to Edit Row | After the addition of row, the user may edit the record row by opening it in the Form defined here. |
Form Submit Button Label (Normal Mode) |
Label | The label of the Submit button in normal mode. |
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". |
| Readonly | Determines if the element is editable. |
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? | Show an additional column on the leftmost to denote numbering. |
| Paging Size | Items to be displayed per page. |
Popup Dialog Height | |
Popup Dialog Width | |
Figure 6: List Grid Properties -
Validation & Data Binder
| Name | Description |
|---|
| Validator | Attach a Validator plugin to validate the input value. | Info |
|---|
| title | When will validation takes place? |
|---|
| Validation will |
|
takes take place whenever a form is submitted except when it is submitted as "Save as Draft". |
|
| Unique Column | Column/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. |
Load Binder | Option by default. Grid data will be saved/loaded in JSON format in its defined database cell. |
Store Binder | Option by default. Grid data will be saved/loaded in JSON format in its defined database cell. |
| Delete Associated Grid Data? | |
have has a grid element(s), this option will delete the inner grid data. | Panel |
|---|
| borderColor | #ffa700 |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ffdb99 |
|---|
| borderStyle | solid |
|---|
| title | Caution |
|---|
| These 3 options: (Delete Associated Grid Data, Delete Associated Child Form Data, Delete Files), in combination, does apply to nested grid/child elements. These options |
|
traverses traverse the entire form tree. Upon encountering a 'false' condition, it will move on to the next grid/child element. Example: Consider that the popup form has a form grid, form grid has a subform, subform has a file upload element with abc.pdf. If all options are checked, abc.pdf will be deleted. If all except ONE of the |
|
option options is checked, abc.pdf will NOT be deleted. |
|
| Delete Associated Child Form Data? | |
have has a child element(s), this option will delete the child data. | Panel |
|---|
| borderColor | #ffa700 |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ffdb99 |
|---|
| borderStyle | solid |
|---|
| title | Caution |
|---|
| These 3 options: (Delete Associated Grid Data, Delete Associated Child Form Data, Delete Files), in combination, does apply to nested grid/child elements. |
|
| Delete Files? | If the popup form contains a file upload element, this option will delete the actual uploaded file(s). | Panel |
|---|
| borderColor | #ffa700 |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ffdb99 |
|---|
| borderStyle | solid |
|---|
| title | Caution |
|---|
| These 3 options: (Delete Associated Grid Data, Delete Associated Child Form Data, Delete Files), in combination, does apply to nested grid/child elements. |
|
| Abort Related Running Processes? | If there are process instances related to the deleted row, |
this | these options will abort those process instances. |
Image Removed
...
Advanced
| Name | Description | Screen (Click to view) |
|---|
URL Request Parameters for Datalist | Refine the target Data List selections by defining the filter criteria here. | Name | Description |
|---|
| Parameter | Target Data List filter parameter name | | Field ID | Current form element field ID | | Default Value | Default Value for the search parameter |
|
...