华为云用户手册

初识事件-动作 查看组件可配置事件列表。 以雷达图组件为例，在画布中拖入并选中雷达图组件，在右侧“组件属性设置”栏中选择“事件”页签，会显示当前组件可配置的事件列表。 图1 事件配置示例 表1 预置事件列表 事件名称 事件说明 点击 通过鼠标左键，单击该组件时触发。 双击 通过鼠标左键，双击该组件时触发。 右击 通过鼠标右键，单击该组件时触发。 右双击 通过鼠标右键，双击该组件时触发。 鼠标滑过 鼠标光标滑过该组件时触发。 组件加载 组件加载完成后触发。 单击组件标题 单击组件标题时触发。 当点击图例时 单击图例时触发。 当点击数据时 单击数据时触发。 图1所示的“跳转页面”事件，并非低代码平台预置的事件，而是在“雷达图”组件中注册的事件，当单击该组件标题时触发。即事件列表中也会展现该组件注册的事件，用于配置。组件中如何注册事件，请参见同页面内组件的交互。 事件在开发态（高级页面编辑页面）不能触发，只有在页面的运行态（应用运行状态或预览页面）才能触发生效。 配置事件触发时的响应动作。 单击事件名称后的，在弹出的“事件编辑”页面，可配置该事件触发时的响应动作。 图2 配置事件示例 “事件编辑”弹窗说明 如下图所示，其中标签1“新建动作”按钮，可为当前事件添加响应动作，标签2为当前事件已配置的动作列表，可在列表中操作列对其再次编辑或删除。 图3 事件编辑弹窗 预置动作说明 图4 动作列表示例 如上图所示，当单击“新建动作”按钮后，可展现当前事件可配置的动作列表。 表2 预置动作列表 动作类别 动作名称 详细说明 默认 页面跳转 跳转至其他页面，配置参数说明： 页面类型：设置待跳转的页面是当前应用中的标准页面、高级页面或外部页面。 高级页面、标准页面、外部页面：选择高级页面、标准页面或输入外部页面的地址。 动作参数：通过页面宏传递参数，可暂且不关注。 页面打开方式：设置跳转页面的打开方式，可选项包含当前浏览器窗口打开或新窗口打开。 自定义 自定义动作 自定义动作可通过代码，实现响应动作的逻辑。 //var flag=true //{widgetxxx}.flag=flag;console.log('测试自定义动作'); BPM动作 提交实例 详细介绍，请参见BPM如何与页面交互。 提交任务 转派任务 更改变量 图4中所示的“满月饼图”动作，并非低代码平台预置的动作，而是在“满月饼图”组件中注册的动作，即动作列表中也会展现在画布中所有组件注册的动作，用于配置。组件中如何注册动作，请参见同页面内组件的交互。 配置完成后，单击页面上方的，保存页面。 单击，进入预览页面，查看已配置的事件和动作是否能正常触发。

高级设置 在高级设置中，选择设置的文本内容，在出现的配置弹窗中，可进行是否加粗、是否倾斜、字号、字体、文本颜色、背景颜色、对齐方式等配置。 图3 编辑器中文本配置 另外，若需要在文本中设置变量，变量值来自文本组件数据桥接器中的配置。若配置为静态数据，变量值取自“outDatas”中配置的数据。 可变参数下标请从0开始，变量样式为“{0}”，预览页面后效果为“变量值”。带转义符“\”的变参不会被替换，例如文本组件内容为“\{1}{1\}{\1}”，预览页面后效果为“{1}{1}{1}”。连续两个转义符时，则第二个转义符失效，变参会被替换，例如文本组件内容为“\\{2}”，预览页面后效果为“\变量值”。 图4 文本中变量配置 图5 预览页面效果

属性 在属性中，设置图片组件的位置、边框、连接器等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。 自定义属性列表：显示组件的自定义属性。 图片地址：直接输入图片地址，来展示图片。 连接器设置 使用连接器：是否使用连接器。 选择连接器类型：选择有存储功能的，支持OBS、MINIO和对象存储代理。 选择连接器：选择具体的连接器实例。 选择桶：连接器的存储桶。 使用相对地址：使用图片的相对路径。

