通过内置动作实现AstroZero标准页面组件交互

通过内置动作编排事件

1. 参考登录AstroZero新版应用设计器中操作，进入应用设计器。
2. 在应用设计器的左侧导航栏中，选择“界面”。
3. 在页面中，将鼠标放在对应的页面上，单击，选择“编辑”。
4. 在标准页面开发界面，选中按钮组件。
5. 在右侧“事件”页签中，单击“点击”后的“+”，进入添加动作页面。
6. 在“内置动作”中，单击“重置表单”，选择需要重置的表单，单击“创建”。
   图1 添加动作
   

   本示例选择“重置表单”内置动作，其他内置动作功能介绍，如表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. 返回标准页面开发界面，单击页面上方的，保存页面，并单击，预览页面。
8. 在表单中输入数据，单击“重置”按钮，可预览按钮的事件效果。

打开页面

在标准页面中，“打开页面”内置动作通常用于实现页面的跳转功能。以单击“立即体验”按钮，打开新的产品体验入口页面为例，进行介绍。

1. 在标准页面设计界面，选中按钮组件。
2. 在右侧“事件”页签中，单击，进入添加动作页面。
3. 在“内置动作”中，单击“打开页面”，配置目标页面、打开方式等参数，单击“创建”。
   图2 打开页面
   
   • 目标页面：设置待打开的目标页面。
     • 当前应用页面：当前应用中，已创建好的页面。
     • URL：某个页面的URL。
     • 重新加载当前页面：加载刷新当前的页面。
   • 打开方式：设置目标页面的打开方式，如在新标签页中打开或在当前窗口打开。
   • 参数绑定：当打开的页面URL中，有参数时，可单击“添加”，设置页面URL路径中的参数。

4. 返回标准页面开发界面，单击页面上方的，保存页面。
5. 单击，预览页面，单击“立即体验”按钮，可预览按钮的事件效果。

弹出页面

在标准页面中，“弹出页面”内置动作通常用于实现弹出窗口或对话框的功能。以单击“提交”按钮，弹出“提交成功”的提示页面为例，进行介绍。

1. 在标准页面设计界面，选中按钮组件。
2. 在右侧“事件”页签中，单击，进入添加动作页面。
3. 在“内置动作”中，单击“弹出页面”，配置目标页面、窗口选项，单击“创建”。
   图3 弹出页面
   
   • 目标页面：设置弹出的目标页面类型。
     • 当前应用页面：当前应用中，已创建好的页面。
     • URL：某个页面的URL。
   • 窗口可拖拽：窗口是否可来回拖拽。
   • 窗口标题：弹出窗口的标题内容。
   • 窗口位置：弹出窗口在屏幕的位置，如屏幕中央或屏幕顶部居中。
   • 窗口宽度：窗口的宽度，单位像素。
   • 窗口高度：窗口的高度，单位像素。

4. 返回标准页面开发界面，单击页面上方的，保存页面。
5. 单击，预览页面，单击“提交”按钮，可预览按钮的事件效果。

关闭弹出页面

在标准页面中，“关闭弹出页面”内置动作通常用于实现关闭弹出页面的功能。以单击“确定”按钮，关闭弹出页面为例，进行介绍。

1. 在标准页面设计界面，选中按钮组件。
2. 在右侧“事件”页签中，单击，进入添加动作页面。
3. 在“内置动作”，单击“关闭弹出页面”，单击“创建”。
   图4 关闭弹出页面
   

4. 返回标准页面开发界面，单击页面上方的，保存页面。
5. 单击，预览页面，单击“确定”按钮，可预览按钮的事件效果。

弹出消息对话框

在标准页面中，“弹出消息对话框”内置动作通常用于弹出消息对话框。以单击“确定”按钮，弹出“创建实例成功”的消息对话框为例进行介绍。

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

     例如：勾选该参数，并设置延时3秒。效果为弹出消息对话框后，3秒后自动关闭该弹框。

4. 返回标准页面开发界面，单击页面上方的，保存页面。
5. 单击，预览页面，单击“确定”按钮，可预览按钮的事件效果。

显示/隐藏控件

“显示/隐藏控件”内置动作，用于控制标准页面中全部或部分组件是否可见。

1. 在标准页面设计界面，选中按钮组件。
2. 在右侧“事件”页签中，单击，进入添加动作页面。
3. 在“内置动作”中，单击“显示/隐藏控件”。
4. 在右侧页面中，单击“添加控件”，选择需要设置的组件，单击“确定”。
   图6 选择组件
   

5. 设置组件是否显示，单击“创建”。
   图7 组件是否显示
   

6. 返回标准页面开发界面，单击页面上方的，保存页面。
7. 单击，预览设置后效果。

启用/禁用控件

“启用/禁用控件”内置动作，用于控制标准页面中全部或部分组件是否启用。

1. 在标准页面设计界面，选中按钮组件。
2. 在右侧“事件”页签中，单击，进入添加动作页面。
3. 在“内置动作”中，单击“启用/禁用控件”。
4. 在右侧页面中，单击“添加控件”，选择需要设置的组件，单击“确定”。
   图8 选择组件
   

5. 设置组件是否启用，单击“创建”。
   图9 设置是否启用
   

6. 返回标准页面开发界面，单击页面上方的，保存页面。
7. 单击，预览设置后效果。

只读/编辑控件

“只读/编辑控件”内置动作，用于控制标准页面中全部或部分组件是否可编辑。

1. 在标准页面设计界面，选中按钮组件。
2. 在右侧“事件”页签中，单击，进入添加动作页面。
3. 在“内置动作”中，单击“只读/编辑控件”。
4. 在右侧页面中，单击“添加控件”，选择需要设置的组件，单击“确定”。
   图10 选择组件
   

