设计提交表单

设计易企办提交表单包括自定义布局、添加控件以及设置表单字段,以高效收集用户数据。

一周前更新

提交表单是用户提交新请求的表单。因此,在表单发布后,拥有提交权限的用户可以根据您在此表单中设置的字段填写信息。


设计表单布局

易企办为您提供了灵活自定义表单布局的方式。例如,更改背景颜色和内容区域的宽度等。

更改背景颜色

从左侧控件面板中,点击顶部标签栏的“页面”。在页面部分,您可以更改背景颜色,或为您的表单添加背景图片:

更改内容区域设置

在“内容区域”部分,您可以更改表单内容区域的宽度,设置内容的背景和填充。


添加控件到表单

默认控件

默认情况下,有2个控件已经被添加到空白提交表单中:动作面板控件和工作流历史控件。这两个控件通常作为标准提交表单所需。

动作面板控件包含两个按钮供终端用户提交表单或将表单保存为草稿。您可以设置这些按钮的排列为左侧、居中或右侧。

工作流历史控件用于显示工作流的审批历史。这将帮助终端用户在提交后跟踪审批表单的状态。

虽然您可以拖动更改这两个控件的位置,或者从表单中移除这些控件,但我们建议将它们放在表单的底部。如果您移除了任何这些控件,您可以从左侧控件面板中找到它们,并拖回表单:

专业提示:

您可以在表单上添加多个动作面板或工作流历史控件。例如,如果您的表单包含大量内容使得表单非常长,您可以添加两个动作面板控件,一个在顶部,另一个在底部。这将使得终端用户从两个位置提交表单变得更加容易。

添加页眉和/或页脚

在表单顶部包含页眉将指导用户更好地理解您的表单的目的。

要添加页眉,从左侧控件面板中,找到常规部分下的“标题”控件。将此控件拖到表单顶部。更改文本为您的表单名称并设置文本大小和对齐方式。您还可以添加一行文本作为描述,并在页眉文本后添加分隔符。

您也可以在表单底部添加一些文本或链接作为页脚。

添加表单字段控件

表单字段控件用于收集和显示动态数据,这可以是简单的输入控件,如文本框、数字、日期时间,或数据选择器控件供用户从数据列表中选择用户、群组、元数据或业务数据。您可以从左侧控件面板中找到可用的字段控件。它们被分类为两组:基本字段和高级字段:

要添加一个字段控件,点击控件并将其拖到表单上。添加新的字段控件时,将自动创建一个新变量。每个字段控件将与一个变量相关联,这个变量是实际存储的后端数据。例如,当你向表单添加一个文本框字段时,你会在控件的属性面板中找到“关联变量”区域。字段ID和字段名称是field_2和text2。

如果您从右上方点击“变量”按钮,您将从变量列表对话框中找到具有相同ID和名称的关联变量。

您可以在此处从变量列表对话框更改变量的ID和名称。或者,返回到表单设计器,从控件的属性面板中点击“编辑”按钮,并从弹出的对话框中更改这些值。

例如,将字段ID更改为field_projectname,将字段名称更改为Project Name

同步标签:如果勾选此选项,此字段的标题也将更改为与字段名称相同的值。否则,标题文本不会更改。下面是更改后的样子:

注意

您可以随时更改标题文本。标题的更改不会影响字段名称和字段ID。例如,您可以将字段名称设置为“项目名称”,而将标题文本设置为“该项目的名称”。

将其他字段控件从控件面板拖动并根据需要添加到表单中。例如添加名为“类别”的下拉控件和名为“项目负责人”的用户控件。然后添加两个日期选择器控件作为开始日期和结束日期等。

您可以从验证设置组中设置默认值以及是否为必填项。


示多列的控件

1.设置每个控件的自定义宽度

默认情况下,每个控件的宽度设置为100%。当您向表单添加新控件时,它将作为新行放置。您可以选择任何控件,从控件的属性面板中,转到高级标签。然后,在高级组中找到宽度设置项,并从下拉列表中选择“自定义”以实际像素值或外部容器的百分比设置此控件的宽度。

2.使用网格控件添加多列

网格控件是一种内容容器控件,可以包含多个列和行。您可以将控件放入网格中以组织表单元素的布局。

将网格控件拖动到表单中,并将其放置在项目名称控件下方。从网格控件的属性面板的外观组中,点击列项后的“+”添加更多列。然后,逐一将类别、项目负责人、开始日期和结束日期拖入网格控件。您可以随时更改列数。