属性 在属性中，设置自定义背景框组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

高级设置 在高级设置中，可设置图片填充类型。 图3 高级设置 图4 图片设置页面 图5 上传图片/视频 单击“选择图片”，在页面单击目录后的和，可管理图片目录。单击“上传图片/视频”，可进行上传操作。 选择“填充”表示图片不保证保持原有比例，图片拉伸填满整个容器。 选择“包含”表示图片保持原有尺寸比例，可能会在容器内留有空白。 选择“覆盖”表示图片表示原有尺寸比例，宽高至少有一个和容器一致，可能会让图片部分区域不可见。 选择“无”表示图片保持原有尺寸比例，同时保持图片原始尺寸大小。

高级设置 在高级设置中，可设置轮播时长、切换方式等。 图3 高级设置 轮播设置 切换方向：广告图片的轮播切换样式，支持横向滚动切换、右下角滚动切换和纵向滚动切换。 加载自动播放：是否自动轮播。开启后，支持设置图片轮播时间间隔（不大于24秒）。 切换方式：设置图片切换时，展示的样式，如淡出、推出等。 定位标志：设置分页图标样式。 图片管理：对图片进行管理，并支持为图片配置跳转链接。 单击“添加”，在“选择图片/视频”页面，单击目录后的和，可管理图片目录。单击“上传图片/视频”，可上传图片。 选中图片，单击，可删除图片。 单击，可编辑图片跳转链接。

属性 在属性中，设置轮播组件的位置、边框、连接器等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。 自定义属性列表：显示组件的自定义属性。 图片源设置：图片来源是否取自OBS连接器。 勾选使用连接器，表示取自OBS连接器。当连接器中图片过多时，可能会导致读取图片缓慢，且打包该页面时，由于图片地址为绝对地址，打包安装后，图片地址不可用，需要重新上传图片并进行配置。 不勾选使用连接器，表示图片来源取自平台接口。选择图片后实际存储的是图片id，页面随应用打包时会将图片一起打包，在新环境安装后无需重新上传配置。 连接器设置 选择连接器：选择有存储功能的OBS类型连接器。OBS连接器配置完成后，才可以进行图片的查询、上传等操作，连接器的配置方法请参见对接OBS云对象存储实例。 选择桶：连接器的存储桶。

打开页面 以单击“立即体验”按钮，打开新的产品体验入口页面为例，进行介绍。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“打开页面”，配置目标页面、打开方式等参数，单击“创建”。 图1 打开页面 目标页面：设置待打开的目标页面。 当前应用页面：当前应用中，已创建好的页面。 URL：某个页面的URL。 重新加载当前页面：加载刷新当前的页面。 打开方式：设置目标页面的打开方式，如在新标签页中打开或在当前窗口打开。 参数绑定：当打开的页面URL中，有参数时，可单击“添加”，设置页面URL路径中的参数。 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览页面，单击“立即体验”按钮，可预览按钮的事件效果。

弹出消息对话框 该预置动作，用于弹出消息对话框。以单击“确定”按钮，弹出“创建实例成功”的消息对话框为例，进行介绍。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”，单击“弹出消息对话框”，设置相关参数，单击“创建”。 图4 关闭弹出页面 消息类型：弹出的消息类型，如成功、错误、警告和提示。 标题：消息对话框左上角，显示的标题。 消息内容：消息对话框中，显示的消息内容。 内容作为HTML渲染：内容是否作为HTML渲染。动态渲染HTML容易导致XSS攻击，开启此属性时，请确保传入的内容是可信的。 按钮：消息对话框中，显示的按钮名称。 弹出后延时自动关闭：弹出后，是否支持延时自动关闭。勾选后，需要设置延时秒数。 例如：勾选该参数，并设置延时3秒。效果为弹出消息对话框后，3秒后自动关闭该弹框。 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览页面，单击“确定”按钮，可预览按钮的事件效果。

