# 如何使用页面JS插件
在日常的代码开发过程中，您可能需要为某个区块或元素添加事件（例如单击事件）。这类事件通常会被集中管理，并保存在对应的页面JavaScript文件中。
有时，您还需要自定义一些方法以便复用某些逻辑，或者将一些多步骤这样较为复杂的逻辑整合到一起形成自定义方法，这些自定义的方法也需在页面JS文件中实现。在此过程中，需要注意的是，当前页面JS仅支持使用声明式函数定义方式，不支持使用函数表达式声明函数，并且不允许在页面JS中定义其他变量。
以"物料审批流程页面"为例，当用户单击"同步物料信息"按钮时，需完成以下操作：
1. 调用接口A，获取物料最新主数据（如SAP数据）。
2. 调用接口B，将获取的物料数据同步至当前表单。
3. 向用户提示"同步成功"。
通过页面JS插件，可根据上述逻辑编写对应函数，实现按钮单击事件的完整处理流程。
#### 编写JS函数
1. 登录流程引擎。
2. 在左侧导航栏中，选择"流程编排服务 \> 流程元模板"，进入"流程元模板"页面。
3. 在流程元模板所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002395069389.png)，进入流程元模板的编辑模式。
4. 单击"UI编辑"，切换至"UI编辑"页面。
5. 在导航树栏中，选择您需要编写JS函数的流程节点，单击左侧插件栏中的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002366258610.png)，即可在展开的JS页面编写您的JS代码。
   
   如果您对如何使用JS感到不熟悉，可以单击页面上方的"展示使用帮助"，系统将会显示一些JS代码示例供您参考学习。当您查看完示例后，单击"关闭使用帮助"，即可返回到代码编辑页面继续您的工作。
   根据示例，编写如下代码：
   ```
   // 自定义请求
   function syncInfo() {
     // 第一步：先调用接口 A：获取物料的最新主数据（如SAP数据）
     const request1 = this.utils.lcRequest();
     // 封装请求参数
     const params1 = {
       url: '/test01/A', // url地址
       method: 'get', // 请求类型
       params: { queryParams: 'xxx1' }, // query参数
       data: { bodyParams: 'xxx2' } // body参数
     };
     // 发起请求，打印请求结果
     request1(params1).then((res) => {
       console.log(res);
       // 第二步：再调用接口 B：将获取到的物料数据同步到当前表单；
       const request2 = this.utils.lcRequest();
       // 封装请求参数
       const params2 = {
         url: '/test01/B', // url地址
         method: 'post', // 请求类型
         params: { queryParams: 'xxx1' }, // query参数
         data: { bodyParams: res } // 使用接口A的响应数据作为参数
       };
       // 发起请求，打印请求结果
       request2(params2).then((res) => {
         console.log(res);
         // 第三步：向用户提示“同步成功”
         this.utils.toast.success('同步成功');
       });
     });
   }
   ```
   
   
6. 编写完JS代码后，单击JS编辑页面右上角的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002366457684.png)，保存所做的修改。
   
   注意，每个节点页面对应的是不同的JS页面，请确保在正确的页面中保存代码。
   
   
 
#### 相关操作
在完成JS代码编写后，您可以根据实际业务场景，为流程节点的UI页面组件绑定对应的JS逻辑。例如，选中"物料审批流程页面"中的"同步物料信息"按钮，在组件属性面板中为其绑定相应的JS代码。具体操作请参见[为自定义事件绑定自定义JS](https://support.huaweicloud.com/usermanual-idme/idme_base_0099.html#ZH-CN_TOPIC_0000002009427628__section322118275111)。