文档首页/ Astro轻应用 AstroZero/ 用户指南（低代码）/ 使用AstroZero开发应用前端/ 标准页面/ 添加事件实现AstroZero组件间交互/ 通过自定义动作实现AstroZero标准页面组件交互
更新时间：2024-12-04 GMT+08:00
查看PDF
分享

通过自定义动作实现AstroZero标准页面组件交互

操作场景

如果您擅长编写JavaScript代码，可以不使用事件编排器中的内置动作，直接通过手动编写JavaScript代码实现事件的逻辑功能。低代码平台支持在手动编写JavaScript代码时，进行代码联想提示，并封装了一些常用功能的接口，并将其中典型接口做成模板，供您直接使用。

  • 内置的模板代码，主要包括组件、消息&弹窗、页面、表单、表格、服务等。在编写JavaScript代码时，可直接使用系统预置的API，相关API说明，请参见标准页面中预置的API。
    图1 使用内置的模块代码
  • 当代码较多时，可以单击代码编辑区域右上侧的，最大化代码编辑页面。
  • 单击具体模板代码事件左侧的，可复制该模板代码。复制后，可在右侧代码编辑区域中进行粘贴。
  • 单击具体模板代码事件右侧的，可打开该模板代码进行编辑，编辑后支持拷贝。关闭模板代码后，模板代码还是初始代码，不会将您在模板代码中编辑后的内容，保存到该事件的模板代码中。

通过自定义JavaScript代码编排事件

通过手动编写JavaScript代码，实现按钮的事件逻辑。系统支持在手动编写JavaScript代码时，进行代码联想提示。同时，系统还封装了一些常用功能的接口，并将其中典型接口做成模板，可以从左侧拖动相关模板至右侧事件定义区域，直接使用。

  1. 参考登录AstroZero新版应用设计器中操作，进入应用设计器。
  2. 在应用设计器的左侧导航栏中，选择“界面”。
  3. 在页面中，将鼠标放在对应的标准页面上，单击，选择“编辑”。
  4. 在标准页面开发界面，选中按钮组件。
  5. 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。
  6. 选择“自定义动作”，在右侧事件定义区域，输入实现事件逻辑的JavaScript代码，也可从左侧拖动相关模板至右侧事件定义区域，单击“创建”。

    图2 自定义JavaScript代码

    自定义JavaScript代码示例如下：

    //当前组件
var _component = context.$component.current;
//当前Form
var  _form = context.$component.form;
// 重置表单
_form.resetFields();

    在标准页面的自定义事件中，还内置了一些与工作流BPM交互的API：

    • 获取变量：context.$工作流.loadVariables(): Promise
    • 提交任务、流程： context.$工作流.submitTask(variables: {[key: string]: any}): Promise
    • 修改变量： context.$工作流.putVariables(variables: {[key: string]: any}): Promise
    图3 在标准页面的事件代码中与工作流交互

  7. 返回标准页面开发界面，单击页面上方的，保存页面。

相关文档