一篇文学会商用可编辑问卷表单制作【iVX 十二】

公共表单

在 iVX 快速教程中，我们使用一个公共表单项目作为 WebApp 应用的演示说明。公共表单项目可以用于企业内部或一个问卷公共平台做问卷调查，用户可以自由的设置表单元素以及样式，并且可以手动设置表单结束下载填写问卷后的调查数据。

公共表单共分为 6 个页面，分别是已结束填写表单、需填表单、自己创建的表单、具体表单显示以及登录页面。

已结束填写表单页用于查看已结束的表单内容，或进行结束表单的数据下载；需填写表单页用于查看需要填写的表单内容；自己创建的表单页用于查看自己创建的表单；具体表单显示页为填写表单；登录页则用于用户进行注册或登录。

最终演示效果：

一级目录

二级目录

三级目录

一、登录页制作及功能编写

为了方便之后的功能编写，在此我们编写登录页，完成用户登录、注册功能。

1.1 编写登录页

登录页如下：

登录页布局比较简单，为一个行包含了两个行，左侧为一张图片用于显示，宽度占满了整行；右侧主要内容则是登录所需要填写的信息输入框。

首先我们在页面中创建如下布局：

随后在设置左图的宽度为 62%，比右侧略大一些，这样会显得比较美观：

随后设置右侧登录框的宽度为 38%，这两个行占满整个页面宽度：

接着我们往左图中添加一张图片，该图片的宽度为 100%，占满整个左图行：

接着我们在登录框中创建 3 个行，分别用于设置登录框的元素：

在此需要设置登录框的水平对齐为居中方便 iVX 公共表单行元素居中显示，在此需要对公共表单行设置宽度为 60%，用于显示标题，其余行则占满整个宽度。

接下来需要在这些行中添加对应的组件：

随后设置对应的属性即可完成演示效果。

其实在登录页中我们还可以为其增加注册框内容，我们只需要在页面中再制作一个类似布局用于注册，最后再使用一个变量进行显示控制即可。现在我们在登录框中创建一个类似的注册框：

此时页面的显示效果如下：

1.2 控制登录页注册及登录框显示

接下来我们创建一个布尔变量，用于判断点击的是注册按钮还是登录按钮，如果点击注册按钮则显示注册框的页面元素内容，若点击的是登录按钮则显示登录框的元素内容。

我们创建两个 if 组件用于判断该登录值的状态，将注册元素内容以及显示元素内容分别拖入对应的 if 组件中：

随后点击判断注册组件判断登录变量的值是否为 flase，为 false 则表示不注册，显示登录组件，判断为true 则相反：

接着我们分别对登录、注册按钮设置事件：

点击登录，设置登录布尔变量值为 flase ，点击注册按钮设置登录布尔变量为 true，此时就可以来回进行切换：

1.3 完成用户注册

对完成用户注册我们需要在后台添加一个私有用户组件。私有用户组件是一个已经做好基础功能的数据库，我们可以使用用户组件存储用户账号密码、手机短信登录、发送手机验证码、账号密码登录、用户注册等：

点击后台添加私有用户后，我们使用该组件完成用户的注册操作：

为了方便标识，为私有用户重命名为用户：

接下来我们为验证码按钮添加事件：

点击验证码后，在点击事件编辑面板选择需要操作的对象为用户组件，随后需要进行的动作为获取短信验证码。此时点击验证码后，将会发送短信到我们在注册框中所填写的手机号，此处为了方便演示我们选择无需使用图片验证码：

接下来我们为注册按钮添加事件，该事件在点击注册按钮进行手机号注册时响应，我们通过使用用户对象，进行手机注册动作，传入手机号码、短信验证码即可：

之后为了判断注册动作是否成功，我们为这个这动作添加两个回调，一个为成功时响应、一个为失败时响应。成功注册将会弹出成功注册提示，并且设置登录变量为 true 页面将会自动回到登录界面；注册失败则会弹出提示：

此时即可完成用户注册：