在外观组中关闭“显示标题”以隐藏此网格的标题。

您还可以利用其他内容容器控件来排列表单元素,包括:

  • 部分:一个部分可以有一个或多个列,每个列可以包含多个控件。如果您希望元素以列分组,请使用部分。

  • 容器:容器控件支持显示控件的flexbox布局。您可以用容器对一系列控件进行分组,并设置样式,如对齐、调整、方向等。

  • 标签:使用标签控件将控件分组到不同的标签中。用户可以点击切换标签以查看或编辑内容。

  • 切换:类似于标签控件,使用切换控件根据功能或目的对控件进行分组。


添加子列表控件

子列表控件使用户能够在表单中输入数据列表。添加子列表的表单称为主表单。

何时使用此字段

子列表控件非常适合使用户能够输入具有主详细关系的数据。让我们以 IT 资产管理(ITAM)为例来理解这一点。

想象一下,您正在构建一个应用程序来管理组织中的设备——笔记本电脑、智能手机和平板电脑,并且希望为每台设备捕获以下内容:

  • 购买日期

  • 购买时使用的采购订单号

  • 供应商相关数据,如供应商的名称、电子邮件地址、电话号码和地址

  • 设备相关数据,如设备的名称、类型、序列号和价格

实现这一点并不难。您只需创建一个表单(比如,采购订单表单),并与您的资产经理共享。想象一下,如果您的表单允许资产经理每次提交一个设备的购买详情。然后,即使您的资产经理在同一日期从供应商处购买多个设备,他/她也必须通过采购订单表单提交多个条目。因此,存储在采购订单表单中的记录将看起来(在其报告中)好像它们代表单独的购买,实际上并非如此。

子列表可以在这种情况下提供帮助。但首先让我们回答这个问题:在上述情况中是否存在主详细关系?是的,确实如此。具体如下:

  • 首先,每个设备都是从供应商处购买的。这表明设备和供应商之间存在关系。

  • 其次,您的 IT 经理是否每次从供应商购买一台设备?大多数情况下,不是。

  • 由于可能会在同一订单中购买多台设备,因此购买日期、采购订单号和供应商相关数据是主信息,而与设备相关的数据则是详细信息。

当您在表单中添加一个子列表控件以便输入正在购买的设备的详细信息时,以下将是好处:

  • 每次购买时,您的资产经理将能够一次性输入所有设备的详细信息。(每个购买记录可以关联多个设备)

  • 因此,当您的资产经理访问报告时,它将看起来好像设备已根据购买分组。

将子列表控件添加到您的表单中

作为关于如何使用子列表控件的展示。让我们向我们当前设计的表单中添加一个名为“项目计划”的子列表。

从控件面板拖动一个子列表控件,然后将其添加到您的表单中。将标题文本更改为“项目计划”,并更新关联的变量 ID 和名称为 field_projectplanProject Plan

接下来,转到“列表内容”组,点击“字段”区域的“设置”按钮。从弹出的对话框中,点击“+ 添加字段”按钮为这个子列表添加 3 个字段。将 ID、名称和类型更改如下:

字段 ID

字段名称

类型

field_workitem

工作项

文本

field_startdate

开始日期

日期/时间

field_enddate

结束日期

日期/时间

点击第一列的复选框以在表单上显示所有3个字段。点击“确定”按钮关闭此对话框。您可以看到这三个字段已作为该子列表的字段添加到表单中:


您可以通过点击每个字段来展开设置部分,从而更改每个字段的控件类型、样式和属性。从控件类型下拉列表中更改控件的类型。点击控件属性项的“设置”按钮以打开控件的属性设置对话框。


保存和预览

易企办表单设计器不会自动保存,因此请确保手动保存您的更改。您可以在顶部标题的右侧找到“保存”按钮。

要预览表单设计或测试功能,例如动态显示规则、自定义验证等,请在左侧控件面板的底部找到“预览”按钮。点击它以打开预览页面。


为多种设备自定义布局

您可以在不同设备上访问时自定义表单的布局,例如PC、平板和移动设备。以下是自定义布局的步骤:

从表单设计器中,点击顶部标题中心的设备图标切换到不同设备的设计视图。

然后,您可以更改每个控件的样式以适应不同设备的大小。任何带有设备图标的控件属性都可以为每种设备设置不同的样式,例如,您可以设置标题的文本大小和对齐方式。根据这些控件的类型,更改填充、半径等。

这是否解答了您的问题?