弹出页面 以单击“提交”按钮，弹出“提交成功”的提示页面为例，进行介绍。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“弹出页面”，配置目标页面、窗口选项，单击“创建”。 图2 弹出页面 目标页面：设置弹出的目标页面类型。 当前应用页面：当前应用中，已创建好的页面。 URL：某个页面的URL。 窗口可拖拽：窗口是否可来回拖拽。 窗口标题：弹出窗口的标题内容。 窗口位置：弹出窗口在屏幕的位置，如屏幕中央或屏幕顶部居中。 窗口宽度：窗口的宽度，单位像素。 窗口高度：窗口的高度，单位像素。 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览页面，单击“提交”按钮，可预览按钮的事件效果。

控制组件只可读不可编辑 在用户填写调查问卷页面，选中“提交”按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“只读/编辑控件”。 在右侧页面中，单击“添加控件”，选择需要设置的组件，单击“确定”。 图1 选择组件 设置组件是否可编辑，单击“创建”。 图2 设置是否可编辑 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览页面，填写问卷项后，单击“提交”按钮，可预览按钮的事件效果。

事件 在事件中，显示了组件暴露出来的一些常用事件，供用户实现，来扩展组件的交互。整个页面有加载（on-load）事件，该事件在页面渲染完成后执行，可进行数据初始化操作。 表1 事件编排 事件名 说明 返回值 数据改变 已上传文件列表改变时触发。 当前已上传文件列表。 文件上传 开始上传文件时触发。 当前开始上传的文件。 当前已上传文件列表。 操作成功 上传成功后触发。 上传成功文件的地址。 选中文件 文件列表选中时或取消选中时触发。 当前文件。 已选中的文件。 文件上传前 文件上传前触发。 在“文件上传前”事件后，单击齿轮图标，在“自定义JS代码”中增加“$current.showUploadList = false”语句，可取消上传预览。 当前文件。 文件名。

通过内置动作编排事件 系统预置了多种常用的事件交互动作，您可以根据需要直接使用，来实现页面或组件之间的交互。 下面以编排一个重置功能的按钮为例，介绍如何通过内置动作编排事件。本示例主要是通过内置动作“重置表单”实现该功能，即重置表单数据。“提交表单”是指将页面数据提交到表单中，和重置表单配置类似，不再单独介绍。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。 在“内置动作”中，单击“重置表单”，选择需要重置的表单，单击“创建”。 图3 添加动作 返回标准页面开发界面，单击页面上方的，保存页面，并单击，预览页面。 在表单中输入数据，单击“重置”按钮，可预览按钮的事件效果。

通过自定义JS代码编排事件 通过手动编写JS代码，实现按钮的事件逻辑。系统支持在手动编写JS代码时，进行代码联想提示；系统封装了一些常用功能的接口，并将其中典型接口做成模板，您可以从左侧拖动相关模板至右侧事件定义区域，直接使用。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。 选择“自定义动作”，在右侧事件定义区域，输入实现事件逻辑的JS代码，也可从左侧拖动相关模板至右侧事件定义区域，单击“创建”。 内置JS事件说明及使用方法，请参见如何通过JS代码，实现页面与后台接口间的交互。 图4 自定义JS代码 自定义JS代码示例如下： //获取当前组件var _component = context.$component.current;//获取当前表单var _form = context.$component.form;// 重置表单_form.resetFields(); 返回标准页面开发界面，单击页面上方的，保存页面。

