开发调查问卷标准页面实例

本节将通过开发一个“调查问卷”应用页面用来演示标准页面的基本功能，页面完成 后如图5-7所示。

图5-7 调查问卷应用效果

步骤1 创建一个自定义对象“Questionnaire”。

创建“Questionnaire”对象，在对象内新建7个文本类型的自定义字段

“questionCode0”~“questionCode6”，创建自定义对象及字段的相关内容请参考

3.1 了解对象模型。

创建的自定义对象是用来保存“调查问卷”中用户填写的信息，并在这个对象下用不 同字段来记录“调查问卷”中每一个问题用户填写的内容。

步骤2 创建应用页面。

单击“Page”文件夹右侧 ，选择“标准页面”。在弹窗中输入页面的“标签”、

“名称”为“Questionnaires_questionnairePage”。

图5-8 创建标准页面

步骤3 选中“页面”标签，在右侧配置面板“样式”“布局”下为页面左右各设置“15%”

和“18%”的内边距。

图5-9 页面设置内边距

步骤4 拖拽“表单”组件到中间面板，并做如下操作。

1. 在左侧面板“组件”页签中，在“布局”分栏中，鼠标左键将“表单”组件拖拽 到中间面板中。

图5-10 添加“表单”组件

2. 在右侧弹出的“元数据表单配置向导”中，选中刚才创建的对象

“Questionnaires__CST”，并勾选创建的自定义字段，单击“下一步”。

图5-11 配置表单元数据

3. 选中表单按钮，单击“完成”。

图5-12 配置表单功能

完成后应用界面应如图5-13所示。

图5-13 添加表单组件后页面样式

4. 设置“表单”组件样式“字体”为“16px”下外边距为“20px”。

图5-14 设置“表单”组件样式

5. 当前页面未使用“分栏”组件，因此删除表单组件中所有的“分栏”组件，只保 留包含按钮组件的“容器”组件。

图5-15 容器组件

步骤5 在左侧面板中将“标题”组件拖至中间面板“容器”组件上方。

图5-16 添加“标题”组件

1. 选中“标题”组件，在右侧边板“基本属性”“标题内容”中输入调查问卷标题

“应用魔方AppCube开发者调查问卷”。

2. 在右侧面板“样式”、“字体”下配置标题的字体样式，将字体大小设置为

“28px”，颜色设置为“147AEC”，并设置居中样式。

图5-17 设置标题样式

设置后，效果如图5-18所示。

图5-18 配置完标题组件后

步骤6 在左侧面板中将“图片”组件拖至中间面板“标题”组件下方，并在右侧边板设置图 片地址（/besBaas/images/banner.png），设置图片高度为“165px”，宽度为

“100%”。

图5-19 将“图片”组件拖至中间面板

图5-20 设置图片地址

图5-21 设置图片样式

步骤7 在左侧面板中将“标题”组件拖至中间面板“图片”组件下方。

图5-22 将“标题”组件拖至中间面板

在右侧边板设置标题内容，如“为了持续提高您的开发体验，为您提供更好的开发平 台，特邀您花几分钟反馈问卷，您的支持是我们最大的动力，衷心感谢您，祝开心每 一天！”。

设置上外边距“12px”，下外边距“24px”，内边距上右下左分别设置为“10px 20px 10px 12px”，字体大小“16px”，行高“28px”，颜色“#333333”。

图5-23 设置标题内容

图5-24 设置标题样式

步骤8 在左侧面板中将“下拉框”组件拖至中间面板“标题”组件下方。

图5-25 将“下拉框”组件拖至中间面板

1. 在右侧边板“数据绑定”分栏单击右侧齿轮按钮，选择表单数据绑定的对象

“form_1”下的自定义字段“questionCode0__CST”。

图5-26 数据绑定

2. 在右侧边板“基本属性”分栏设置标签“1.您的工作类型？”，并设置选项“设 计类”“开发类”“产品类”“运营类”“其他”，并勾选“可清空”“可过 滤”和“必填”项。

图5-27 配置基本属性

步骤9 在左侧面板中将“单选按钮”组件拖至中间面板“下拉框”组件下方。

图5-28 将“单选按钮”组件拖至中间面板

1. 在右侧边板“数据绑定”分栏单击右侧齿轮按钮，选择表单数据绑定的对象

“form_1”下的自定义字段“questionCode1__CST”。

图5-29 数据绑定