1.4 完成用户登录

接下来我们完成登录功能，登录功能依旧使用用户对象完成，我们点击登录框中的登录按钮为该按钮添加一个事件：

随后选择用户对象，发起手机密码登录：

接着增加成功、失败回调。此时还需在前台下创建一个变量，用于判断账户是否成功登录，方便之后的用户账号获取。我们在登录成功后提示用户登录成功，并且设置登录用户的账号为输入的账号内容，若失败则弹出失败提示：

接着我们可以尝试进行登录，正确输入注册的账号与密码则可得到登录成功提示：

二、页面编辑页制作及功能编写

编写完登录注册页后，我们开始添加表单内容。表单内容是通过一个编辑页动态生成，页面效果如下：

该页面可以使用左侧的添加表单选项，为需要填写的表单添加动态的选项内容，并且添加后的表单内容可以更改每一行的标题、或者是背景色；添加的下拉菜单页可以为其增加选项内容。

2.1 表单标题栏制作

表单编辑页包括一个头部标题栏，标题栏可以跳转到不同的页面。标题栏主要由左侧与右侧组成，左侧、右侧各占整行的 50% 宽度，左侧主要为不同页面的跳转、右侧为当前页面所制作的表单保存按钮。

此时我们新建一个页面命名为编辑页，将该页的背景色改为灰色，使其与主要内容有层次的突出感；接着为其添加一个行命名为头部，在头部行中添加两个行，一个命名为标题栏左侧，另一个命名为标题栏右侧：

在此将标题栏左侧与右侧的垂直对齐设置为居中，使页面元素能够垂直居中将会更加美观，在此还需单独设置右侧标题栏的水平对齐为靠右，为了方便保存按钮靠右显示。设置完毕后添加按钮组件至左右两侧标题栏下：

设置好对应的按钮样式后，页面中显示效果如下（设置样式不同则显示不同，根据各自喜好进行属性设置）：

2.2 编辑区内容制作

制作完标题栏后，我们创建一个行命名为编辑内容块，在编辑内容块下创建 3 个列，这 3 个列分别设置他们之间为 30%、40%、30% 使其占据整个行内容，也可以在其基础上设置对应的外边距、内边距，使其具有一定的间隔将会更加美观：

接着在添加元素块列中创建一个行，这个行下有两个行，一个用于标题、一个用于添加元素的呈现；用于标题的行命名为表单外观标题，添加具体元素的行命名为详细内容；详细内容行下创建两个列，这两个列分别占据添加元素块列最大宽度的 50%，用于存放需要添加的内容按钮：

我们如上图添加好内容后，将会呈现如下图类似的页面：

2.3 点击组件按钮添加元素到表单中

此时我们需要完成一个页面效果，该效果需要我们点击左侧添加表单选项中的组件添加按钮，随后点击的组件添加按钮会响应一个事件，该事件会将需要添加的元素添加至动态添加区中。

需要实现这个效果需要创建一个一维数组变量，我们在该页面中创建一个一维数组变量，命名为动态添加内容次序：

在此我们设定，单行文本的数字标记为 1、多行文本的数字标记为 2、数字文本的数字标记为 3、日期的数字标记为 4 以此类推。我们首先在添加的内容列中创建 3 个行，一个行命名为表单内容，用于包裹其他两个行，其他两个行命名为标题与组件内容；接着我们再到标题行下创建两个内容行，一个命名为右侧显示，另一个命名为左侧显示，左侧显示用于显示标题内容、右侧显示用于操作标题栏进行设置，组件内容则是动态添加的组件内容：

接着先添加标题栏内容，在左侧和右侧显示中添加如下图所示组件：

在此需要注意，设置标题内容输入框默认情况下为隐藏，此时页面呈现效果如下：

接着在组件内容列下添加一个 if 判断，在 if 判断下添加一个输入框组件，输入框组件设置属性为单行，也就是默认设置：