AI代码补全功能 功能描述：开发者在JS代码编写过程中，键入特定的字符，界面会进行提示，从而自动构建智能代码补全服务，增强IDE代码补全能力。 使用方法：开发者在JS代码编辑器中，编写代码过程中敲击字符时，会自动触发代码推荐，选中后按Enter补全。 事件内置API补全：输入“context”后，提示事件代码内可调用的API。 模型名称补全：输入“context.$model.ref”后，提示当前页面中的模型。 服务编排名称补全：输入“context.flow”后，提示当前租户下的服务编排。 脚本名称补全：输入“context.script”后，提示当前租户下的脚本。 服务名称补全：输入“context.service”后，提示当前租户下的API服务，选择API服务名称后自动补全服务地址。 华为OneMobile API补全：输入“xm”后，提示华为OneMobile小程序中的API。 WeLink API补全：输入“HWH5”后提示WeLink小程序中的API。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 配置菜单：单击“设置”，可设置菜单。 图标：配置菜单的图标。 文本内容：配置菜单的显示名称。 RUL类型：菜单跳转页面的URL类型，如“常量”、“选择页面”。 地址：当“URL类型”为“常量”时，需要配置跳转页面的具体URL地址。当“URL类型”为“选择页面”时，需要选择系统中创建的具体跳转页面。 链接目标：跳转后页面显示形式。 新窗口：在新窗口页，显示跳转页面。 当前框架：在当前框架，显示跳转页面。 父框架：在父框架区域，显示跳转页面。 整个窗口：在当前整个窗口，显示跳转页面。 分隔符：菜单名之间的分隔符。 跳转：单击面包屑组件的菜单标签，是否开启自动跳转，默认为开启。若不开启跳转，可在“事件”页签定义跳转的实现方法，即进行事件编排。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 默认分页大小：设置默认每页条数（分页大小）。 每页条数切换的配置：每页条数切换的配置，如[10,20,40,100]。 大小：分页显示大小，可选值为small（迷你版）或不填（默认）。 简洁版：是否简洁版显示分页样式。 AUI风格：是否展示AUI风格。 显示跳转：是否显示跳转，显示后可设置快速跳转到某一页。 显示分页：是否显示分页，显示后可设置具体的分页大小。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

初识标准页面 将光标放在应用目录上之后，应用目录右侧会出现“+”，单击“+”，选择“标准页面”，设置页面标签和名称，即可创建一个全新空白的标准页面。页面创建后，自动进入标准页面开发界面，您可以阅读以下内容初步了解标准页面。 图1 标准页面开发界面 标准页面开发界面由四部分组成，分别是：左侧组件区域、上方按钮区域、中间工作区域和右侧可配置页面元素区域，具体功能说明如下表所示。 表1 界面布局说明 分类 功能说明 按钮区域 页面功能按钮区域，包括获取锁、释放锁、保存、另存为、预览页面、修订记录、操作回退、撤销回退、页面性能分析、布局切换以及发布成高级页面组件的操作。 组件区域 页面的组件区域。设计页面时，需要从组件区域拖拉拽各种组件（按住鼠标拖动）到工作区域中以丰富页面功能。 组件区域由以下两个页签组成： 基本组件：平台预置的各类组件，具体说明如基本组件分类说明所示。若需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上会出现问号图标，单击该图标会出现该基本组件的使用说明。平台标准组件介绍介绍了常用的基本组件属性说明。 扩展组件：存放用户自定义的组件，自定义组件由用户在线下开发完成并上传到AstroZero，用于丰富页面组件的功能。自定义组件开发过程及上传方法，请参考创建自定义标准组件。 工作区域 工作区域即是编辑页面内容区域以及页面视图区，主要的页面布局设计操作区域，完成对页面具体布局、组件放置等操作。 设计视图：页面默认视图，此视图下，可以在页面内容中，通过拖拉拽的方式对需要在页面布局中展示的组件元素进行编排，所有组件视图化，所见即所得，让您快速构建您需要的页面布局。页面右上角“外层容器”开关，可快速呈现外层容器和范围。 模型视图：该页面所涉及的模型展示视图。 事件视图：该视图下，页面布局中各事件以代码形式展示在工作区域。 样式代码：页面自定义的样式代码。 更多：单击“更多”后，将会展开以下页签。 组件代码：该视图下，页面布局中各组件以代码形式展示在工作区域。 第三方库：该页面加载的第三方库代码。 可配置页面元素区域 页面和组件属性设置区域，在该区域可以对组件属性、事件进行设置，也可以加载第三方库以完成对组件的应用。该区域由以下三个页签组成： 属性：组件的属性展示区域，可在属性面板修改组件属性使页面达到预期效果。在工作区域“设计视图”下选中组件，键盘上按Tab键，可在“属性”页签中切换属性参数项，按Enter键可设置属性值。 事件：进入事件编排器的入口，您可通过系统预置的事件编排器，或者直接通过定义JS代码，来实现页面组件与后台接口之间的交互。 库：加载当前页面所依赖库的入口。页面设计的某些功能需要依赖特定的库来完成，用户可以在该页签下新增或删除某些库。系统默认会提供部分库，若不满足现有需求，也可以根据实际情况加载新的库。

