添加事件实现UI编辑页面插件间交互

前提条件

• 已在“UI编辑”页面添加相应物料插件，具体操作请参见如何使用物料插件。
• 如需为自定义事件绑定自定义JavaScript，需提前在JS页面完成代码编写，具体操作请参见如何使用页面JS插件。

添加自定义事件

1. 在“UI编辑”页面，选中对应物料插件，并在右侧的组件属性面板中选择“高级”页签。
2. 单击“事件绑定”栏的“添加自定义事件”。
3. 在弹出的消息框中，设置如下信息，单击“确定”。
   图1 添加自定义事件
   
   • 事件函数名：填写浏览器事件的名称，需采用小驼峰格式，例如onDrag。
   • 事件描述：简要描述该事件的功能或作用。

为自定义事件绑定API

1. 在“UI编辑”页面，选中对应物料插件，并在右侧的组件属性面板中选择“高级”页签。
2. 将鼠标移动至“事件绑定”栏的，单击展开的触发事件消息框（如“onClick 鼠标单击时触发”）。
3. 将鼠标移动至事件右侧的，单击“绑定API”。
   图2 绑定API
   

4. 在弹出的“绑定API”窗口中，设置如下信息，单击“确定”。

   表1 设置绑定API信息

   类型	参数	参数说明
   基本配置	接口地址	填写需要绑定的API地址。 如果没有可选择的接口地址，请参考创建空白流程服务编排进行创建。
   	请求类型	选择对应的HTTP请求类型。 POST 通用：用于通用数据提交。 GET 查询：用于数据查询。 PUT 更新：用于数据更新。 DELETE 删除：用于数据删除。
   	触发条件	系统默认配置，不可手动修改。
   入参配置	绑定类型	系统会根据您选择的“接口地址”，自动解析并展示该接口所需的请求参数。您可以根据实际业务需求，为每个参数配置对应的“绑定类型”，从而实现动态数据传递。 支持选择如下绑定类型： 模型：绑定至系统中已定义的数据模型，适用于结构化数据传递。 变量：绑定至当前页面或组件内的局部变量，用于临时数据存储与传递。 全局变量：绑定至系统全局变量，可在任意页面或组件中访问，适用于共享数据。 流程变量：绑定至流程引擎中的变量，用于工作流场景下的数据传递与状态跟踪。
   	绑定字段	在选定“绑定类型”后，从该类型对应的数据源中选择的具体数据字段，用于与接口参数或事件逻辑进行关联。
   出参配置	绑定类型	系统会根据您选择的“接口地址”，自动解析并展示该接口所需的响应参数。您可以根据实际业务需求，为每个参数配置合适的“绑定类型”。 支持绑定的类型包括：模型、变量和全局变量。
   	绑定字段	在选定“绑定类型”后，从该类型对应的数据源中选择的具体数据字段，以便与接口的响应参数或后续的处理逻辑进行有效的关联。

为自定义事件绑定自定义JS

1. 在“UI编辑”页面，选中对应物料插件，并在右侧的组件属性面板中选择“高级”页签。
2. 将鼠标移动至“事件绑定”栏的，单击展开的触发事件消息框（如“onClick 鼠标单击时触发”）。
3. 将鼠标移动至事件右侧的，单击“自定义JS”。
   图3 自定义JS
   

4. 在弹出的“事件绑定”窗口中，选择需要绑定的响应方法，单击“确定”，即可完成绑定。
   图4 绑定自定义JS