此时我们添加一个 for 循环组件至添加的内容列之下，命名为创建动态添加的元素，随后将表单内容添加至该 for 循环之下：

接着我们设置创建动态添加的元素循环的数据来源，为动态添加内容次序一维数组：

我们回到判断单行组件的属性中，设置条件为当前数据等于 1 则创建当行文本：

此时只需要给这个动态添加的内容次序进行值的添加，那么就可以通过循环遍历该数组完成指定组件的创建。我们找到添加表单选项中的单行文本，给该按钮设置一个点击事件，需要操作的对象为动态添加的内容次序数组，为其插入一个值，该值就是单行文本的标记 1，插入位置为当前元素个数的加一位置，此时就可以按照顺序往下添加数组内容：

设定了该操作后，即可通过点击单行文本按钮进行单行文本按钮的添加：

完成该功能的逻辑为：点击单行文本按钮为一维数组中添加标记，随后循环进行遍历，若其中的存储内容为 1 则可以进行对应组件的显示。

接着我们往其他添加按钮中添加事件，例如多行文本的标记值为 2，我们在其中添加事件为往次序数组中添加标记值为 2，在该数组末尾进行添加：

其他按钮的事件添加方式类似，在此不再赘述，只需要修改对应的标记值即可。接下来我们在组件内容中添加对应的 if 判断，就可以为其完成对应的组件创建：

此时还需要完成一步，设置标题栏右侧显示的序号文本绑定为循环的序号：

呈现效果如下：

2.4 编辑组件标题与删除添加的组件

在组件内容的标题栏中，我们可以点击标题右侧的编辑按钮编辑该标题内容：

我们在此小点中，需要完成点击该标题显示文本编辑框的功能编写。点击编辑按钮后可编辑该行的标题文本内容，并且隐藏编辑按钮、显示保存按钮；随后编辑完毕后点击保存按钮可对该行标题文本进行保存。

此时在右侧显示中创建一个保存按钮并且设置初始状态为隐藏：

随后为编辑按钮创建一个事件点击时触发，将输入框、保存按钮显示，单行文本标题与当前编辑按钮进行隐藏：

接着我们创建一个一维数组用于标题显示，命名为动态插入的组件标题。我们将标题的单行文本内容绑定为动态插入的组件标题对应的序号位置内容：

接下来我们为了使动态插入的组件标题数组的排列与次序数组保持一致，我们在添加的时候也需要为其添加一个标题插入到动态插入的组件标题之中。在此以单行文本为例：

通过同时设置值的方式可以使两个数组保持一致的内容。我们此时为保存按钮添加事件，该事件将会显示编辑、文本标题组件，隐藏输入框、保存按钮，并且修改动态插入的数组标题内容，修改的位置为当前循环的序号位置，修改的内容则为输入文本框中的标题内容：

此时我们预览页面后点击编辑按钮即可编辑：

接着我们为删除按钮添加点击事件，点击删除后即可完成删除不需要的组件。由于次序数组与标题数组两者对应，删除其中一个元素会导致两者数据不匹配；此时我们在删除内容时需要两者都同时进行删除，在这里使用当前序号作为删除位置索引即可同时删除元素内容：

完成事件编写后，在页面中添加数据后点击删除即可完成呈现元素的内容剔除。

2.5 保存添加组件的内容

保存添加的组件内容需要再创建一个一维数组变量，在此命名为动态插入的组件内容。为了数据保持匹配，我们在添加一个组件时为其添加默认内容，在此以 null 作为默认值进行添加，此时以添加文本组件时为其添加进行添加值的操作：

随后为组件内容改变的事件，以单行文本为例：

为其添加输入改变事件，其他组件事件或为日期更改、选中更改，设置方式类似在此不再赘述：

2.6 动态更改组件的属性

此时我们在属性栏列中添加两个行，一个命名为选中的序号栏，另一个命名为背景色栏。背景色栏用于更改当前某一动态添加的组件的背景色（调色板位于扩展组件中），序号栏用于提示当前选中的时哪一行动态添加的组件栏：