基本组件分类说明 组件包括平台预置基本组件、用户自定义的扩展组件，基本组件具体说明如表2所示。若需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上会出现问号图标，单击该图标会出现该基本组件的使用说明。 表2 基本组件分类说明 分类 说明 布局 用于控制页面的布局，即将页面设计几行几列。例如先拖入一个栅格容器，将栅格容器用行列划分成小区域后，再向单元格中拖入其他组件。容器本身可以包含容器，也可以包含其他组件。 表单：元数据表单。根据数据对象可生成表单。可用于制作带数据的交易类页面。 表格：元数据表格，用于展示对象记录。根据数据对象可生成表格。数据对象中的属性映射为表格中的列。用于通过一个表格完成数据对象的增、删、改、查操作场景。 基础容器：基本的布局容器，支持拖拽放置任何组件进去，按照流式布局模式布局（非独占整行组件如按钮组件，从左往右排列，占满整行即换行；独占整行组件如标题组件，则默认独占一行）。 分栏：容器组件，相当于行，内部可分多栏（列）。可将页面划分为两栏或者多栏，每一栏都可以拖入其他组件。 折叠面板：用于对页面的某些区域进行折叠和展开，可放下多个折叠页组件。 页签：用于制作多页签页面时使用，可放下多个页签组件，实现多页签效果，可在不同的页签内放置内容，通过点击标签切换显示不同的内容。 列表视图：用于灵活组合列表项的内容，并且根据实例化数据动态展示。使用时需要在List View上绑定数据模型。数据类型为数组。如果要使用分页，分页组件需放在List View Container内。 模态框：弹框样式布局，使用数据绑定实现双向绑定，通过控制模型的值true、false来显示、隐藏对话框。 表单 输入框：文本输入框，关联对象文本（text）类型，可编辑一行的文本控件，包含标签。控件内的标签将其与输入组件区分开。适用于普通文本输入。 多行输入框：多行文本输入区域，关联对象文本区（Text Area）类型，多行可编辑的文本控件。适用于多行文本输入。 日期选择框：用于日期选择或输入，关联对象日期（Date）类型、日期/时间（Date/Time）类型，可以选择或输入日期，支持年、月、日期等类型，支持选择范围。 数字输入框：数字（Number）类型的输入框，关联对象数字类型。 复选按钮：该控件允许用户从多个选项中进行多种选择。 单选按钮：用于有一组可选项的单项选择，或者切换某个选项的选中状态，以实现从一组互斥的选项组中选择一项。 下拉框：下拉框的可选值为对象的SingleSelect类型字段的不同Picklist取值，也可以是自定义json数据。如果Picklist和自定义json数据同时存在，以Picklist的取值为准。 级联选择框：提供按层级选择的选择框，可对选择框的数据进行校验，可以对数据进行搜索。 开关：滑动开关，可关联对象的复选框（Boolean）类型字段。允许用户选择“真”（选取）或“假”（不选取）值。 上传：文件选择上传和拖拽上传控件，可以通过绑定数据模型，上传文件列表会保存在绑定的模型中。 自动完成：带有提示的文本输入框。 弹出对话框：单击后会弹框的组件，需要自定义实现代码。 多语言选择框：多语言切换组件，关联对象多语言（mutillang）类型。 评分：评分、评价组件。 关联选择框：一个搜索的选择框，关联对象的查找关系（lookup）或主从关系（masterdetail）类型，可以通过搜索来匹配下拉的选项，匹配成功的选项会展开在下拉列表中。 基本 按钮：通过编排事件实现Button，触发业务逻辑使用。 按钮卡：包含多个按钮（两个或更多）的整体面板。该组件可用于构建多项菜单，用于在视图之间导航。 标签：用于显示页面信息的静态文本。 图标：用于辅助相关文字进行展示，也可当做按钮点击使用，常配合其他组件一起使用。 标题：用于添加具有标题意义的文字，可以通过选择属性“标题类型”的值来控制添加的标题的文字大小。 链接：链接地址，用于链接、跳转，一般常用来打开新页面或作为文字性按钮使用。 图片：用于上传图片，可以从OBS或者SFTP选择或上传图片。 面包屑：是项目中常用的一种组件。结构大致是“首页/菜单1/菜单2/菜单3”。 滑块：滑块是一个可以利用鼠标在其上面进行滑动的条状组件，一般使用在进度条，区域划分等地方。当鼠标在轨道上点击时，滚动球会移动到当前鼠标点击的位置，单击过的地方会以蓝色显示，未单击的地方是灰色。 分页：用于多条数据展示时可设置分页展示，每页展示固定数据条数。 高级 选项树：树形结构选择设置。适用于要展示的数据为树形结构。 步骤条：步骤进度条。可设置总步骤数和每一步的展示名称。 时间轴：一般绑定数据服务使用，动态的展示时间轴的内容。 走马灯：在满足设置的条件可切换显示灯。 可收缩面板：弹性伸缩布局，可左右伸缩的容器。 滚动容器：由于屏幕尺寸限制，当页面内容已经超出屏幕的范围时，需要拉动滚动条，在有限的屏幕中浏览更多内容。 代码块：用于代码块展示。 选择卡：可从某一卡片区域选中到另一卡片区域。 栅格容器：用于控制页面的布局，即将页面设计几行几列，先设置元素在页面中纵向排列，然后在每一行中又可设置元素横向排列。 标签栏：只有页面布局模式为手机模式时，才会显示该组件。为底部导航组件，单击标签栏中的选项可切换本应用中不同的页面。

