# 步骤五：开发调查问卷提交成功页面 1. 创建调查问卷提交成功页面。 1. 在应用设计器的左侧导航栏中，选择"界面"，单击页面后的"+"，进入添加标准页面。 2. 设置页面的标签和名称，单击"添加"，即可创建一个标准页面。 图1添加标准页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384895613.png "点击放大") 表1新建标准页面参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1\~64个字符。 | 提交成功 | | 名称 | 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： - 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 | questionnaire_submitPage | 3. 设置页面属性。 鼠标单击页面空白处，在"属性 \> 样式 \> 布局"中设置上内边距为"100"，下内边距为"100"，打开"高级设置"在样式源码中，添加"text-align: center;"，目的是为了让组件居中显示。 图2设置页面属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385056405.png "点击放大") 2. 添加图标。 1. 从"基本组件 \> 基本"中，拖拽"图标"组件至页面设计区。 图3添加图标组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351177084.png "点击放大") 2. 选中图标组件，设置图标大小为"70"，单击图标选择框，在"其他"中搜索"circ"，选择"checkmark-circled"，单击"确认"，颜色设置为"#4A90E2"。 图4设置图标基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351178588.png "点击放大") 图5选择图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385063485.png "点击放大") 3. 添加标题。 1. 从"基本组件 \> 基本"中，拖拽"标题"组件到图标组件下方。 图6添加标题组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351179436.png "点击放大") 2. 选中标题组件，设置标题内容为"提交成功"，在"样式 \> 布局"中设置内边距上、右、下、左分别为"10"、"20"、"10"和"20"，字体大小设置为"26px"。 图7设置标题组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384900489.png "点击放大") 4. 添加继续提交按钮。 1. 从"基本组件 \> 基本"中，拖拽"按钮"组件至页面工作区到标题组件下方。 图8添加继续提交按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351180428.png "点击放大") 2. 单击按钮左侧的空白区域，选中容器组件，在"属性 \> 基本属性"中设置水平对齐方式为"中"。 图9设置容器组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351180804.png "点击放大") 3. 选中按钮组件，设置文本内容为"继续提交"，类型选择"默认按钮"，大小选择"默认"。 图10设置按钮组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351181008.png "点击放大") 4. 在"事件"页签，单击"点击"后的"+"，进入添加动作页面。 5. 在"自定义动作"中，输入自定义JS代码，单击"创建"。 ``` /** * 获取URL的路径参数和查询参数 * * 示例URL：/{pageId}/{itemId}?demo=demo */ let pageName = context.$page.params.page; let recordId = context.$page.params.recordId context.$page.loadStdPage(pageName) ``` 5. 添加查看详情按钮。 1. 从"基本组件 \> 基本"中，拖拽"按钮"组件到继续提交按钮后方。 图11添加查看详情按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351341336.png "点击放大") 2. 选中按钮组件，设置文本内容为"查看详情"，类型选择"默认按钮"，大小选择"默认"。 图12设置按钮基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351341752.png "点击放大") 3. 在"事件"页签中，单击"点击"后的"+"，进入添加动作页面。 4. 在"自定义动作"中，输入自定义JS代码，单击"创建"。 ``` let pageName = context.$page.params.page; let recordId = context.$page.params.recordId let queryString="recordId="+recordId; context.$page.openStdPage(pageName,queryString) ``` 6. 返回[步骤四：开发调查问卷页面](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0080.html)页面，更新[14.d](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0080.html#astrozero_bestpractice_0080__li1318757191520)中的调查问卷提交脚本。 在原先脚本中，添加如下代码。其中，"命名空间__questionnaire_submitPage"为问卷提交成功页面的名称。 ``` context.$page.loadStdPage("命名空间__questionnaire_submitPage", queryParam); ``` 7. 设置页面加载事件。 1. 单击页面空白处，在"事件"页签中，单击"加载"后的"+"，进入添加动作页面。 2. 在"自定义动作"中，输入如下代码，单击"创建"。 ``` function parseJSON(str) { var flag = false; try { JSON.parse(str); flag = true } catch (err) { flag = false; } return flag; } var recordId = context.$page.params.recordId; if (recordId) { // 获取Object对象 var _object = context.object('命名空间__questionaireRecord__CST'); // 查询满足条件数据 var _condition = { conjunction: 'AND', conditions: [{ field: 'id', operator: 'eq', value: recordId }] }; _object.query(_condition).then(function (res) { if (res.resCode == 0) { var result = res.result; if (result && result.length > 0) { var data = result[0]; try { for (var item in data) { if (data[item] && parseJSON(data[item])) { data[item] = JSON.parse(data[item]); } } } catch (err) { console.log(err) } $model.ref("formData").setData(data); $model.ref("editFlag").setData(true); } } }); } ``` 其中，"命名空间__questionaireRecord__CST"为[步骤三：添加调查表记录对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0079.html)中创建对象的名称。 8. 验证页面是否能正常跳转。 1. 返回"调查问卷"页面，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351443932.png)，进入调查问卷预览页面。 2. 在调查问卷预览页面，填写问卷，单击"提交"，成功跳转到[图13]中页面，说明页面跳转正常。 在提交成功页面，单击"继续提交"按钮时，同样能正常跳转到"调查问卷应用"填写页面。 思考：单击"查看详情"按钮时，正常跳转到"调查问卷应用"页面，但是发现该页面是可以编辑内容的，这与查看详情功能不符，接下来我们将继续完善该功能。 图13进入提交成功页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385006261.png)