接下来我们为表单内容添加一个事件，当点击该表单内容将会记录此行的序号。在此之前需要创建一个变量用于记录点击的序号：

接着在表单内容事件中设置事件点击触发，在动作之中选择属性更改选中序号变量赋值，值的内容为当前序号：

随后我们设置属性栏中的序号文本数据绑定为选中序号变量：

在正式动态更改数据添加的组件属性前，我们需要创建一个对象数组，设置该对象数组的列名为背景色与下拉菜单选项：

对象数组与之前创建的一维数组一样，需要保持对应的匹配次序，我们依旧在添加组件时为其赋予默认值；在此需要注意的是，一定要将内容添加至当前对象数组中的末尾，否则将会不匹配：

随后我们在表单内容行中设置背景属性值为组件属性对象数组的某一行的某个值：

接下来设置行号为当前序号：

字段名在单引号中输入背景色即可：

接下来为调色板添加事件，当调色板颜色改变时触发，选择对象属性设置行为当前选中序号，列为背景色，所更改的颜色则为选中的颜色：

随后预览选中需要更改背景色的行，此时点击调色板将会改变其背景色：

接下来还需为下拉菜单更改其下拉选项，该选项需要我们动态指定。下拉菜单我们规定标记数字为 5，当选中序列的数字为 5 时我们将会显示。首先我们在属性栏下添加一个 if 判断，在 if 判断下添加一个行名为下拉菜单，在其内部添加一个文本作为提示、一个输入框作为选项填入、一个按钮作为输入框输入内容的提交：

页面中呈现效果如下：

接着我们在当前界面下创建一个数值文本，用于判断是否是下拉菜单，默认为0，若选中的组件为下拉菜单那么该值将会为 1：

那么此时在 if 判断中应该判断是否下拉选项这个变量的值为 1，为 1 时则显示下拉选项添加页面元素：

接着我们回到表单内容事件面板中，在其添加条件，判断当前点击的序号在次序数组中为几，若为下拉菜单的标记 5，那么则设置是否下拉选项变量值为 1，否则为 0：

此时动态添加下拉菜单作为表单内容，点击一个下拉菜单将会在右侧属性改变内容中出现下拉菜单选项添加元素：

接下来则需要为提交按钮添加事件，将输入的选项添加到下拉菜单之中。点击提交为其添加事件：

此时事件的更改方式与添加背景色类似，但是由于下拉菜单选项会有多个值，此时还需添加一个一维数组，在此命名这个一维数组为下拉菜单内容：

我们首先在提交按钮中为这个下拉菜单内容进行赋值：

随后设置组件属性对象数组的某个值，该值的行为选中的序号、列为下拉菜单选项、值则为下拉菜单的内容：

接下来我们为下拉菜单为其绑定选项内容，设置选项内容为组件属性的某一行某一列：

随后设置行号为当前序号值，字段名为下拉菜单选项即可：

此时即可完成下拉菜单值的自定义操作：

最后我们再为其添加一个文本用于标题输入即可：

2.7 动态生成的表单保存

此时我们已经可以进行动态表单的创建，接下来需要进行表单的发布。表单的发布需要保存在数据库之中，我们创建一数据库命名为表单数据库：

为其创建组件次序、组件标题、组件内容、组件属性、为Json数据，表格标题、记录数、删除字段为一般数据：

随后我们创建一个服务，叫做编辑表单数据存入数据库，该服务接受组件标题、组件内容、组件次序、表单标题、组件属性这几个参数：

随后将需要对应赋值的字段进行标齐，并且给与记录数与删除字段一个默认值为 0：

最后设置其返回结果：

接着为动态添加页面的保存按钮设置事件，点击按钮后选择刚刚所创建的提交服务，设置好我们已有的数据内容进行提交：

此时我们预览界面，设置好内容后提交成功将会出现提示：

此时查看数据库，则会发现其中已有数据记录：

三、表单浏览页制作及功能编写