快速开始 在进行标准页面设计前，需要对开发界面进行全面的了解。 将光标放在应用目录上之后，应用目录右侧会出现“+”，单击“+”，选择“标准页面”，设置页面标签和名称，即可创建一个全新空白的标准页面，页面创建后，自动进入标准页面开发界面， 标准页面中预置了多种组件，可以直接从左侧“组件”区域，将这些组件拖拽到中间“设计视图”上。 图2 标准页面编辑界面（UI Builder） 在配置使用组件前，您可以将光标放在每个组件上后，组件右上角将显示帮助信息的问号图标，单击问号图标，即可进入该组件介绍页面。若需了解更多AstroZero预置组件的使用及配置方法，请参见平台标准组件介绍。 图3 组件的帮助图标 在“设计视图”中，选中一个页面组件，可在右侧“属性”页签，设置该组件的绑定数据、样式等属性，如图4所示。在设计视图中选中一个文本框，可以在右侧修改这个文本框的标签名、样式、绑定的数据模型等。 图4 组件属性面板 在“设计视图”中，选中任意组件，可以在右侧“事件”页签，设置组件的关联事件。例如，选择一个“按钮”，然后在按钮的“点击”事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。 图5 编辑组件的关联事件 利用组件导航，快速选中组件。 当选中某个组件时，页面上方会在组件导航上显示它的html标签层级。 因此，在组件数量比较多，位置较为紧密时，您可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，在上图的组件导航中单击“页面”，可以直接选中页面上的最外层页面组件。 利用组件树，快速选中组件。 在组件数量比较多，位置较为紧密时，您也单击页面右下角的“组件树”，展开组件树，在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。 图6 利用组件树快速选中组件

