...
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
...
| Info |
|---|
|
Download a tutorial app on Grids from Joget Workflow Marketplace to learn more. |
Related Tutorials