# 添加事件实现UI编辑页面插件间交互 在UI编辑页面中，不同物料插件间的交互功能需要通过添加事件来实现。具体操作如下： #### 前提条件 - 已在"UI编辑"页面添加相应物料插件，具体操作请参见[如何使用物料插件](https://support.huaweicloud.com/usermanual-idme/idme_base_0108.html)。 - 如需为自定义事件绑定自定义JavaScript，需提前在JS页面完成代码编写，具体操作请参见[如何使用页面JS插件](https://support.huaweicloud.com/usermanual-idme/idme_base_0111.html)。 #### 添加自定义事件 1. 在"UI编辑"页面，选中对应物料插件，并在右侧的组件属性面板中选择"高级"页签。 2. 单击"事件绑定"栏的"添加自定义事件"。 3. 在弹出的消息框中，设置如下信息，单击"确定"。 图1添加自定义事件 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002367064562.png) - 事件函数名：填写浏览器事件的名称，需采用小驼峰格式，例如onDrag。流程引擎支持多种事件类型，详情请参见[支持的自定义事件](https://support.huaweicloud.com/usermanual-idme/idme_base_0103.html)。 - 事件描述：简要描述该事件的功能或作用。 #### 为自定义事件绑定API 1. 在"UI编辑"页面，选中对应物料插件，并在右侧的组件属性面板中选择"高级"页签。 2. 将鼠标移动至"事件绑定"栏的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002219054718.png)，单击展开的触发事件消息框（如"onClick 鼠标单击时触发"）。 3. 将鼠标移动至事件右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002254258617.png)，单击"绑定API"。 图2绑定API ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002400548077.png) 4. 在弹出的"绑定API"窗口中，设置如下信息，单击"确定"。 表1设置绑定API信息 | 类型 | 参数 | 参数说明 | |:---|:---|:---| | 基本配置 | 接口地址 | 选择需要绑定的API地址。 如果没有可选择的接口地址，请参考[创建空白流程服务编排](https://support.huaweicloud.com/usermanual-idme/idme_base_0114.html)进行创建。 | | 基本配置 | 请求类型 | 选择对应的HTTP请求类型。 - POST 通用：用于通用数据提交。 - GET 查询：用于数据查询。 - PUT 更新：用于数据更新。 - DELETE 删除：用于数据删除。 | | 基本配置 | 触发条件 | 系统默认配置，不可手动修改。 | | 入参配置 | 绑定类型 | 系统会根据您选择的"接口地址"，自动解析并展示该接口所需的请求参数。您可以根据实际业务需求，为每个参数配置对应的"绑定类型"，从而实现动态数据传递。 支持选择如下绑定类型： - 模型：绑定至系统中已定义的数据模型，适用于结构化数据传递。 - 变量：绑定至当前页面或组件内的局部变量，用于临时数据存储与传递。 - 全局变量：绑定至系统全局变量，可在任意页面或组件中访问，适用于共享数据。 - 流程变量：绑定至流程引擎中的变量，用于工作流场景下的数据传递与状态跟踪。 | | 入参配置 | 绑定字段 | 在选定"绑定类型"后，从该类型对应的数据源中选择的具体数据字段，用于与接口参数或事件逻辑进行关联。 | | 出参配置 | 绑定类型 | 系统会根据您选择的"接口地址"，自动解析并展示该接口所需的响应参数。您可以根据实际业务需求，为每个参数配置合适的"绑定类型"。 支持绑定的类型包括：模型、变量和全局变量。 | | 出参配置 | 绑定字段 | 在选定"绑定类型"后，从该类型对应的数据源中选择的具体数据字段，以便与接口的响应参数或后续的处理逻辑进行有效的关联。 | #### 为自定义事件绑定自定义JS 1. 在"UI编辑"页面，选中对应物料插件，并在右侧的组件属性面板中选择"高级"页签。 2. 将鼠标移动至"事件绑定"栏的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002362024186.png)，单击展开的触发事件消息框（如"onClick 鼠标单击时触发"）。 3. 将鼠标移动至事件右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002362184066.png)，单击"自定义JS"。 图3自定义JS ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002400633997.png) 4. 在弹出的"事件绑定"窗口中，选择需要绑定的响应方法，单击"确定"，即可完成绑定。 图4绑定自定义JS ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002395703909.png "点击放大")