关于表单组件

基本组件

文本字段

您可以使用“ 文本字段 ”组件输入短文本。

文本区域

您可以使用“ 文本区域 ”组件输入长文本。 “ 文本区域 ”组件提供多行输入。

“ 行 ” 设置允许您设置在“ 文本区域 ” 组件中可见的行数。

数字

您可以使用“ 数字 ”组件输入任何数字值。

• 使用千位分隔符 - 用逗号分隔千位。
• 需要小数 - 始终显示小数，即使为 0。
• 小数位数 - 设置显示的最大小数位数。

密码

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

复选框

您可以使用“ 复选框 ”组件输入布尔值（true 或 false）。

选择复选框

您可以使用“ 选择框 ”组件来允许用户从列表中选择多个值。

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

  
  

  

  
  

下拉列表

您可以使用“ 下拉列表”组件以下拉格式 显示列表。

• 微件类型 - 选择要使用的微件类型。

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

  
  

  

  
  
• “项目模板 ” - HTML 模板，用于控制值在下拉列表中的显示方式。 您可以通过 item 变量访问下拉列表中的值。 例如，使用 item.label 访问下拉列表中的特定值
• “刷新选项”“开” - 在另一个字段发生更改时刷新数据。
• 模糊时刷新选项 - 在另一个字段模糊时刷新数据。
• “刷新时清除值选项 ” - 当“ 字段刷新 时” 选项发生更改时，清除组件值。
• 只读值 - 仅在处于只读模式时显示值。
• Choice.js 选项 - 输入原始 JSON 对象以用作“ 选择 ”组件的选项。
• 使用精确搜索 - 禁用搜索算法阈值。
• 自定义默认值 - 使用 JavaScript 或 JSONLogic 创建自定义默认值。

单选按钮

您可以使用“ 单选” 组件来允许用户从列表中仅选择一个值。

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

按钮

您可以使用“ 按钮 ”组件来允许用户在表单中执行各种操作。

• 操作 - 选择您希望按钮执行的操作：

  • “提交 ” - 提交表单。
  • 单击 - 执行单击操作。
  • 重置表单 - 重置表单字段。
  • “事件”- 当用户单击按钮时，并已选择“事件”时将开始运行某个事件，您需要在“按钮事件”字段中输入事件。现在，您可以使用事件的名称创建将触发另一个组件的自定义逻辑。
    例如，如果您希望按钮计算两个组件的值并将其输出到第三个组件，则可以使用名为 calculate 的事件创建一个按钮，然后为要输入的组件创建一个名为 calculate 的逻辑，以输出结果。
• 从 DO 块重置数据 - 选中“单击类型”按钮时，它会设置从 DO 块接收的数据。 当在其他页面上找到的数据不在当前页面上时，有助于提高性能。
• 主题 - 从下拉列表中选择按钮的颜色主题。
• “大小 ” - 从下拉列表中选择按钮的大小。
• 块按钮 - 跨越边界容器的整个宽度。
• 左/右图标 - 添加完整的图标类字符串，以显示图标。 例如 fa fa-plus。

高级组件

HTML 元素

您可以使用 HTML 元素在表单中显示单个 HTML 元素，并根据您的用例对其进行配置。

注意： 呈现表单时，系统将删除所有不安全的 HTML 标记和属性，以防止跨站点脚本。 被剥离的标签和属性包括： <script>、 <embed>、 <style>、 onmouseover和 onload。

• “HTML 标记 ” - “ HTML 元素”的标记。
• “CSS 类 ” - 可以为此 HTML 元素添加的 CSS 类。 您可以输入多个类，方法是用单个空格分隔它们。
• “属性 ” - HTML 元素的属性。 仅允许使用安全属性，例如 src、 href和 title。
• “内容 ” - HTML 元素的内容。
• 更改时刷新 - 每当表单中的值发生更改时，都会重新呈现 HTML 元素。

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

• 显示图像
• 显示 PDF 文件

内容

您可以使用“ 内容 ”组件在表单中添加信息，即仅显示信息。 组件的值不会提交回服务器。

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

电子邮件

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

电话号码

您可以使用“ 电话号码 ”组件添加用于输入电话号码的字段。

• “输入掩码” - 提供电话号码的预定义格式。 对于电话号码字段，默认格式为 [phone]。
  • 9 - 数字
  • a - 按字母顺序排列
  • \* - 字母数字
• “输入掩码占位符字符” - 您可以在字段中使用字符作为占位符。

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

日期/时间

您可以使用“ 日期/时间” 组件输入日期和时间，或同时输入两者。