2. 在右侧边板“基本属性”分栏设置标签“2.您觉得平台的体验流畅吗？”，并设 置选项“非常流畅”“一般流畅”“不太流畅”并勾选“必填”。

图5-30 属性配置

步骤10 在左侧面板中将“单选按钮”组件拖至中间面板“单选按钮”组件下方。

图5-31 将“单选按钮”组件拖至中间面板

1. 在右侧边板“数据绑定”分栏单击右侧齿轮按钮，选择表单数据绑定的对象

“form_1”下的自定义字段“questionCode2__CST”。

图5-32 数据绑定

2. 在右侧边板“基本属性”分栏设置标签“3.您在开发过程中要困难，能否获取有 效的文档/帮助？”，并设置选项“非常有帮助”、“一般”“没有帮助”并勾选

“必填”。

图5-33 属性配置

步骤11 在左侧面板中将“复选按钮”组件拖至中间面板“单选按钮”组件下方。

图5-34 将“复选按钮”组件拖至中间面板

1. 在右侧边板“数据绑定”分栏单击右侧齿轮按钮，选择表单数据绑定的对象

“form_1”下的自定义字段“questionCode3__CST”。

图5-35 数据绑定

2. 在右侧边板“基本属性”分栏设置标签“4.您是从哪个途径知道数字平台 的？”，并设置选项“内部搜索”“别人介绍”“听过培训”“其他途径”并勾 选“必填”。

图5-36 属性配置

步骤12 在左侧面板中将“多行输入框”组件拖至中间面板“复选按钮”组件下方。

图5-37 将“多行输入框”组件拖至中间面板

1. 在右侧边板“数据绑定”分栏单击右侧齿轮按钮，选择表单数据绑定的对象

“form_1”下的自定义字段“questionCode4__CST”。

图5-38 数据绑定

2. 在右侧边板“基本属性”分栏设置标签“5.您觉得AppCube给您带来的最大价值 是什么？相比其他同类产品，您为什么选择AppCube？”，并设置最大字符长度

“256”。

图5-39 属性配置

步骤13 在左侧面板中将“多行输入框”组件拖至中间面板“多行输入框”组件下方。

图5-40 将“多行输入框”组件拖至中间面板

1. 在右侧边板“数据绑定”分栏单击右侧齿轮按钮，选择表单数据绑定的对象

“form_1”下的自定义字段“questionCode5__CST”。

图5-41 数据绑定

2. 在右侧边板“基本属性”分栏设置标签“6.您想对AppCube说点什么？可以是优 点也可以是缺点还可以是对AppCube的期许。”，并设置最大字符长度

“256”。

图5-42 属性配置

步骤14 在左侧面板中将“评分”组件拖至中间面板“多行输入框”组件下方。

图5-43 将“评分”组件拖至中间面板

1. 在右侧边板“数据绑定”分栏单击右侧齿轮按钮，选择表单数据绑定的对象

“form_1”下的自定义字段“questionCode6__CST”。

图5-44 数据绑定

2. 在右侧边板“基本属性”分栏设置标签“7.您对平台的综合评分？”，并设置星 星总数“5”。

图5-45 设置属性

步骤15 选中“容器”中的“保存”按钮做如下设置。

1. 在“基本属性”中，设置显示名称“提交”。

图5-46 属性配置

2. 在右侧边板“事件”页签下“点击”右侧加号按钮。

图5-47 事件配置

3. 在“添加动作”页面，选择“自定义动作”，输入自定义JS代码，单击“创 建”。

如下JS代码仅为示例，请根据实际情况修改示例中表单名称（form_0）和字段名 称（data.name）。更多自定义JS脚本介绍，请参见如何通过JS代码实现页面与后 台接口间的交互。

let data = $model.ref("form_0").getData();

//一些特殊字段数据处理

data.name = data.name.join(";");

// 提交表单

var _form = context.$component.form;

_form.formSave();

图5-48 配置 JS 代码

“调查问卷”主页面完成，效果如下：

图5-49 “调查问卷”主页面

步骤16 测试“调查问卷”页面应用实例：填写“调查问卷”并单击提交。

图5-50 模拟填写调查问卷

在应用开发工作台的导航菜单上，单击 ，即可进入数据调试页面，您可以在数据调 试页面输入sql语句查询创建的“Questionnaire”对象，得到刚才填写的调查问卷数 据。

图5-51 控制台入口

图5-52 调查问卷数据已存入对象

----结束