与高级页面的区别 标准页面提供流式布局（Flow Layout）和弹性布局（Flex Layout），高级页面提供流式布局与绝对布局，适用于对样式个性化布局需求更高的业务场景。 标准页面提供基础组件，高级页面具有更复杂的展示组件，如“地图”、“水滴图”和“折线图”等。 在沙箱环境、运行环境中，标准页面均不支持匿名访问，“高级页面”则支持匿名访问。 更多高级页面的介绍，请参见5.1 什么是高级页面。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性 链接地址：输入自定义图片的图片地址。 图片地址：选择或上传图片，支持上传JPG、JPEG、PNG和GIF格式的图片，图片不超过1MB。 图片库有如下几种类型： OBS/MINIO/OBJECTSTORAGEPROXY：通过连接器获取OBS或MINIO桶中的图片，需要提前配置OBS/MINIO/OBJECTSTORAGEPROXY类型连接器，选择具体的存储桶、连接器实现获取图片功能。 连接器：OBS/MINIO/OBJECTSTORAGEPROXY类型的连接器。 桶：OBS/MINIO类型连接器的存储桶。 SFTP：选择SFTP后，图片将加密上传至nginx服务器的本地文件系统中。 OBS/MINIO/OBJECTSTORAGEPROXY图片库，支持按目录管理图片： 单击目录后的和，新增根图片目录和子图片目录。 单击“上传图片”，可上传图片。 选中图片时，单击，可以在图片库中删除此图片。 预览：预览时，是否支持单击放大图片。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 禁用：是否禁用该组件。 只读：值是否只读。 样式 图片宽度：设置图片的宽度和高度，单位为px。 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 无数据显示：无数据时，显示的名称。 列数(PC)：设置PC端显示列数。 列数(Mobile)：设置移动端显示列数。 列数排列方式：选择列数排列方式，如居中、左对齐和右对齐等。 显示加载中：当要展示的内容较多时，用户看到页面内容可能需要稍长时间，开启加载中效果，体验会更好。 移动端配置：列表视图在移动端的设置。 下拉刷新：下拉是否刷新列表。 默认数据条数：设置移动端列表视图，默认展示数据的数量。 显示加载文字：是否显示上拉加载文字。 异步加载：和事件（on-load-data）配合使用，上拉加载时，异步获取数据。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性值绑定 在列表视图的“属性”页签，单击“数据绑定”中的，绑定数据模型。 模型实例化必须为数组，详情请参见绑定数据模型、增加查询条件、工具栏。 图3 绑定数据模型 向列表视图中拖入栅格容器，将栅格容器设置为6行2列，再向前5行中拖入标签组件，并设置标签属性。 属性值绑定。 选择第一行、第二列中的标签，单击右侧“属性值绑定”的“+”，新增属性值绑定。 其中，“属性”设置为“文本内容”，再单击，添加模型字段，将模型字段绑定到当前标签上。 重复上一步，为其他行的标签组件进行属性值绑定。 在第6行拖入一个按钮，设置为“Handle”。 在页面上方，单击，保存页面。 保存成功后，单击，进入预览页面，预期效果如图4。 进行属性值绑定的标签组件，显示绑定的模型字段内容。 图4 通过属性值绑定获取模型中的数据

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 扩展 ：单击“新增行”后的或者，可在当前“分栏”上方或者下方新增分栏（即新增行）。 行布局 在“行布局”中，系统支持设置PC或者Phone手机端布局，并默认提供了一些常见的行布局，如单栏、二等分栏等。单击在“行布局”中的某一个模式，例如单击，当前分栏将被分割成3栏，如图3所示。 图3 默认行布局 您也可以通过单击，手工输入的方式自行设置列的分隔比例，比例相加份数总和必须为24，例如12:12、6:18、3:21、8:8:8等。自定义比例以英文冒号分隔。 分栏组件会根据分辨率大小自适应，当画布宽度小于992像素，PC会展示为单列模式，此时可以通过调整左侧菜单收缩或者画布分辨率来查看不同的效果。 图4 自定义行布局 布局模式：设置PC或Phone屏幕，每一个分栏的栏布局模式。 流式布局：页面元素的宽度，按照屏幕分辨率进行适配调整，但整体布局不变。 弹性布局：可以简便、完整、响应式的实现各种页面布局，选择“弹性布局”时还可以设置垂直对齐方式、水平排列方式以及分栏间隔。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性 弹性布局：是否开启弹性布局。开启后，可以简便、完整、响应式的实现各种页面布局。 列数：设置表单的列数。开启弹性布局时，才显示该配置。 标签对齐方式：设置标签对齐方式，如左对齐、右对齐和上侧对齐。 动态表单数据：请输入SON格式的选项内容。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 禁用：是否禁用该组件。 只读：值是否只读。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 移动端配置：页面在移动端的配置，如当页面下拉时，是否刷新页面。 公共 控件名称：当前组件的名称。 保持会话：开启后将会与服务端维持心跳连接，若用户长时间未操作，当监听到用户的鼠标或键盘事件时，会向后台发送请求刷新访问凭证。 ElementUI样式：低代码平台默认加载了ElementUI，开启后即可使用。 背景图片：单击，设置页面的背景图片。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。 水印 启用水印：页面是否启用水印。 水印内容：启用水印后，支持设置水印内容。 当前用户：当需要设置水印内容为当前用户名时，可开启该项。开启后，“水印内容”中的文本不生效。 水印长度：设置水印矩形框的长度。 水印宽度：设置水印矩形框的宽度。 重复渲染：当需要设置满页面水印时，可开启该项。 水平起始位置：关闭“重复渲染”时，才可设置，表示单个水印在页面的水平起始位置。 垂直起始位置：关闭“重复渲染”时，才可设置，表示单个水印在页面的垂直起始位置。 字体颜色：设置水印字体的颜色。 字体大小：设置水印字体的大小。 旋转角度：水印的旋转角度，取值范围-180~180，即逆时针或者顺时针旋转180度。 透明度：水印的透明度设置。

