步骤四：开发调查问卷页面

创建调查问卷页面。

在应用设计器的左侧导航栏中，选择“界面”，单击页面后的“+”，进入添加标准页面。

设置页面的标签和名称，单击“添加”，即可创建一个标准页面。

图1 添加标准页面

表1 新建标准页面参数说明
参数	说明	示例
标签	输入标准页面的标签名，用于在页面显示，创建后可修改。取值范围：1~64个字符。	调查问卷
名称	输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下：长度不能超过64个字符，包括前缀命名空间的长度。名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。	questionnaire

添加表单组件并进行属性设置。
1. 从“基本组件 > 布局”中，拖拽表单组件到画布中。
  图2 添加表单组件
2. 选中表单组件，在“属性 > 样式 > 布局”中，将表单设置为“居中对齐”，“宽”设置为“800px”、“高”设置为“1022px”。
  图3 设置表单布局
3. 在“属性 > 样式 > 字体”中，设置字体大小为“16px”、上下间距为“23”。
  图4 设置表单字体
4. 在“属性 > 数据绑定 > 值绑定”中，单击，进入选择模型页面。
5. 单击“新增模型”，“模型名称”设置为“formData”，“来源”选择“对象”，单击“下一步”。
  图5 新建formData模型
6. 选择步骤三：添加调查表记录对象中创建的对象，勾选全部字段，单击“下一步”。
  图6 模型基本信息设置
7. 直接单击“确定”，返回选择模型页面，选择已创建的模型，单击“确定”。
  图7 选择已创建的模型
8. 在弹出的提示框中，单击“只绑定模型”，返回设计页面。
  图8 选择只绑定模型
添加大标题。
1. 从“基本组件 > 基本”中，拖拽标题组件到表单中间。
  图9 拖拽标题组件到表单中
2. 选择标题组件，设置标题内容为“调查问卷应用”，字体大小设置为“28px”、上下间距为“50”、位置为“center”、颜色为“#147AEC”。
  图10 设置标题组件基本属性和样式
添加图片组件。
1. 从“基本组件 > 基本”中，拖拽图片组件到标题组件下方。
  图11 添加图片组件
2. 选中图片组件，单击“图片地址”后的，选中一张图片，单击“确定”，图片的宽度设置为“100%”。
  在选择图片页面，您也可以单击“上传图片”，从本地选择一张图片上传。上传的图片必须为JPG、JPEG、PNG和GIF格式，且图片的大小不能超过1MB。
  图12 选择所需的图片
添加小标题。
1. 从“基本组件 > 基本”中，拖拽标题组件到图片组件下方。
  图13 添加标题组件到图片下方
2. 设置标题内容为“为了研究大学生就业形势，探讨如何完善各项指导，特做此次调查，希望您能把真实想法告诉我们！”，标题类型设置为“Heading 2”。
  图14 设置标题内容
添加标签。
1. 从“基本组件 > 表单”中，拖拽“输入框”组件至标题组件下方。
  图15 添加输入框组件到标题下方
2. 选择输入框组件，设置标签为“问卷标签”。
  图16 设置输入框标签
3. 在“属性 > 数据绑定 > 值绑定”中，单击，进入选择模型页面。
4. 在选择模型页面，选择formData模型中的“命名空间__Label__CST”字段，单击“确定”。
  图17 选择命名空间__Label__CST字段
添加问题1。
1. 从“基本组件 > 表单”中，拖拽“单选按钮”组件至输入框组件下方。
  图18 添加单选按钮组件
2. 选中单选按钮，设置标签为“1、您的性别是？”，选项为“男”和“女”，在表单校验中打开必填开关，设置必填错误信息为“请您选择性别”。
  图19 设置单选按钮基本属性
3. 在“属性 > 数据绑定 > 值绑定”中，单击，进入选择模型页面。
4. 在选择模型页面，选择formData模型中的“命名空间__questionCode1__CST”字段，单击“确定”。
  图20 选择“命名空间__questionCode1__CST”字段
添加问题2。
1. 从“基本组件 > 表单”中，拖拽“下拉框”组件到单选按钮下方。
  图21 添加下拉框组件
2. 选中下拉框组件，设置标签为“2、您的专业类型是？”，配置选项“机械类、电子信息类、计算机类、土木类、其他”，表单校验打开“必填”，设置必填错误信息为“请选择您的专业”。
  图22 设置下拉框组件的基本属性
  
  图23 设置表单校验
3. 在“属性 > 数据绑定 > 值绑定”中，单击，进入选择模型页面。
4. 在选择模型页面，选择formData模型中的“命名空间__questionCode2__CST”字段，单击“确定”。
  图24 选择“命名空间__questionCode2__CST”字段