表单浏览页用于用户浏览未关闭（删除）的表单，查看表单可进行内容的编写。表单浏览界面制作很简单，在此不再赘述只讲解核心内容：

在本应用中，所有界面的基本元素一致，设置与其他页面相同的元素后即可完成标题栏的制作，随后设置页面的水平对齐为居中即可完成。

在该页面中需要在扩展组件中添加分页组件，添加完毕后使用行进行居中即可，该页面的对象树如下：

3.1 添加表单获取服务

表单获取需要创建服务，由于表单数据量可能过大，在此需要在进行数据获取的时候实现分页。创建一个服务命名为分页获取表单信息：

此服务需要接收一个参数页数，类型为数字用于进行分页计算：

此时在服务中选择表单数据库对象进行输出，筛选条件需要设置为删除字段值为 0 的数据，若为 1 则表示已删除或已停止收集填写数据：

随后在输出行数中需要设置一个数量范围，例如第 0 条到第 14 条、第 14 条到 28 条、第 28 条到 32 条，我们可以发现公式可以写成每页显示的条数 （页数-1）× 每页显示条数 到 页数 × 条数 这个范围，若每页显示 14 条数据，那么就可以在数据库中行数中写成：

此时我们需要显示最新的数据，那么再把 ID 创建时间设置为降序即可：

最后设置输出结果即可：

首先创建一个通用变量命名为分页数据，用于接收服务传递过来的数据：

接着给页面添加一个事件，该事件显示时触发，触发后默认显示第一页，并且将结果赋予给分页数据变量：

接着我们为需要显示的文本绑定数据，此处以创建时间为例，将数据绑定为循环创建时的创建时间列内容：

随后预览该页内容，内容将会显示在页面中：

接下来为分页添加点击事件，当点击分页页数后调用分页数据获取服务，传递当前页面页码作为参数，将返回结果赋值给分页数据，那么即可实现分页：

四、表单填写页功能编写

表单填写页用于表单内容填写，其功能与动态生成页面实现类似，均是通过数组进行循环创建并且绑定数组内容，在此是通过传入一个数据ID，由该ID作为查询条件，从数据库进行获取，将数据剥离后即可完成内容的显示；最终实现数据提交即可。

首先我们查看该页面：

其页面主要内容与动态添加内容类似，对象树内容可以从动态添加内容页复制到此页面中进行少量修改即可：

4.1 创建表单内容获取服务

首先创建一个服务命名为获取具体表单数据：

在此设置接收参数为 ID：

接着从表单数据库中进行数据获取，设置条件为数据ID等于传入的参数 ID 即可：

最后设置返回结果：

4.2 为页面添加数据获取

创建完服务后我们为页面添加事件对服务进行调用，此时我们用固定的 ID 值查询数据库中的内容（读者可以查看自己数据的ID值进行设定），随后创建一个通用变量表单内容，为其赋值为返回结果，并且查看表单内容变量内容：

此时我们浏览该页面，然后按 F12 在 console 中可以看到数据结构：

此时我们发现数据前面有一个序号，我们可以在赋值时通过自定义路径获取内容，这样可以获取到数据。新建一个通用变量叫做数据库查询结果，设置该值为表单内容的自定义路径为 0，并且进行数据显示：

此时从结果中可以看到已经消除了序号内容：

接着我们创建组件内容、组件标题、组件次序这 3 个一维数组以及一个对象数组类型的组件属性，并且为其赋值。为了更好的进行操作，我们在数据库查询结果变量中点击添加根节点，创建几个节点：

创建节点后将会非常方便赋值：

此时我们预览页面，将会出现我们动态添加的结果：

4.3 提交填写数据

页面生成完后我们填写内容后需要对数据进行提交，此时我们与动态表单生成时操作一致，当元素内容改变时进行数组内的数据更改，由于从动态添加表单页复制到当前界面，此功能已存在并不需要改动，我们直接为提交按钮添加事件即可。

