# 通过自定义动作实现标准页面组件交互
#### 操作场景
如果您擅长编写JavaScript代码，可以不使用事件编排器中的内置动作，直接通过手动编写JavaScript代码实现事件的逻辑功能。低代码平台支持在手动编写JavaScript代码时，进行代码联想提示，并封装了一些常用功能的接口，并将其中典型接口做成模板，供您直接使用。
- 内置的模板代码，主要包括组件、消息\&弹窗、页面、表单、表格、服务等。在编写JavaScript代码时，可直接使用系统预置的API，相关API说明，请参见[标准页面中预置的API](https://support.huaweicloud.com/api-astrozero/astrozero_api_00101.html)。
  图1使用内置的模板代码   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002133040825.png "点击放大") 

- 当代码较多时，可以单击代码编辑区域右上侧的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894300480.png)，最大化代码编辑页面。
- 单击具体模板代码事件左侧的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100169.png)，可复制该模板代码。复制后，可在右侧代码编辑区域中进行粘贴。
- 单击具体模板代码事件右侧的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140576.png)，可打开该模板代码进行编辑，编辑后支持拷贝。关闭模板代码后，模板代码还是初始代码，不会将您在模板代码中编辑后的内容，保存到该事件的模板代码中。
#### 通过自定义JavaScript代码编排事件
通过手动编写JavaScript代码，实现按钮的事件逻辑。系统支持在手动编写JavaScript代码时，进行代码联想提示。同时，系统还封装了一些常用功能的接口，并将其中典型接口做成模板，可以从左侧拖动相关模板至右侧事件定义区域，直接使用。
1. 参考[登录华为云Astro轻应用应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9004.html)中操作，进入应用设计器。
2. 在应用设计器的左侧导航栏中，选择"界面"。
3. 在页面中，将鼠标放在对应的标准页面上，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001942020962.png)，选择"编辑"。
4. 在标准页面开发界面，选中按钮组件。
5. 在右侧"事件"页签中，单击"点击"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001942180238.png)，进入"添加动作"页面。
6. 选择"自定义动作"，在右侧事件定义区域，输入实现事件逻辑的JavaScript代码，也可从左侧拖动相关模板至右侧事件定义区域，单击"创建"。 
   图2自定义JavaScript代码   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001969299177.png "点击放大")
   自定义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在标准页面的事件代码中与工作流交互   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001969193149.png "点击放大")
   
   
7. 返回标准页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001969179445.png)，保存页面。