...
Figure 2: Screenshot of Form Grid in sample HR Expenses Claim app - Add New Row
Image Modified
Figure 3: Form Grid Properties
| Name | Description |
|---|
| ID | Element ID (By declaring as "entries", a corresponding database table column "c_entries" will be created) |
| Label | Element Label to be displayed to end user. |
| Form | Target form to reference to. |
| Columns | The columns defined here must be correspondent to the Form chosen above. | Name | Description |
|---|
| Value | Field ID of the form element to reference to the target form. | Panel |
|---|
| borderColor | blue |
|---|
| borderWidth | 1 |
|---|
| titleBGColor | #ddffcc |
|---|
| borderStyle | solid |
|---|
| Example: In "HR 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. 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 decimal. Number of decimals is expected in the "Format" field.
Date - formats as 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 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 form element. |
| | Format | Depending on your chosen Format Type, additional argument may be entered here. | | Width | Column width in characters. |
|
Image Removed
Image Added
Figure 4: Form Grid Properties - UI
| Name | Description |
|---|
| Enable Sorting Feature | Determines if 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. |
| Form Submit Button Label (Normal Mode) | Label of the Submit button in normal mode. |
| Form Submit Button Label (Readonly Mode) | 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 element is set to "Readonly". |
| Popup Dialog Height | Specifies the height, in characters. |
| Popup Dialog Width | Specifies the width, in characters. |
| 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? | Shows numbering on the grid. |
| Paging Size | Items to be displayed per page. |
Image Removed
Image Added
Figure 5: Form Grid Properties - Validation & Data Binder
| Name | Description |
|---|
| Validator | Attach a Validator plugin to validate the input value. Please see Form Validator. | Info |
|---|
| title | When will validation takes place? |
|---|
| Validation will takes place whenever 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. 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. |
| Delete Associated Grid Data? | If the popup form have 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 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 is checked, abc.pdf will NOT be deleted. |
|
| Delete Associated Child Form Data? | If the popup form have 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 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 options will abort those process instances. |
| Info |
|---|
|
Download a tutorial app on Grids from Joget Workflow Marketplace to learn more. |
Related Tutorials