Versions Compared

Old Version 1

changes.mady.by.user Hugo

Saved on

compared with

New Version Current

changes.mady.by.user Hugo

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
borderColorgreen
borderWidth1
titleBGColor#ddffcc
borderStylesolid
titleDefinition

Form Grid extends the default functionalities of a typical grid element. Unlike the generic grid element that only accepts standard text field for its inputs, the Enhanced Grid Form Element captures data by making reference to another form element. Hence, one can take full advantage of what a typical form element has to offer, e.g., validation and formatting.

...

Figure 1: Screenshot of Form Grid in sample HR Expenses Claim app

Image Removed

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

Image Removed

表单表格 扩展了典型网格元素的默认功能。与只接受其输入的标准文本字段的通用网格元素不同，增强型网格表单元素通过引用另一个表单元素来捕获数据。因此，可以充分利用典型的表单元素提供的内容，例如验证和格式化。

Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature

New feature added in Joget Workflow v6.

  • Paging
  • Delete Options
  • Multiple Lines Format Type


Image Added

图1：示例HR费用声明应用程序中的表单网格屏幕截图

Image Added

图2：样本人力资源费用索赔应用程序中的表格网格屏幕截图 - 添加新行

Image Added

图3：表单表格属性Figure 3: Form Grid Properties

NameDescription
IDElement ID (By declaring as "entries", a corresponding database table column "c_entries" will be created)
LabelElement Label to be displayed to end user.
元素ID（通过声明为“entries”，将创建相应的数据库表列“c_entries”）
Label元素标签显示给最终用户。
FormTarget form to reference to.
Columns

这里定义的列必须与上面选择的表格相对应

Columns

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

NameDescription
Value

目标表单的字段ID。

例：

在“HR费用索赔条目”表格中,有表单元素

Field ID of the target form.

Example:

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

LabelColumn Label.列标签。
Format Type

如果你想格式化返回的值，你可以使用格式类型。

默认选择：文本。

可用的格式类型

  • Text -将文本格式的值设置为文本
  • HTML -  以HTML 格式输出数据
  • Date - 格式为日期。“ Format”字段中应包含原始日期和新的日期格式。
    Format: （输入格式）|（输出格式）
    使用示例：
    原始值

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
  • Date - formats as date. Original Date and New Date formats are expected in the "Format" field.
    Format: (input format)|(output 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.
  • Decimal - formats as decimal. Number of decimals is expected in the "Format" field.
  • 注意: 请参阅java 用于日期格式的SimpleDateFormat。
  • Decimal - 格式为十进制。预期在“ Format”字段中的小数位数。

  • File -  显示值作为附件的链接。 在“ Format”字段中预期Form Def IDFile - Show the value as a link to the attachment. Form Def ID is expected in the "Format" field.

    Info
    titleExpected 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.将该值显示为附件的缩略图。 在“Format”字段中预期表单定义ID。

    Info
    titleExpected Form Def ID

    Specify the Form Def ID that contains the actual 指定包含实际 Image Upload / File Upload form element 表单元素的 Form Def ID.

  • Options - Show the label of multiple choice element given the value given. Form Def ID is expected in the "Format" field.根据给定的值显示多选元素的标签。 在“格式”字段中预期表单定义ID。

    Info
    titleExpected Form Def ID

    Specify the Form Def ID that contains the actual Select Box / Radio / Check Box form element.

Info
titleOptions Format Type

 

The Options format type is newly introduced in Joget Workflow v5.

The screenshot below shows an entry added with its values sourced from select box.

Image Removed

该选项的格式类型在Joget工作流程V5新引进的。

下面的屏幕截图显示了一个添加了来自选择框的值的条目。

Image Added

以下截图显示了使用“ Options ”格式类型捕获的值的相应标签。The screenshot below shows the corresponding label for the value captured using the Options format type.

FormatDepending on your chosen Format Type, additional argument may be entered here.根据您选择的格式类型，可能会在此处输入其他参数。
Width

Column width in characters.列宽以字符为单位

Code Block
titleSample
200px

Image Removed

Image Added

 

图4：表单网格属性 Figure 4: Form Grid Properties - UI

of the Submit button in read-only mode
NameDescription
Enable Sorting FeatureDetermines if ordering of rows is to be enforced.确定是否强制执行行的排序。
Field ID for SortingField to keep the ordering sequence; must correspond with a field id in the target form.字段保持排序顺序; 必须与目标表单中的字段ID相对应。
Form Submit Button Label (Normal Mode)Label of the Submit button in normal mode.正常模式下的提交按钮的标签。
Form Submit Button Label (Readonly 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.以字符为单位指定高度。

Code Block
titleSample
200px
Popup Dialog Width

Specifies the width, in characters.以字符为单位指定宽度。

Code Block
titleSample
200px
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.确定是否可以删除一行。

Delete confirmation messageConfirmation message when deleting a row.删除一行时的确认消息。
Show Row Numbering?Shows numbering on the grid.

Image Removed

在表格上显示编号。
Paging SizeItems to be displayed per page.

Image Added

 

图5：表格表格属性 - 验证和数据绑定Figure 5: Form Grid Properties - Validation & Data Binder

NameDescription
Validator

Attach a Validator plugin to validate the input value.附加一个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.列/字段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 表单绑定器.

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 表单绑定器.

Image Removed

Figure 6: Form Grid Properties - Load Binder - Multirow Form Binder

NameDescription
FormForm to store to or load from
Foreign KeyForeign Key for records lookup.

Image Removed

Figure 6: Form Grid Properties - Store Binder - Multirow Form Binder

默认选项。表格数据将在其定义的数据库单元中以JSON格式保存/加载

在这个例子中，Multirow表格绑定器被用来加载其他表格的数据。请参阅可用表单绑定器列表。

Store Binder

默认选项。表格数据将在其定义的数据库单元中以JSON格式保存/加载

在这个例子中，Multirow表格绑定器被用来加载其他表格的数据。请参阅可用表单绑定器列表。

Delete Associated Grid Data?

If the popup form have grid element(s), this option will delete the inner grid data.

Panel
borderColor#ffa700
borderWidth1
titleBGColor#ffdb99
borderStylesolid
titleCaution

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
borderWidth1
titleBGColor#ffdb99
borderStylesolid
titleCaution

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
borderWidth1
titleBGColor#ffdb99
borderStylesolid
titleCaution

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.

Image Added

图6：表单表格属性 - 加载绑定器 - 多行表单绑定器

NameDescription
Form存储到或从中加载的表单
Foreign Key用于记录查找的外键。

Image Added

图6：表单表格属性 - 存储绑定器 - 多行表单绑定器

NameDescription
Form存储到或从中加载的表单
Foreign Key用于记录查找的外键。
NameDescription
FormForm to store to or load from
Foreign KeyForeign Key for records lookup.


Info
titleLearning More

Download a tutorial app on Grids from 从  Joget Workflow Marketplace to learn more.下载表格教程应用程序   以了解更多信息。