华为云Astro轻应用
华为云Astro轻应用
- 最新动态
- 功能总览
- 产品介绍
- 计费说明
- 快速入门
-
用户指南(低代码)
- AstroZero低代码使用流程
- 授权用户使用AstroZero并购买实例
- 添加AstroZero开发者用户
- 使用AstroZero创建应用
-
使用AstroZero开发应用后端
- 应用后端开发概述
- 对象
- 事件
- 脚本
-
服务编排
- AstroZero服务编排概述
- 创建空白AstroZero服务编排
- 定制已有AstroZero服务编排
-
为AstroZero服务编排设置图元
- 为AstroZero服务编排添加子服务编排图元
- 为AstroZero服务编排添加脚本图元
- 为AstroZero服务编排添加记录创建图元
- 为AstroZero服务编排添加记录删除图元
- 为AstroZero服务编排添加记录查询图元
- 为AstroZero服务编排添加记录更新图元
- 为AstroZero服务编排添加发送邮件图元
- 为AstroZero服务编排添加发送事件图元
- 为AstroZero服务编排添加赋值图元
- 为AstroZero服务编排添加循环图元
- 为AstroZero服务编排添加跳出循环图元
- 为AstroZero服务编排添加决策图元
- 为AstroZero服务编排添加等待图元
- 为AstroZero服务编排添加BO图元
- 为AstroZero服务编排添加连接器图元
- 为AstroZero服务编排添加生成文档图元
- 管理AstroZero服务编排
- 自定义AstroZero服务编排的URL
- 触发器
- 工作流
- 定时任务
-
使用AstroZero开发应用前端
- 应用前端开发概述
-
标准页面
- AstroZero标准页面概述
- 创建空白AstroZero标准页面
- 使用模板创建AstroZero标准页面
- 为AstroZero标准页面添加组件
-
设置AstroZero标准页面组件属性
- 设置AstroZero标准页面容器组件属性
- 设置AstroZero标准页面表单组件属性
- 设置AstroZero标准页面表格组件属性
- 设置AstroZero标准页面分栏组件属性
- 设置AstroZero标准页面栅格容器组件属性
- 设置AstroZero标准页面列表视图组件属性
- 设置AstroZero标准页面表格(新)组件属性
- 设置AstroZero标准页面图片组件属性
- 设置AstroZero标准页面二维码组件属性
- 设置AstroZero标准页面分页组件属性
- 设置AstroZero标准页面模态框组件
- 设置AstroZero标准页面输入框组件属性
- 设置AstroZero标准页面下拉框组件属性
- 设置AstroZero标准页面按钮组件属性
- 设置AstroZero标准页面上传组件属性
- 设置AstroZero标准页面面包屑组件属性
- 设置AstroZero标准页面视频播放组件属性
- 添加事件实现AstroZero组件间交互
- 添加库扩展AstroZero标准页面功能
- 查看AstroZero标准页面性能
- 调测AstroZero标准页面
- 将AstroZero标准页面保存为模板
- 管理AstroZero标准页面
-
高级页面
- AstroZero高级页面概述
- 创建AstroZero高级页面
- 为AstroZero高级页面添加组件
-
设置AstroZero高级页面预置组件属性
- 设置AstroZero高级页面轮播组件属性
- 设置AstroZero高级页面图片组件属性
- 设置AstroZero高级页面文本编辑组件属性
- 设置AstroZero高级页面自定义背景框组件属性
- 设置AstroZero高级页面基本柱图组件属性
- 设置AstroZero高级页面基本折线图组件属性
- 设置AstroZero高级页面基本饼图组件属性
- 设置AstroZero高级页面水位图组件属性
- 设置AstroZero高级页面散点图组件属性
- 设置AstroZero高级页面雷达图组件属性
- 设置AstroZero高级页面仪表盘组件属性
- 设置AstroZero高级页面翻牌器组件属性
- 设置AstroZero高级页面路由导航和路由视图组件属性
- 为AstroZero高级页面添加自定义组件
- 为AstroZero高级页面组件绑定数据
- 添加事件或宏实现AstroZero高级页面组件交互
- 调测AstroZero高级页面
- 查看AstroZero高级页面性能
- 管理AstroZero高级页面
- 报表
- 使用AstroZero进行应用集成开发
- 使用AstroZero对应用进行个性化设置
- 发布并部署AstroZero开发的应用
- 管理AstroZero中已安装的应用
- AstroZero低代码平台管理中心
-
经典版开发指导
- 经典版入门必读
- 应用
- 对象
- 标准页面
- 高级页面
- 服务编排
- 脚本开发
- BPM服务编排
- API接口
- 集成开发
- 消息事件
- 触发器
- 报表和仪表板
- CICD持续集成与交付
- 服务组件(BO)
- 调测能力
- 工程能力
- 原生服务
- 其他功能
- 管理中心
- 白名单特性
- 用户指南(零代码)
- 最佳实践
- API参考
-
常见问题
- 高频常见问题
- 产品咨询类
-
应用后端开发
- 如何区分不同账户间的数据库对象?
- 在AstroZero对象中删除字段后重新创建时,引用的地方报错
- 如何刷新AstroZero对象的页面布局?
- 如何彻底删除AstroZero应用目录树中的数据?
- AstroZero自定义对象预置的owner字段,用于记录什么用户?
- AstroZero脚本支持使用哪些语言和库?
- 在AstroZero脚本中执行sql语句时,可以不用@useObject修饰数据对象吗?
- 在AstroZero脚本中,如何返回zip压缩文件内容?
- 如何通过AstroZero脚本,导出xls文件让用户下载?
- AstroZero脚本中是否支持multipart/form-data请求?
- AstroZero服务编排中涉及数据操作的脚本图元,在其他图元操作失败的情况下,是否可以回滚?
- 事件触发的AstroZero服务编排,发送事件后,服务编排没有运行?
- 在AstroZero服务编排或工作流中,引用的资源无法编辑
- 如何实现一个资源被多个AstroZero应用的服务编排调用?
- 在AstroZero服务编排中,支持跨应用引用资源吗?
- 在AstroZero服务编排、工作流或脚本中,邮件发送功能不可用?
- AstroZero开发者如何使用自己的邮箱发送邮件?
-
应用前端开发
- 在AstroZero标准页面中,如何调用服务编排或脚本?
- 在AstroZero标准页面组件较多时,如何快速选中组件?
- 表格字段太多,导致AstroZero标准页面无法完整显示,该如何处理?
- 在AstroZero标准页面中,如何实现有子表的表格?
- 在AstroZero标准页面中,如何实现下拉框选项值的筛选功能?
- 在AstroZero标准页面中,如何实现移动端上拉异步加载数据功能?
- 如何查看AstroZero标准页面的URL格式?
- 在AstroZero标准页面弹窗的onOk事件中,不想关闭弹窗该怎么处理?
- 在AstroZero中编排高级页面时,如何实现不加载组件库资源?
- 在AstroZero中自定义高级页面组件(widget)时,修改了JS文件,修改部分不生效?
- 在AstroZero组件库中,部分组件在组件详情页看不到更新和编辑入口
- 在AstroZero高级页面中,如何进行统一的HTTP状态拦截?
- 配置高级页面组件桥接器实例属性时,如何设置下拉框中的选项值?
- 在AstroZero高级页面中,如何实现所有组件都加载完成后,再执行某段逻辑?
- 在AstroZero中,如何实现多人协作开发?
- 在AstroZero运行环境中,如何实现游客访问标准页面?
- 应用发布与部署
- Astro轻应用平台管理中心
- 视频帮助
- 文档下载
- 通用参考
本文导读
展开导读
链接复制成功!
开发调查问卷标准页面示例
本节将通过开发一个“调查问卷”应用页面用来演示标准页面的基本功能,页面完成后如图1所示。
- 创建一个自定义对象“Questionnaire”。
创建“Questionnaire”对象,在对象内新建7个文本类型的自定义字段“questionCode0”~“questionCode6”,创建自定义对象及字段的相关内容请参考3.1 了解对象模型。
创建的自定义对象是用来保存“调查问卷”中用户填写的信息,并在这个对象下用不同字段来记录“调查问卷”中每一个问题用户填写的内容。
- 创建应用页面。
单击“Page”文件夹右侧的
,选择“标准页面”。在弹窗中输入页面的“标签”、“名称”为“Questionnaires_questionnairePage”。
图2 选择标准页面图3 添加标准页面 - 选中“页面”标签,在右侧配置面板“样式 > 布局”下,为页面左右各设置“15%”和“18%”的内边距。
图4 页面设置内边距
- 拖拽“表单”组件到中间面板,并做如下操作。
- 在“基本组件 > 布局”中,拖拽“表单”组件到中间面板中。
图5 添加“表单”组件
- 在右侧弹出的“元数据表单配置向导”中,选中刚才创建的对象“Questionnaire__CST”,并勾选创建的自定义字段,单击“下一步”。
图6 配置表单元数据
- 选中表单按钮,单击“完成”。
图7 配置表单功能
- 设置“表单”组件样式“字体”为“16px”,下外边距为“20px”。
图8 设置“表单”组件样式
- 当前页面未使用“分栏”组件,因此删除表单组件中所有的“分栏”组件,只保留包含按钮组件的“容器”组件。
图9 容器组件
- 在“基本组件 > 布局”中,拖拽“表单”组件到中间面板中。
- 在左侧面板中将“标题”组件拖至中间面板“容器”组件上方。
图10 添加“标题”组件
- 选中“标题”组件,在右侧边板“基本属性”“标题内容”中输入调查问卷标题“Astro轻应用开发者调查问卷”。
- 在右侧面板“样式 > 字体”下,配置标题的字体样式,将字体大小设置为“28px”,颜色设置为“147AEC”,并设置居中样式。
图11 设置标题样式设置后,效果如图12所示。
- 在左侧面板中,将“图片”组件拖至中间面板“标题”组件下方,并在右侧边板设置图片地址(/besBaas/images/banner.png),设置图片高度为“165px”,宽度为“100%”。
图13 将“图片”组件拖至中间面板图14 设置图片地址图15 设置图片样式
- 在左侧面板中,将“标题”组件拖至中间面板“图片”组件下方。
图16 将“标题”组件拖至中间面板
在右侧边板设置标题内容,如“为了持续提高您的开发体验,为您提供更好的开发平台,特邀您花几分钟反馈问卷,您的支持是我们最大的动力,衷心感谢您,祝开心每一天!”。
设置上外边距“12px”,下外边距“24px”,内边距上右下左分别设置为“10px 20px 10px 12px”,字体大小“16px”,行高“28px”,颜色“#333333”。图17 设置标题内容图18 设置标题样式 - 在左侧面板中,将“下拉框”组件拖至中间面板“标题”组件下方。
图19 将“下拉框”组件拖至中间面板
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode0__CST”。
图20 数据绑定
- 在“属性 > 基本属性”中,标签设置为“1.您的工作类型?”,设置选项“设计类”、“开发类”、“产品类”、“运营类”和“其他”,并勾选“可清空”“可过滤”和“必填”项。
图21 配置基本属性
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode0__CST”。
- 在左侧面板中,将“单选按钮”组件拖至中间面板“下拉框”组件下方。
图22 将“单选按钮”组件拖至中间面板
- 在右侧边板“数据绑定”分栏单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode1__CST”。
图23 数据绑定
- 在“基本属性”中,设置标签为“2.您觉得平台的体验流畅吗?”,并设置选项“非常流畅”“一般流畅”“不太流畅”并勾选“必填”。
图24 属性配置
- 在右侧边板“数据绑定”分栏单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode1__CST”。
- 在左侧面板中,将“单选按钮”组件拖至中间面板“单选按钮”组件下方。
图25 将“单选按钮”组件拖至中间面板
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode2__CST”。
图26 数据绑定
- 在“属性 > 基本属性”中,设置标签“3.您在开发过程中有困难,能否获取有效的文档/帮助?”,并设置选项“非常有帮助”、“一般”“没有帮助”并勾选“必填”。
图27 属性配置
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode2__CST”。
- 在左侧面板中,将“复选按钮”组件拖至中间面板“单选按钮”组件下方。
图28 将“复选按钮”组件拖至中间面板
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode3__CST”。
图29 数据绑定
- 在“属性 > 基本属性”中,设置标签“4.您是从哪个途径知道数字平台的?”,并设置选项“内部搜索”“别人介绍”“听过培训”“其他途径”并勾选“必填”。
图30 属性配置
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode3__CST”。
- 在左侧面板中,将“多行输入框”组件拖至中间面板“复选按钮”组件下方。
图31 将“多行输入框”组件拖至中间面板
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode4__CST”。
图32 数据绑定
- 在“属性 > 基本属性”中,设置标签“5.您觉得AppCube给您带来的最大价值是什么?相比其他同类产品,您为什么选择AppCube?”,并设置最大字符长度“256”。
图33 属性配置
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode4__CST”。
- 在左侧面板中,将“多行输入框”组件拖拽到中间面板“多行输入框”组件下方。
图34 将“多行输入框”组件拖至中间面板
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode5__CST”。
图35 数据绑定
- 在“属性 > 基本属性”中,设置标签“6.您想对Astro轻应用说点什么?可以是优点也可以是缺点还可以是对Astro轻应用的期许。”,并设置最大字符长度“256”。
图36 属性配置
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode5__CST”。
- 在左侧面板中,将“评分”组件拖至中间面板“多行输入框”组件下方。
图37 将“评分”组件拖至中间面板
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode6__CST”。
图38 数据绑定
- 在“属性 > 基本属性”中,设置标签“7.您对平台的综合评分?”,并设置星星总数“5”。
图39 设置属性
- 在“属性 > 数据绑定”中,单击右侧齿轮按钮,选择表单数据绑定的对象“form_0”下的自定义字段“命名空间__questionCode6__CST”。
- 选中“容器”中的“保存”按钮,做如下设置。
- 在“基本属性”中,设置显示名称“提交”。
图40 属性配置
- 在“事件”页签中,单击“点击”后的加号。
图41 事件配置
- 在“添加动作”页面,选择“自定义动作”,输入自定义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();
图42 配置JS代码
到此,“调查问卷”主页面已创建完成,效果如下:图43 “调查问卷”主页面 - 在“基本属性”中,设置显示名称“提交”。
- 测试“调查问卷”页面应用实例,填写“调查问卷”并单击提交。
图44 模拟填写调查问卷在经典版应用开发设计器的导航菜单上,单击
,即可进入数据调试页面。您可以在数据调试页面,输入sql语句查询创建的“Questionnaire”对象,获取刚才填写的调查问卷数据。
图45 控制台入口图46 调查问卷数据已存入对象
父主题: 标准页面