# 通过内置动作实现标准页面组件交互 华为云Astro轻应用预置了多种常用的事件交互动作，您可以根据需要直接使用，来实现页面或组件之间的交互。下面以编排一个重置功能的按钮为例，介绍如何通过内置动作编排事件。本示例主要是通过内置动作"重置表单"实现该功能，即重置表单数据。"提交表单"是指将页面数据提交到表单中，和重置表单配置类似，不再单独介绍。 #### 通过内置动作编排事件 1. 参考[登录华为云Astro轻应用应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9004.html)中操作，进入应用设计器。 2. 在应用设计器的左侧导航栏中，选择"界面"。 3. 在页面中，将鼠标放在对应的页面上，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912459156.png)，选择"编辑"。 4. 在标准页面开发界面，选中按钮组件。 5. 在右侧"事件"页签中，单击"点击"后的"+"，进入添加动作页面。 6. 在"内置动作"中，单击"重置表单"，选择需要重置的表单，单击"创建"。 图1添加动作 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002151921520.png "点击放大") 本示例选择"重置表单"内置动作，其他内置动作功能介绍，如[表1]所示。 表1内置动作功能说明 | 内置动作 | 功能介绍 | |:---|:---| | [打开页面] | 该预置动作，用于在当前页面中打开当前应用中已创建好的页面。 | | [弹出页面] | 该预置动作，用于在当前页面中弹出当前应用中已创建好的页面。 | | [关闭弹出页面] | 该预置动作，用于关闭弹出页面。 | | [弹出消息对话框] | 该预置动作，用于弹出消息对话框，如成功、错误、警告和提示等。 | | [显示/隐藏控件] | 该预置动作，用于控制页面上的全部或部分组件是否可见。 | | [启用/禁用控件] | 该预置动作，用于控制页面上的全部或部分组件是否可用。 | | [只读/编辑控件] | 该预置动作，用于控制页面上的全部或部分组件是否可编辑。 | | [打印] | 该预置动作，用于将页面数据提交到表单中，和重置表单配置类似。 | | [提交表单] | 该预置动作，用于打印表单中的字段。 | | [BPM] | 在工作流中经常使用到"用户任务"图元，表示在业务流程中由用户参与完成某些工作，如填写表单提交数据、进行审批等。"用户任务"会关联一些页面呈现给用户进行处理。标准页面预置了几种与工作流流程相关的事件，供工作流关联标准页面时使用。 - BPM-提交实例 该预置动作用于将数据提交到工作流，与预置的API"context.$工作流.submitInstance (variables:object)"效果相同。 - BPM-提交任务 该预置动作用于将数据提交到工作流，与预置的API"context.$工作流.submitTask (variables:object)"效果相同。 - BPM-转派任务 该预置动作用于转派工作流中的用户任务。 - BPM-更改变量 该预置动作用于设置工作流中的变量值，与预置的API"context.$工作流.putVariables (variables:object, instId: string)"效果相同。 - BPM-加载变量 该预置动作用于获取工作流中的参数变量，与预置的API"context.$工作流.loadVariables()"效果相同。 | | [调用脚本] | 该预置动作，用于执行脚本。 | | [调用服务编排] | 该预置动作，用于执行服务编排。 | | [下载文件] | 该预置动作，用于下载标准页面中的文件。 | 7. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912302892.png)，保存页面，并单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945142025.png)，预览页面。 8. 在表单中输入数据，单击"重置"按钮，可预览按钮的事件效果。 #### 打开页面 在标准页面中，"打开页面"内置动作通常用于实现页面的跳转功能。以单击"立即体验"按钮，打开新的产品体验入口页面为例，进行介绍。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936101389.png)，进入添加动作页面。 3. 在"内置动作"中，单击"打开页面"，配置目标页面、打开方式等参数，单击"创建"。 图2打开页面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894301732.png "点击放大") - 目标页面：设置待打开的目标页面。 - 当前应用页面：当前应用中，已创建好的页面。 - URL：某个页面的URL。 - 重新加载当前页面：加载刷新当前的页面。 - 打开方式：设置目标页面的打开方式，如在新标签页中打开或在当前窗口打开。 - 参数绑定：当打开的页面URL中，有参数时，可单击"添加"，设置页面URL路径中的参数。 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936101381.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936101397.png)，预览页面，单击"立即体验"按钮，可预览按钮的事件效果。 #### 弹出页面 在标准页面中，"弹出页面"内置动作通常用于实现弹出窗口或对话框的功能。以单击"提交"按钮，弹出"提交成功"的提示页面为例，进行介绍。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936101389.png)，进入添加动作页面。 3. 在"内置动作"中，单击"弹出页面"，配置目标页面、窗口选项，单击"创建"。 图3弹出页面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894301724.png "点击放大") - 目标页面：设置弹出的目标页面类型。 - 当前应用页面：当前应用中，已创建好的页面。 - URL：某个页面的URL。 - 窗口可拖拽：窗口是否可来回拖拽。 - 窗口标题：弹出窗口的标题内容。 - 窗口位置：弹出窗口在屏幕的位置，如屏幕中央或屏幕顶部居中。 - 窗口宽度：窗口的宽度，单位像素。 - 窗口高度：窗口的高度，单位像素。 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936101409.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936101369.png)，预览页面，单击"提交"按钮，可预览按钮的事件效果。 #### 关闭弹出页面 在标准页面中，"关闭弹出页面"内置动作通常用于实现关闭弹出页面的功能。以单击"确定"按钮，关闭弹出页面为例，进行介绍。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894301728.png)，进入添加动作页面。 3. 在"内置动作"，单击"关闭弹出页面"，单击"创建"。 图4关闭弹出页面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894301748.png "点击放大") 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894141808.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936101373.png)，预览页面，单击"确定"按钮，可预览按钮的事件效果。 #### 弹出消息对话框 在标准页面中，"弹出消息对话框"内置动作通常用于弹出消息对话框。以单击"确定"按钮，弹出"创建实例成功"的消息对话框为例进行介绍。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936101405.png)，进入添加动作页面。 3. 在"内置动作"，单击"弹出消息对话框"，设置相关参数，单击"创建"。 图5弹出消息对话框 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894141828.png "点击放大") - 消息类型：弹出的消息类型，如成功、错误、警告和提示。 - 标题：消息对话框左上角，显示的标题。 - 消息内容：消息对话框中，显示的消息内容。 - 内容作为HTML渲染：内容是否作为HTML渲染。动态渲染HTML容易导致XSS攻击，开启此属性时，请确保传入的内容是可信的。 - 按钮：消息对话框中，显示的按钮名称。 - 弹出后延时自动关闭：弹出后，是否支持延时自动关闭。勾选后，需要设置延时秒数。 例如：勾选该参数，并设置延时3秒。效果为弹出消息对话框后，3秒后自动关闭该弹框。 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894301752.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894301712.png)，预览页面，单击"确定"按钮，可预览按钮的事件效果。 #### 显示/隐藏控件 "显示/隐藏控件"内置动作，用于控制标准页面中全部或部分组件是否可见。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912321112.png)，进入添加动作页面。 3. 在"内置动作"中，单击"显示/隐藏控件"。 4. 在右侧页面中，单击"添加控件"，选择需要设置的组件，单击"确定"。 图6选择组件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945151193.png "点击放大") 5. 设置组件是否显示，单击"创建"。 图7组件是否显示 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912312944.png "点击放大") 6. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945147833.png)，保存页面。 7. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912468660.png)，预览设置后效果。 #### 启用/禁用控件 "启用/禁用控件"内置动作，用于控制标准页面中全部或部分组件是否启用。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912488432.png)，进入添加动作页面。 3. 在"内置动作"中，单击"启用/禁用控件"。 4. 在右侧页面中，单击"添加控件"，选择需要设置的组件，单击"确定"。 图8选择组件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945164717.png "点击放大") 5. 设置组件是否启用，单击"创建"。 图9设置是否启用 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912486536.png "点击放大") 6. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912468648.png)，保存页面。 7. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912308736.png)，预览设置后效果。 #### 只读/编辑控件 "只读/编辑控件"内置动作，用于控制标准页面中全部或部分组件是否可编辑。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945109005.png)，进入添加动作页面。 3. 在"内置动作"中，单击"只读/编辑控件"。 4. 在右侧页面中，单击"添加控件"，选择需要设置的组件，单击"确定"。 图10选择组件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912269858.png "点击放大") 5. 设置组件是否可编辑，单击"创建"。 图11是否可编辑 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912429782.png "点击放大") 6. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912429806.png)，保存页面。 7. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912269882.png)，预览设置后的效果。 #### 提交表单 在标准页面中，"提交表单"内置动作通常用于实现表单提交功能。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001935539046.png)，进入添加动作页面。 3. 在"内置动作"中，单击"提交表单"。 4. 在右侧页面中，选择待提交的表单，单击"创建"。 图12选择待提交的表单 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001962738133.png "点击放大") 5. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001962618329.png)，保存页面。 6. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001935379694.png)，预览设置后的效果。 #### 打印 在标准页面中，"打印"内置动作通常用于打印表单中的字段。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912756270.png)，进入添加动作页面。 3. 在"内置动作"中，单击"打印"。 4. 在右侧页面中，单击"设置"。 5. 在打印设置中，选择表单中待打印的字段，单击"确认"。 图13打印设置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001935537714.png "点击放大") 6. 单击"保存"，返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912756286.png)，保存页面。 7. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912596374.png)，预览设置后的效果。 #### BPM 在工作流中经常使用到"用户任务"图元，表示在业务流程中由用户参与完成某些工作，如填写表单提交数据、进行审批等。"用户任务"会关联一些页面呈现给用户进行处理。标准页面预置了几种与工作流流程相关的事件，供工作流关联标准页面时使用。 - BPM-提交实例 该预置动作用于将数据提交到工作流，与预置的API"context.$工作流.submitInstance (variables:object)"效果相同。 1. 选中相关组件（如按钮），在右侧"事件"页签中，单击"点击"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912540784.png)，进入添加动作页面。 2. 在"内置动作 \> BPM"中，单击"BPM-提交实例"。 3. 在右侧页面，设置相关参数，单击"创建"。 图14选择动作 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912380888.png "点击放大") - BPM名称：工作流的名称，如果不配置，则默认使用页面的查询参数"bp.name"。 - 待提交的变量赋值：给待提交的变量赋值。 - 返回值绑定模型：返回值绑定到页面模型中。 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945219989.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912540788.png)，预览页面，单击按钮，可预览事件效果。 - BPM-提交任务 该预置动作用于将数据提交到工作流，与预置的API"context.$工作流.submitTask (variables:object)"效果相同。 1. 选中相关组件（如按钮），在右侧"事件"页签中，单击"点击"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912380908.png)，进入添加动作页面。 2. 在"内置动作 \> BPM"中，单击"BPM-提交任务"。 3. 在右侧页面，设置相关参数，单击"创建"。 图15选择动作 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945219993.png "点击放大") - BPM实例ID：工作流的实例ID，如果不配置则默认使用页面的查询参数"interviewID"。 - 待提交的变量赋值：给待提交的变量赋值。 - 返回值绑定模型：返回值绑定到页面模型中。 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912540812.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912380896.png)，预览页面，填写问卷项后，单击"提交"按钮，可预览按钮的事件效果。 - BPM-转派任务 该预置动作用于转派工作流中的用户任务。 1. 选中相关组件（如按钮），在右侧"事件"页签中，单击"点击"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912540804.png)，进入添加动作页面。 2. 在"内置动作 \> BPM"中，选择"BPM-转派任务"。 3. 在右侧页面，设置相关参数，单击"创建"。 图16选择动作 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912540800.png "点击放大") - BPM实例ID：工作流的实例ID，如果不配置则默认使用页面的查询参数"interviewID"。 - 类型：根据实际需求，选择"转移"或"委托"。 - 返回值绑定模型：返回值绑定到页面模型中。 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912380900.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912380912.png)，预览页面，单击按钮，可预览事件效果。 - BPM-更改变量 该预置动作用于设置工作流中的变量值，与预置的API"context.$工作流.putVariables (variables:object, instId: string)"效果相同。 1. 选中相关组件（如按钮），在右侧"事件"页签中，单击"点击"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945219997.png)，进入添加动作页面。 2. 在"内置动作 \> BPM"中，选择"BPM-更改变量"。 3. 在右侧页面，设置相关参数，单击"创建"。 图17选择动作 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912380904.png "点击放大") - BPM实例ID：工作流的实例ID，如果不配置则默认使用页面的查询参数"interviewID"。 - 待提交的变量赋值：给待提交的变量赋值。 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945220005.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912540808.png)，预览页面，单击按钮，可预览事件效果。 - BPM-加载变量 该预置动作用于获取工作流中的参数变量，与预置的API"context.$工作流.loadVariables()"效果相同。 1. 选中相关组件（如按钮），在右侧"事件"页签中，单击"点击"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912380892.png)，进入添加动作页面。 2. 在"内置动作 \> BPM"中，选择"BPM-加载变量"。 3. 在右侧页面，设置相关参数，单击"创建"。 图18选择动作 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945220009.png "点击放大") - BPM实例ID：工作流的实例ID，如果不配置则默认使用页面的查询参数"interviewID"。 - 返回值绑定模型：返回值绑定到页面模型中。 4. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001912540792.png)，保存页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001945220001.png)，预览页面，单击按钮，可预览事件效果。 #### 调用脚本/服务编排 调用脚本和调用服务编排内置动作，用于在标准页面中调用脚本和服务编排。 1. 在标准页面设计界面，选中按钮组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002151926896.png)，进入添加动作页面。 3. 在"内置动作"中，单击"调用脚本/调用服务编排"。 4. 在右侧页面中，选择需要执行的脚本/服务编排，单击"创建"。 5. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002152084976.png)，保存页面。 6. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002187364121.png)，预览设置后效果。 #### 下载文件 通过该内置动作，可以将标准页面中的文件下载到指定的桶中。您也可以在"自定义动作"页签，通过自定义动作下载文件。 1. 在标准页面设计界面，选中相关组件。 2. 在右侧"事件"页签中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002235949710.png)，进入添加动作页面。 3. 在"内置动作"中，单击"文件下载"。 4. 在右侧页面中，设置连接器信息，单击"创建"。 表2文件下载参数说明 | 参数 | 说明 | |:---|:---| | 连接器类型 | 下载文件的存储类型，支持OBS和MINIO两种。 - OBS：通过OBS类型连接器，将文件存储到OBS上。 - MINIO：通过MINIO类型连接器，将文件存储到MINIO上。 | | 连接器名称 | 选择[对接OBS云对象存储实例](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9217.html)或[对接MINIO存储对象或资产](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9218.html)中，创建连接器时配置的名称。 | | 桶名 | 选择桶的名称，即下载的文件存储到哪个桶中。 | | 文件存储位置 | 选择文件存储的位置，支持如下几种： - 常量/表达式：设置为固定值或者使用内置的表达式计算的结果。 - 控件属性：将当前页面组件的属性作为该项的值，例如控件名称、标签等。 - 控件值：将当前页面组件获取的值作为该项的值，如输入框组件输入的值，下拉框组件选择的值等。 - URL参数：使用组件所在页面链接中的URL查询参数的值，设置为查询参数的key，页面中需要有对应的查询参数。 | 5. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002271068865.png)，保存页面。 6. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002270908909.png)，预览设置后效果。