• “格式 ” - 用于显示日期时间值的格式。
• 启用日期输入 - 允许用户为此字段输入日期。
• 使用输入为 minDate 添加 moment.js - 使用户能够使用 minDate moment 函数的输入，而不是日历。
• 使用日历设置最小日期 - 使用户能够使用日历设置 minDate。
• 使用输入为 maxDate 添加 moment.js - 使用户能够为 maxDate 时刻函数使用输入，而不是日历。
• 使用日历设置最大日期 - 允许使用日历设置 maxDate。
• 按范围禁用特定日期或日期 - 添加要禁止的日期。 例如 2027-08-11。
• 自定义禁用日期 - 允许您使用自定义功能禁止某些日期。
• 禁用周末 - 允许您禁用周末。
• 禁用工作日 - 用于禁用工作日。
• “启用时间输入” - 允许用户为此字段输入时间。
• “小时步 长” - 在时间选取器中递增或递减的小时数。
• “分钟步 长” - 在时间选取器中递增或递减的分钟数。
• 12 小时制 (AM/PM) - 使用 AM 或 PM 以 12 小时为单位显示时间。
• 默认日期 - 使用 Moment.js 函数将默认值设置为特定日期。 例如 moment().substract(10, 'days')。
  
  

  

  
  

日

您可以使用“ 日” 组件通过数字类型字段或选择类型字段请求输入“ 日”、 “月”和 “年”。

• 输入类型/类型 - 通过输入数字或从下拉列表中选择选项，选择输入“日”、“月”或“年”。

最小/最大年份 - 选择可以输入的最小/最大年份。

• “要求日期” - 必须在呈现表单之前填写“日期” 字段。
• “要求月份” - 必须在呈现表单之前填写“月份” 字段。
• “要求年份” - 必须在呈现表单之前填写“年份” 字段。
• 最大/最小日期 - 选择可以输入的最小/最大日期。 您还可以使用 Moment.js 函数。 例如，您可以使用 moment().add(10, 'days')。
  
  

  

  
  

时间

您可以使用“ 时间” 组件以不同格式输入时间。

• 输入类型 - 选择要用于输入时间的微件类型： HTML5 时间输入 （用户可以从给定面板中选择时间）或 带掩码的文本输入 （用户可以手动输入时间）。

币种

您可以使用“ 货币 ”组件来显示使用特定货币的财务金额。 该组件具有一个输入掩码，该掩码显示货币图标，并根据用户输入的数字自动添加逗号。 该组件允许使用两个十进制值。

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

PDF

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

文件

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

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

调查

您可以使用“ 调查” 组件，通过从列表中仅选择一个值来允许用户回答多个问题。

• “问题 ” - 添加用户应回答的问题。
• “值 ” - 添加用户可以为每个问题选择的选项。

布局组件

列

您可以使用“ 列 ”组件逐行显示其他组件，并将其分组为列。

• “列属性 ” - 向组件添加列，并通过调整列的“宽度”、“偏移”、“推送”和“拉取”属性来配置列。 配置列的布局后，您可以将其他组件拖放到“ 列 ”组件中。
• 自动调整列 - 如果存在隐藏的嵌套组件，则自动调整列。

面板

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

• 主题 - 从下拉列表中选择面板的主题。 系统会将 Bootstrap 类添加到包装器 div 中。
• 可折叠 - 用于折叠面板。

• 最初折叠 - 此属性仅在选中 可折叠 时可用。 加载表单时折叠面板。

  表格

您可以使用 表格 组件创建一个表格，其中包含列和行中的其他表单组件。

• “行数/列数” - 输入要在表格中显示的行数和列数
• 克隆行组件 - 克隆行内的组件，并将其添加到剩余的行中。 您可以在创建具有多行且内容相同的表格时使用它。
• 单元格对齐方式 - 选择表格中单元格的水平对齐方式。
• 条纹 - 为行添加条纹底纹。
• 有边框 - 为表格添加可见边框。
• 悬停 - 将鼠标悬停在行上时高亮显示行。
• “压缩 ” - 压缩表格的大小。

选项卡

您可以使用“ 选项卡 ”组件将组件分组到选项卡中。 呈现表单时，您一次只能查看一个选项卡。

“ 选项卡 ” 设置允许您添加、配置、重新排序和删除选项卡。

数据

容器

您可以使用“ 容器 ”组件将一组字段包装到具有容器键的对象中。 具有键 financialPerformance 的 容器 提交为：

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

数据网格

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

在“ 表单呈现器 ” 窗口中，可以添加或删除“ 数据网格 ” 组件中的行。

• “禁用添加/删除行 ” - 隐藏允许在呈现表单时添加或删除行的按钮。
• “允许重新排序 ” - 通过拖放行来重新排序行。
• 列宽相等 - 使列的宽度相等。
• 启用行组 - 允许将行分成组。 添加组，为其添加标签，为每个组选择行。
• “初始化空 ” - 初始化时，数据网格将没有可见行。

编辑网格

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

呈现表单时，您可以通过单击“ 添加另一个” 添加“编辑网格”的副本。

• “为空 时打开第一行” - 当“编辑网格”为空时打开第一行。
• “禁用添加/删除行 ” - 隐藏允许在呈现表单时添加或删除行的按钮。
• 页眉/行/页脚模板 - 使用 JavaScript 自定义网格。
• “添加另一个文本 ” - 更改“ 添加 另一个文本” 按钮的名称。
• “保存行文本 ” - 更改“ 保存行 ”按钮的文本。

• “删除行文本 ” - 更改“ 删除行 ”按钮的文本。

网格控件组件之间的比较

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

图例： = 不可用。

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