关于表单组件

基本组件

文本字段

You can use the Text Field component to input short text.

文本区域

You can use the Text Area component to input long text. The Text Area component offers multi-line input.

The Rows setting allows you to set how many rows are visible in the Text Area component.

数字

You can use the Number component to input any number value.

• Use Thousands Separator - separates thousands with a comma.
• Require Decimal - always shows decimals, even if 0.
• Decimal Places - sets the maximum number of decimals displaying.

密码

您可以使用密码组件输入密码。为保密起见，文本显示为星号，而不是实际输入的值。密码组件的选项与文本字段组件相同。

复选框

You can use the Checkbox component to input boolean values (true or false).

选择复选框

You can use the Select Boxes component to allow users to choose multiple values from a list.

• 值- 用于向选择框组件添加选项。“标签”列是对用户可见的值。“值”列是存储在数据库中的名称。

  

下拉列表

You can use the Drop-down List component to display lists in a dropdown format.

• Widget Type - select the type of widget you want to use.

• 数据源值- 输入下拉列表中显示的值。“标签”列是对用户可见的值。“值”列是存储在数据库中的名称。

  

• Item Template - HTML template that allows you to control the way values are displayed in the dropdown list. You can access the values in the dropdown list, through the item variable. For example, use item.label to access a certain value in the dropdown list

• Refresh Options On - refreshes data when another field changes.

• Refresh Options On Blur - refreshes data when another field is blurred.

• Clear Value on Refresh Options - clears the components value when the Refresh On Field option is changed.

• Read Only Value - only show the value when in Read-Only mode.

• Choice.js options - input raw JSON object to use as options for the Select component.

• Use exact search - disables search algorithm threshold.

• Custom Default Value - create a custom default value using JavaScript or JSONLogic.

单选按钮

You can use the Radio component to allow users to choose only one value from a list.

• Values - input the values that appear in the list. The Label column is the value visible to users. The Value column is the name stored in the database.

按钮

You can use the Button component to allow users to perform various actions in the form.

• Action - select the action you want the button to perform:
  • 提交- 提交表单。
  • 单击- 执行单击操作。
  • Reset Form - resets the form fields.
  • “事件” - 当用户单击按钮时，并已选择“事件”时将开始运行某个事件，您需要在“按钮事件”字段中输入事件。现在，您可以使用事件的名称创建将触发另一个组件的自定义逻辑。

例如，如果您希望按钮计算两个组件的值并将其输出到第三个组件，则可以使用名为calculate的事件创建一个按钮，然后为您想要更新的组件创建一个名为calculate的逻辑以输出结果。

• “重置执行代码块中的数据” - 为“点击”类型按钮选中时，它会设置从执行代码块接收的数据。当在其他页面上找到的数据不在当前页面上时，有助于提高性能。
• 主题- 从下拉列表中选择按钮的颜色主题。
• “大小” - 从下拉列表中选择按钮的大小。
• “阻止按钮” - 跨越边界容器的整个宽度。
• 左图标/右图标- 添加完整的图标类字符串，以显示图标。例如fa fa-plus 。

高级组件

HTML 元素

You can use the HTML Element to display a single HTML element in your form and configure it based on your use-case.

备注：

呈现表单时，系统会去除所有不安全的 HTML 标签和属性，以防止跨站脚本编写。要去除的标签和属性包括： <script> 、 <embed> 、 <style> 、 onmouseover和onload 。

• HTML Tag - The tag of the HTML Element.
• CSS Class - The CSS Class that can be added for this HTML Element. You can input multiple classes, by separating them with single spaces.
• 属性- HTML 元素的属性。仅允许安全属性，例如： src 、 href和title 。
• 内容- HTML 元素的内容。
• 更改时刷新- 每当表单中的值发生更改时，都重新呈现 HTML 元素。

要在表单操作中显示图像和 PDF 文件，您需要使用HTML 元素组件。请查看以下教程：

• 显示图像
• 显示 PDF 文件

内容

You can use the Content component to add information in your form, that is display-only. The value of the component is not submitted back to the server.

• 更改时刷新- 每当表单中的值发生更改时重新呈现“内容”组件。

电子邮件

您可以使用电子邮件组件添加用于输入电子邮件地址的字段。电子邮件组件类似于文本字段组件。

电话号码

You can use the Phone Number component to add a field for inputting phone numbers.

• Input Mask - Provides a predefined format for the phone number. For the phone number field, the default format is [phone].
  • 9 - numeric
  • a - alphabetical
  • * - 字母数字
• Input Mask Placeholder Char - You can use a character as a placeholder in the field.
  备注：

  如果在掩码中使用占位符，则该字符将替换为空格。

日期/时间

You can use the Date/Time component to input dates, times, or input both.

• Format - the format used for displaying the datetime value.

• Enable Date Input - allows users to input dates for this field.

• Use Input to add moment.js for minDate - enables the user to use an input for minDate moment function, instead of a calendar.

• Use calendar to set minDate - enables the user to use a calendar to set the minDate.

• Use Input to add moment.js for maxDate - enables the user to use an input for maxDate moment function, instead of a calendar.

• “使用日历设置“最大日期” - 允许使用日历设置maxDate 。

• Disable specific dates or dates by range - add dates that you want to ban. For example, 2027-08-11.

• Custom Disabled Dates - allows you to ban certain dates using a customized function.

• Disable weekends - allows you to ban weekends.

• Disable weekdays - allows you to ban weekdays.

• Enable Time Input - allows users to input time for this field.

• “小时步长大小” - 时间选取器中要递增或递减的小时数。

• “分钟步长” - 时间选取器中要增加或减少的分钟数。

• 12 Hour Time (AM/PM) - displays time in 12 hour periods, using AM or PM.