5. 设置组件是否可编辑，单击“创建”。
   图11 是否可编辑
   

6. 返回标准页面开发界面，单击页面上方的，保存页面。
7. 单击，预览设置后的效果。

提交表单

在标准页面中，“提交表单”内置动作通常用于实现表单提交功能。

1. 在标准页面设计界面，选中按钮组件。
2. 在右侧“事件”页签中，单击，进入添加动作页面。
3. 在“内置动作”中，单击“提交表单”。
4. 在右侧页面中，选择待提交的表单，单击“创建”。
   图12 选择待提交的表单
   

5. 返回标准页面开发界面，单击页面上方的，保存页面。
6. 单击，预览设置后的效果。

打印

在标准页面中，“打印”内置动作通常用于打印表单中的字段。

1. 在标准页面设计界面，选中按钮组件。
2. 在右侧“事件”页签中，单击，进入添加动作页面。
3. 在“内置动作”中，单击“打印”。
4. 在右侧页面中，单击“设置”。
5. 在打印设置中，选择表单中待打印的字段，单击“确认”。
   图13 打印设置
   

6. 单击“保存”，返回标准页面开发界面，单击页面上方的，保存页面。
7. 单击，预览设置后的效果。

BPM

在工作流中经常使用到“用户任务”图元，表示在业务流程中由用户参与完成某些工作，如填写表单提交数据、进行审批等。“用户任务”会关联一些页面呈现给用户进行处理。标准页面预置了几种与工作流流程相关的事件，供工作流关联标准页面时使用。

• BPM-提交实例

  该预置动作用于将数据提交到工作流，与预置的API“context.$工作流.submitInstance (variables:object)”效果相同。

  1. 选中相关组件（如按钮），在右侧“事件”页签中，单击“点击”后的，进入添加动作页面。
  2. 在“内置动作 > BPM”中，单击“BPM-提交实例”。
  3. 在右侧页面，设置相关参数，单击“创建”。
     图14 选择动作
     
     • BPM名称：工作流的名称，如果不配置，则默认使用页面的查询参数“bp.name”。
     • 待提交的变量赋值：给待提交的变量赋值。
     • 返回值绑定模型：返回值绑定到页面模型中。
  4. 返回标准页面开发界面，单击页面上方的，保存页面。
  5. 单击，预览页面，单击按钮，可预览事件效果。
• BPM-提交任务

  该预置动作用于将数据提交到工作流，与预置的API“context.$工作流.submitTask (variables:object)”效果相同。

  1. 选中相关组件（如按钮），在右侧“事件”页签中，单击“点击”后的，进入添加动作页面。
  2. 在“内置动作 > BPM”中，单击“BPM-提交任务”。
  3. 在右侧页面，设置相关参数，单击“创建”。
     图15 选择动作
     
     • BPM实例ID：工作流的实例ID，如果不配置则默认使用页面的查询参数“interviewID”。
     • 待提交的变量赋值：给待提交的变量赋值。
     • 返回值绑定模型：返回值绑定到页面模型中。
  4. 返回标准页面开发界面，单击页面上方的，保存页面。
  5. 单击，预览页面，填写问卷项后，单击“提交”按钮，可预览按钮的事件效果。
• BPM-转派任务

  该预置动作用于转派工作流中的用户任务。

  1. 选中相关组件（如按钮），在右侧“事件”页签中，单击“点击”后的，进入添加动作页面。
  2. 在“内置动作 > BPM”中，选择“BPM-转派任务”。
  3. 在右侧页面，设置相关参数，单击“创建”。
     图16 选择动作
     
     • BPM实例ID：工作流的实例ID，如果不配置则默认使用页面的查询参数“interviewID”。
     • 类型：根据实际需求，选择“转移”或“委托”。
     • 返回值绑定模型：返回值绑定到页面模型中。
  4. 返回标准页面开发界面，单击页面上方的，保存页面。
  5. 单击，预览页面，单击按钮，可预览事件效果。
• BPM-更改变量

  该预置动作用于设置工作流中的变量值，与预置的API“context.$工作流.putVariables (variables:object, instId: string)”效果相同。

  1. 选中相关组件（如按钮），在右侧“事件”页签中，单击“点击”后的，进入添加动作页面。
  2. 在“内置动作 > BPM”中，选择“BPM-更改变量”。
  3. 在右侧页面，设置相关参数，单击“创建”。
     图17 选择动作
     
     • BPM实例ID：工作流的实例ID，如果不配置则默认使用页面的查询参数“interviewID”。
     • 待提交的变量赋值：给待提交的变量赋值。
  4. 返回标准页面开发界面，单击页面上方的，保存页面。
  5. 单击，预览页面，单击按钮，可预览事件效果。
• BPM-加载变量

  该预置动作用于获取工作流中的参数变量，与预置的API“context.$工作流.loadVariables()”效果相同。

  1. 选中相关组件（如按钮），在右侧“事件”页签中，单击“点击”后的，进入添加动作页面。
  2. 在“内置动作 > BPM”中，选择“BPM-加载变量”。
  3. 在右侧页面，设置相关参数，单击“创建”。
     图18 选择动作
     
     • BPM实例ID：工作流的实例ID，如果不配置则默认使用页面的查询参数“interviewID”。
     • 返回值绑定模型：返回值绑定到页面模型中。
  4. 返回标准页面开发界面，单击页面上方的，保存页面。
  5. 单击，预览页面，单击按钮，可预览事件效果。