查看运行态报表 报表运行态可以对报表进行进一步的数据筛选和可视化呈现，也是对报表的一种预览和检查。 在报表列表页面，单击需要查看运行态的报表后面的，运行报表。 单击右上角的“显示图表”，可以设置报表的展示样式。 您需要在创建报表时，设置分组字段（参考5.b），该界面才会有“显示图表”。 图11 设置报表的展示样式 式样与类型：可以为数据选择合适的图表类型，如柱状图、堆叠图、折线图、饼图、仪表图、漏斗图、散点图等，不同的图表有不同的选项，可以在“设置”页签中配置。 柱状图、堆叠图、折线图的设置页签 图例位置：图例的位置。 X轴：选择一个分组字段作为X轴。 X轴标签：X轴显示名称。 次级分组：可以额外的指定一个分组字段作为次级分类，在同一个柱状图上显示，或者作为堆叠图中的堆叠。 Y轴：选择一个公式字段（默认记录计数）作为Y轴。 Y轴标签：Y轴显示名称。 显示参考线：在图中显示一个参考线，以便比较不同分组的Y轴的值。 显示数值：显示每个柱状的数值。 饼图的设置页签 图例位置：图例的位置。 值：可以指定一个公式字段（默认位记录计数）。 切片：可以指定一个分组字段。 显示数值：显示每个饼的数值。 仪表图：仪表图是一种相对简单的图表，用于展示一个具体数值，以及该数值在3段范围内的状态（最小、中等、最差）。 测量：可以指定一个公式字段（默认位记录计数）。 最小值：指定一个度量的最小值。 最大值：指定一个度量的最大值。 漏斗图的设置页签 值：选择一个公式字段作为数值度量。 着色依据：选择一个分组字段作为分组度量。 显示数值：显示每层的数值。 散点图的设置页签 X轴：指定一个公式度量。 Y轴：指定一个公式度量。 详情：指定一个分组度量。 显示数值：显示每点的数值。 调色板：可以为图表选择不同的配色方案，以便制作出个性化的图表。 运行报表界面上的操作仅为用户提供一种快速的数据探索的途径，并不会保存到数据库中。 单击齿轮图标，设置展示数据，可以对数据进行过滤展示。 图12 数据过滤展示 显示细节：显示分组的详细记录信息。 分组汇总：是否显示每个分组的汇总信息。 整体汇总：在表格底部显示汇总信息。

常见问题 是否拥有执行触发器设定的操作权限，取决于触发器的创建人还是触发人？ 回答：是否有执行触发器设定的操作权限，取决于触发者本人是否有相关权限，和触发器创建人无关。例如，某个触发器关联了对象“D__CST”，触发类型是“插入或更新记录时”，触发时执行脚本C，即对象“D__CST”数据有新增或更新时，会触发该触发器，从而执行脚本C。用户A是触发器的创建人，没有对象“D__CST”的操作权限和脚本C的执行权限，用户B有“D__CST”的操作权限和脚本C的执行权限，当用户B更新“D__CST”对象数据时，会触发该触发器，执行脚本C。