• 默认日期- 使用Moment.js函数将默认值设置为特定日期。例如moment().substract(10, 'days') 。

  

日

You can use the Day component to ask for input for Day, Month, and Year, either through a number-type field or a select-type field.

• Type / Type of input - choose to give input for Day, Month, or Year either by typing in a number or by selecting options from a dropdown list.

Minimum / Maximum Year - choose the minimum / maximum year that can be entered.

• Require Day - the Day field must be filled in before the form renders.

• Require Month - the Month field must be filled in before the form renders.

• Require Year - the Year field must be filled in before the form renders.

• Maximum / Minimum Day - choose a minimum / maximum day that can be entered. You can also use Moment.js functions. For example, you can use moment().add(10, 'days').

  

时间

You can use the Time component to input time in different formats.

• Input Type - select the type of widget you would like to use for inputting time: HTML5 Time Input (users can choose the time from a given panel) or Text Input with Mask (users can manually input the time).

币种

You can use the Currency component to display financial amounts using a certain currency. The component has an input mask that displays the currency icon and automatically adds commas based on the number that the user inputs. The component allows two decimal values.

• “货币” - 从下拉列表中选择特定货币。

PDF

您可以使用PDF组件在表单操作中呈现 PDF 文件。

文件

您可以使用“文件”组件允许用户将文件上传到表单或从表单下载文件。

• 模态框“编辑” - 打开模态框以编辑此组件的值。
• “目录” - 将将此组件上传的所有文件放置在指定目录中。字符串,必须以/结尾。
• “仅上传” - 仅允许用户上传文件。选中后，“下载”选项将不可用。
• 文件类型- 用于指定文件类型，以便对用户上传的文件类型进行分类。当用户上传多种类型的文件，并且您希望用户指定上传的每个文件的类型时，推荐使用。
• “文件模式” - 用于指定允许上传的文件扩展名。其他未指定的文件扩展名将不会被上传。
• 文件的大小下限- 设置上传文件的大小下限。
• “文件的大小上限” - 设置已上传文件的大小上限。

调查

You can use the Survey component to allow users to answer multiple questions, by choosing only one value from a list.

• Questions - add the questions that the users should answer.
• Values - add the options that the user can select per question.

布局组件

列

You can use the Columns component to display other components in line, grouping them as columns.

• Column Properties - add columns to the component and configure them, by adjusting their Width, Offset, Push and Pull properties. After configuring the columns' layout, you can drag and drop other components into the Columns component.
• 自动调整列- 如果存在隐藏的嵌套组件，则自动调整列。

面板

您可以使用“面板”组件对字段组件进行分组，并将其添加到命名面板中。

• Theme - choose the theme of the panel from the dropdown list. The Bootstrap class is added to the wrapper div.

• Collapsible - allows you to collapse the panel.

• “初始折叠” - 仅在选中“可折叠”时，该属性才可用。加载表单时折叠面板。

  表格

您可以使用表格组件创建表格来保存列和行中的其他表单组件。

• 行数/列数- 输入要在表格中显示的行数和列数
• “克隆行组件” - 克隆行中的组件，并将其添加到剩余行中。在创建具有多行且内容相同的表格时，可以使用它。
• Cell Alignment- choose the horizontal alignment of the cells in the table.
• Striped - adds striped shading to rows.
• Bordered - adds visible borders to the table.
• Hover - highlights row when hovering the mouse over it.
• Condensed - condenses the size of the table.

选项卡

You can use the Tabs component to group components into tabs. When the form renders, you can view one tab at a time.

The Tabs setting allows you to add, configure, reorder, and remove tabs.

数据

容器

You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance submits as:

{
    data: {
    financialPerformance {
        grossProfitMargin: "0.83",
      netProfitMargin: "0.43"
      }
   }
}

数据网格

您可以使用数据网格组件将多个内联组件添加到单个网格中。您可以在“数据网格”中拖放多个组件来匹配您的用例。数据网格组件允许您将多个重复字段内联添加到单个网格中。

In the Form Renderer window, the rows inside the Data Grid component can be added or removed.

• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Allow Reorder - reorder rows by dragging and dropping them.
• Equal Column Width - makes the widths of columns equal.
• 启用行组- 允许将行分组。添加组，为组添加标签，然后选择每个组的行。
• “初始化空” - 数据网格在初始化时没有可见的行。

编辑网格

您可以使用编辑网格组件，以表格格式显示数据。您可以将多个表单组件拖放到“编辑网格”中，以捕获大量数据。

When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.

• 为空时打开第一行
  • 当“编辑网格”为空时，打开第一行。
• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• 页眉/行/页脚模板- 使用 JavaScript 自定义网格。
• Add Another Text - changes the name of the Add Another button.
• Save Row Text - changes the text of the Save Row button.
• Remove Row Text - changes the text of the Remove Row button.

网格控件组件之间的比较

下表比较了“表单设计器”中可用的网格控件的功能。该表还描述了使用每个网格控件组件的推荐方案：数据网格和编辑网格。

图例：✅= 不可用。

功能	数据网格	编辑网格
推荐方案	显示一小组需要用户编辑的数据（内联编辑功能）。	显示一小组需要用户编辑的数据（子表单内联编辑功能）。
建议行数	不超过 100 行。 性能下降超过建议数量的风险。	不超过 100 行。 性能下降超过建议数量的风险。
建议列数	最多 7 列，每 100 行。 性能下降的风险。	最多 7 列，每 100 行。 性能下降的风险。
可编辑	✅	✅
分页	❌	❌
可排序	❌	❌
可筛选	❌	❌
可在运行时调整列大小	❌	❌
行分组	✅	❌
逻辑与条件	✅	✅
使用模板进行广泛的自定义	❌	✅
全局搜索	❌	❌