添加问题3。
1. 从“基本组件 > 表单”中，拖拽“单选”组件到下拉框组件下方。
2. 选中单选组件，设置标签为“3、你进入毕业时期的去向？”，选项为“求职”、“考研”、“出国”、“创业”和“其他”，在表单校验中打开必填开关，必填错误信息设置为“请选择毕业时期的去向”。
  图25 设置下拉框组件的基本属性
3. 在“属性 > 数据绑定 > 值绑定”中，单击，进入选择模型页面。
4. 在选择模型页面，选择formData模型中的“命名空间__questionCode3__CST”字段，单击“确定”。
  图26 选择“命名空间__questionCode3__CST”字段
添加问题4。
1. 从“基本组件 > 表单”中，拖拽“复选按钮”到单选组件下方。
2. 选中复选按钮，设置标签为“4、就业时，下列哪些因素对你有影响？”，选项为“薪酬、保险福利、工作氛围环境、晋升空间、其他”，在表单校验中，打开必填开关，设置必填错误信息为“请选择就业因素影响”。
  图27 设置复选按钮的基本属性
3. 在“属性 > 数据绑定 > 值绑定”中，单击，进入选择模型页面。
4. 在选择模型页面，选择formData模型中的“命名空间__questionCode4__CST”字段，单击“确定”。
  图28 选择“命名空间__questionCode4__CST”字段
添加问题5。
1. 从“基本组件 > 表单”中，拖拽“评分”组件到复选按钮下方。
2. 选中评分组件，设置标签为“5、您的专业对您找工作的帮助评分？”，星星总数设置为“10”。
  图29 设置评分组件的基本属性
3. 在“属性 > 数据绑定 > 值绑定”中，单击，进入选择模型页面。
4. 在选择模型页面，选择formData模型中的“命名空间__questionCode5__CST”字段，单击“确定”。
  图30 选择“命名空间__questionCode5__CST”字段
添加问题6。
1. 从“基本组件 > 表单”中，拖拽“多行输入框”组件到评分组件下方。
2. 选中多行输入框组件，设置标签为“6、在日常实习，工作，生活中希望提升哪些方面的能力？”，打开“自适应高度”开关，设置最小行数为“2”、最大行数为“10”以及最大字符长度为“500”。
  图31 设置多行输入框的基本属性
3. 在“属性 > 数据绑定 > 值绑定”中，单击，进入选择模型页面。
4. 在选择模型页面，选择formData模型中的“命名空间__questionCode6__CST”字段，单击“确定”。
  图32 选择“命名空间__questionCode6__CST”字段
添加容器，即从“基本组件 > 布局”中，拖拽“容器”组件到多行输入框组件下方。

添加提交按钮。

从“基本组件 > 基本”中，拖拽“按钮”组件到容器组件中。
选中按钮组件，设置显示名称为“提交”，大小选择“默认”。
图33 设置按钮组件基本属性
在“事件”页签，单击“点击”后的“+”，进入添加动作页面。

在自定义动作中，输入如下代码，单击“创建”。

var _form = context.$component.form
// 校验表单，非promise，返回true/false
var validFlag = _form.formValidateUnPromise();
if (!validFlag) {
    return false;
}
//序列化表单
var model = context.$model.ref("formData").getData()
for (var item in model) {
    if (model[item] && typeof model[item] !== "string") {
        model[item] = JSON.stringify(model[item]);
    }
}
// 获取当前页面
var pageName = context.$page.params.pageName;
// 业务逻辑
context.$model.ref("formData").setData(model);
context.$model.ref("formData").save().then((data) => {
    if (data.resCode == 0) {
        var recordId = data.result[0] && data.result[0].id;
        // 在当前页签打开
        var queryParam = "recordId=" + recordId + "&page=" + pageName;
        //context.$page.loadStdPage("命名空间__questionnaire_submitPage", queryParam);
    }
})

其中，“formData”为2.e中创建的对象模型。

添加重置按钮。
1. 从“基本组件 > 基本”中，拖拽“按钮”组件到提交组件后方。
2. 选择按钮组件，设置显示名称为“重置”，类型选择“默认按钮”，大小选择“默认”。
  图34 设置按钮基本属性
3. 在“事件”页签，单击“点击”后的“+”，进入添加动作页面。
4. 在自定义动作中，输入如下代码，单击“创建”。
```
// 当前组件
let _component = context.getCurrentComponent()
// 当前Form
let  _form = _component.getForm()
_form.resetFields()
```
设计完成后，单击页面上方的，保存标准页面。
保存成功后，单击，预览标准页面，进行功能调试。
1. 在预览页面提交问卷，单击“提交”。
  图35 提交问卷
2. 在应用设计器的左侧导航栏中，选择“数据”。
3. 单击步骤三：添加调查表记录对象中创建的对象，在“数据”页签，可查看到提交的数据。
  图36 查看提交的数据