需要完成提交数据存入数据库，需要再新建一个保存提交数据的数据库，命名为已填写表单：

随后为其增加 组件次序、组件标题、组件内容、父表ID字段。这些字段所存储的内容我们已经存在，我们只需要直接进行提交即可；父表ID字段为传递过来获取表单的ID，此时我们固定数值为 9 即可，之后再进行统一更改。

接下来创建一个服务为已填写表单提交数据，接收的参数为 组件次序、组件标题、组件内容、父表ID：

随后进行常规的数据提交，并且增加一个动作，以父表 ID 为条件，更新表单数据库的当前表单的记录数加 1：

最后给提交按钮添加提交事件：

预览页面进行内容提交后将会在已填写表单数据库中看到具体内容：

最后在前台页面下创建一个变量用于记录点击的父表内容：

当我们点击填写按钮时，将会设置该变量的值为当前点击表单的ID文本内容：

给该填写按钮增加事件：

最后我们在具体表单显示页中，设置启动服务传入的ID为变量查看的表单ID变量值：

五、自己创建的表单页及结束页功能编写

自己创建的表单页主要用于显示当前用户所创建的表单内容查看，进行删除（停止收集）、数据下载等操作。在此页面布局不再讲解，主要讲解功能如何实现，首先查看该页面的页面：

5.1 为所有页面添加登录前置

为了查看自己创建的表单，首先该用户需要满足登录条件，在此为所有页面添加登录前置，否则无法进入登录界面外的其他界面。

我们回到登录页中，在之前创建了一个登录用户变量：

我们为其他页面增加一个判断，若当前变量为 0 则跳转到登录页，在此以编辑页为例，其他页面相同操作不再进行赘述：

随后为每个标题栏的按钮添加跳转：

5.2 获取自己创建的表单信息

接下来创建一个服务，命名为获取自己已填写表单信息：

该服务接受手机号作为参数：

随后用手机号对比提交用户做为条件查询数据，使用降序的方式进行数据输出且删除字段不能等于 1：

随后在自己创建的表单页中添加事件获取该服务，创建获取的数据库数据变量作为数据接收：

随后使用循环创建即可完成数据显示。

5.3 结束表单的服务编写

在此只讲解结束表单的填写，其他内容高度相似不再赘述。

结束表单按钮只需要设置当前 ID 的数据表的删除字段为 1 即可，在此创建一个服务名为结束表单：

该服务接收 2 个参数，一个名为 ID 另一个名为当前用户：

随后在使用表单数据库进行查找，数据ID 与提交用户一致的情况下更改删除字段为 1：

最后返回是否成功即可：

5.4 结束表单页的功能编写

我们再创建一个已结束表单页，该页可以下载表单统计数据：

该页面与自己的表单页的区别在于功能按钮的不同，在结束表单页中可以下载统计的填写数据。

此时创建一个服务为已结束表单，接收一个参数为当前用户，通过当前用户查找该用户已经停止填写的表单数据：

随后为已结束表单页添加一个显示事件，显示时获取当前用户已结束填写的表单，创建一个已结束表单通用变量接收：

之后使用已结束表单为循环创建作为数据来源即可。

5.5 结束按钮设置功能

此时我们返回自己的表单页，为结束按钮添加事件：

党我们点击结束后将会跳转到结束页：

我们可以填写一张问卷，然后下载其统计数据。

5.6 下载统计记录Excel文件功能编写

需要记录已填写的数据，我们需要创建一个服务命名为已结束表单填写数据。这个服务接收一个参数为父表ID，为其在已填写的数据库已填写表单中查找对应的填写信息：

随后我们将父表ID与父表ID相等作为条件进行查找，并且输出的内容只有标题和内容：

创建好服务后我们在当前页面中添加一个 Excel 组件：

点击下载统计数据为其添加事件，并且新建一个二维数组命名为已结束表单数据，将其作为Excel组件导出的数据来源：

最后预览，点击导出按钮即可自动下载Excel表格：