尧图网站建设 
ToolJet Show Modal 操作完全指南事件触发、Debounce 与 JavaScript 调用【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetShow Modal显示模态框是 ToolJet 内置的事件操作Action之一用于在应用中打开指定的 Modal 组件。本文将基于 ToolJet 官方文档结合仓库源码深入讲解该操作的配置方法、Debounce 防抖参数、JavaScript 触发方式以及与 Modal 组件的配套使用技巧。操作概述Show Modal 操作的核心作用是为某个事件显示模态框。在 ToolJet 应用构建器中你可以通过事件处理器Event Handler触发该操作——例如当用户点击按钮、提交表单或完成查询时弹出模态框以显示详情、收集输入或呈现确认信息。该操作通常与 Modal 组件 搭配使用。Modal 组件用于在背景前渲染对话框阻止用户与页面其他部分交互直到模态框关闭非常适合用于灯箱lightbox、用户通知、表单等场景。在事件处理器中配置 Show Modal在 ToolJet 应用构建器中任意组件的事件处理器Event Handler都可以配置 Show Modal 操作在画布中选中一个组件如 Button在右侧属性面板中找到事件处理器区域。为特定事件如On Click添加一个处理器。在动作Action下拉框中选择Show modal。在 Modal 下拉框中选择要显示的模态框组件例如modal1。配置完成后当该事件触发时指定的模态框便会显示。官方文档中的配置界面如下Debounce 防抖参数Show Modal 操作的Debounce字段默认为空。你可以输入一个数值指定操作执行前等待的毫秒数。例如输入300则事件触发 300 毫秒后才显示模态框。Debounce 防抖机制在 ToolJet 事件系统中是一种通用能力适用于所有事件操作。当你在一个事件上连续触发多次例如快速多次点击按钮防抖可以让操作只在最后一次触发后的指定延迟后执行避免模态框被反复打开、关闭造成闪烁。Debounce 字段示例300 单位毫秒从 JavaScript 代码触发 Show Modal除了在事件处理器中配置外你还可以在Run JavaScript code查询RunJS中调用 Show Modal 操作。官方语法如下actions.showModal(modalName)其中modalName是 Modal 组件的名称例如actions.showModal(modal1)对应的关闭操作语法为actions.closeModal(modalName)例如actions.closeModal(modal1)在 RunJS 查询中你还可以将 Show Modal 与其他操作组合使用利用async-await实现更复杂的交互流程。例如先运行一个查询获取数据再根据结果打开模态框await queries.getUserData.run(); const user queries.getUserData.getData(); if (user user.status pending) { actions.showModal(modal1); } else { actions.showAlert(info, User is active); }完整的所有可从 RunJS 触发的操作列表参见 Run Actions from RunJS query。底层实现Show Modal 如何工作从源码层面看Show Modal 操作的执行路径位于前端事件系统中。在 frontend/src/AppBuilder/_stores/slices/eventsSlice.js 中定义了showModal函数showModal: (modal, show, eventObj, moduleId canvas) { try { const { getExposedValueOfComponent } get(); const modalId modal?.id ?? modal; if (_.isEmpty(modalId)) { throw new Error(No modal is associated with this event.); } const exposedValue getExposedValueOfComponent(modalId, moduleId); show ? exposedValue.open() : exposedValue.close(); return Promise.resolve(); } catch (error) { get().eventsSlice.logError( show ? show_modal : close_modal, show ? show-modal : close_modal, error, eventObj, { eventId: eventObj.eventType } ); } }该函数的实现要点参数解析modal参数既可以是模态框组件的 id也可以是一个包含id属性的对象兼容两种调用方式。空值校验如果modalId为空会抛出No modal is associated with this event.错误提示事件未关联任何模态框。底层调用通过getExposedValueOfComponent(modalId, moduleId)获取组件暴露值然后调用exposedValue.open()或exposedValue.close()。也就是说Show Modal 操作在底层等价于调用 Modal 组件的组件特定操作CSA。错误日志出错时记录show_modal/close_modal错误日志便于在构建器中排查问题。该函数在 frontend/src/AppBuilder/_stores/slices/eventsSlice.js 中被case show-modal和case close-modal两个分支调用分别对应事件系统中的 Show modal 与 Close modal 操作。Show Modal 与 Modal 组件特定操作CSA正如上文源码所示Show Modal 操作本质上是调用 Modal 组件的open()方法。而 Modal 组件的**组件特定操作CSA**同样提供了open与close两个方法可以直接在事件处理器中通过Control component操作调用或者在 RunJS 中调用await components.modal1.open() await components.modal1.close()三种打开模态框的方式总结如下方式示例适用场景事件处理器中的 Show modal 操作在事件处理器中选择 Show modal 并指定模态框无条件的简单打开UI 配置化RunJS 中的actions.showModal()actions.showModal(modal1)需要条件判断或与其他操作组合Modal 组件特定操作await components.modal1.open()直接控制组件支持 await 等待完成配套使用Modal 组件关键属性为了用好 Show Modal 操作了解 Modal 组件的关键属性很有帮助。根据 Modal 组件文档其核心属性包括属性说明默认值Title模态框头部显示的标题-Loading state显示模态框内容加载动画常与查询的isLoading属性绑定关闭Hide title bar隐藏模态框标题栏关闭Hide close button隐藏模态框关闭按钮关闭Close on escape key按 Esc 键关闭模态框开启Close on outside click点击模态框外部区域时关闭关闭Modal size模态框尺寸可选small/medium/largemediumModal height模态框高度400pxModal 组件支持On open与On close两个事件你也可以为这两个事件配置多个处理器实现模态框打开或关闭时的联动逻辑。常见使用场景确认对话框点击删除按钮时通过 Show Modal 打开一个包含确认信息的模态框用户确认后才执行删除查询。详情查看表格行点击事件中触发 Show Modal将选中行的数据通过{{components.table1.selectedRow}}绑定到模态框内的文本或表单组件上。表单收集在模态框中放置 Form 组件通过 Show Modal 打开提交后使用 Close modal 操作关闭。条件弹出在 RunJS 中根据查询结果或表单校验结果决定是否调用actions.showModal()弹出提示。小结Show Modal 是 ToolJet 中最常用的交互操作之一配置简单、触发方式灵活。无论是通过事件处理器进行 UI 配置化触发还是通过 RunJS 进行编程式控制都能快速实现模态框的显示。结合 Debounce 防抖参数你可以精确控制模态框弹出的时机从而打造更流畅、更可控的用户交互体验。更多操作参考可查看 Actions 参考文档 及其他操作文档。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ToolJet Show Modal 操作完全指南：事件触发、Debounce 与 JavaScript 调用
ToolJet Show Modal 操作完全指南事件触发、Debounce 与 JavaScript 调用【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetShow Modal显示模态框是 ToolJet 内置的事件操作Action之一用于在应用中打开指定的 Modal 组件。本文将基于 ToolJet 官方文档结合仓库源码深入讲解该操作的配置方法、Debounce 防抖参数、JavaScript 触发方式以及与 Modal 组件的配套使用技巧。操作概述Show Modal 操作的核心作用是为某个事件显示模态框。在 ToolJet 应用构建器中你可以通过事件处理器Event Handler触发该操作——例如当用户点击按钮、提交表单或完成查询时弹出模态框以显示详情、收集输入或呈现确认信息。该操作通常与 Modal 组件 搭配使用。Modal 组件用于在背景前渲染对话框阻止用户与页面其他部分交互直到模态框关闭非常适合用于灯箱lightbox、用户通知、表单等场景。在事件处理器中配置 Show Modal在 ToolJet 应用构建器中任意组件的事件处理器Event Handler都可以配置 Show Modal 操作在画布中选中一个组件如 Button在右侧属性面板中找到事件处理器区域。为特定事件如On Click添加一个处理器。在动作Action下拉框中选择Show modal。在 Modal 下拉框中选择要显示的模态框组件例如modal1。配置完成后当该事件触发时指定的模态框便会显示。官方文档中的配置界面如下Debounce 防抖参数Show Modal 操作的Debounce字段默认为空。你可以输入一个数值指定操作执行前等待的毫秒数。例如输入300则事件触发 300 毫秒后才显示模态框。Debounce 防抖机制在 ToolJet 事件系统中是一种通用能力适用于所有事件操作。当你在一个事件上连续触发多次例如快速多次点击按钮防抖可以让操作只在最后一次触发后的指定延迟后执行避免模态框被反复打开、关闭造成闪烁。Debounce 字段示例300 单位毫秒从 JavaScript 代码触发 Show Modal除了在事件处理器中配置外你还可以在Run JavaScript code查询RunJS中调用 Show Modal 操作。官方语法如下actions.showModal(modalName)其中modalName是 Modal 组件的名称例如actions.showModal(modal1)对应的关闭操作语法为actions.closeModal(modalName)例如actions.closeModal(modal1)在 RunJS 查询中你还可以将 Show Modal 与其他操作组合使用利用async-await实现更复杂的交互流程。例如先运行一个查询获取数据再根据结果打开模态框await queries.getUserData.run(); const user queries.getUserData.getData(); if (user user.status pending) { actions.showModal(modal1); } else { actions.showAlert(info, User is active); }完整的所有可从 RunJS 触发的操作列表参见 Run Actions from RunJS query。底层实现Show Modal 如何工作从源码层面看Show Modal 操作的执行路径位于前端事件系统中。在 frontend/src/AppBuilder/_stores/slices/eventsSlice.js 中定义了showModal函数showModal: (modal, show, eventObj, moduleId canvas) { try { const { getExposedValueOfComponent } get(); const modalId modal?.id ?? modal; if (_.isEmpty(modalId)) { throw new Error(No modal is associated with this event.); } const exposedValue getExposedValueOfComponent(modalId, moduleId); show ? exposedValue.open() : exposedValue.close(); return Promise.resolve(); } catch (error) { get().eventsSlice.logError( show ? show_modal : close_modal, show ? show-modal : close_modal, error, eventObj, { eventId: eventObj.eventType } ); } }该函数的实现要点参数解析modal参数既可以是模态框组件的 id也可以是一个包含id属性的对象兼容两种调用方式。空值校验如果modalId为空会抛出No modal is associated with this event.错误提示事件未关联任何模态框。底层调用通过getExposedValueOfComponent(modalId, moduleId)获取组件暴露值然后调用exposedValue.open()或exposedValue.close()。也就是说Show Modal 操作在底层等价于调用 Modal 组件的组件特定操作CSA。错误日志出错时记录show_modal/close_modal错误日志便于在构建器中排查问题。该函数在 frontend/src/AppBuilder/_stores/slices/eventsSlice.js 中被case show-modal和case close-modal两个分支调用分别对应事件系统中的 Show modal 与 Close modal 操作。Show Modal 与 Modal 组件特定操作CSA正如上文源码所示Show Modal 操作本质上是调用 Modal 组件的open()方法。而 Modal 组件的**组件特定操作CSA**同样提供了open与close两个方法可以直接在事件处理器中通过Control component操作调用或者在 RunJS 中调用await components.modal1.open() await components.modal1.close()三种打开模态框的方式总结如下方式示例适用场景事件处理器中的 Show modal 操作在事件处理器中选择 Show modal 并指定模态框无条件的简单打开UI 配置化RunJS 中的actions.showModal()actions.showModal(modal1)需要条件判断或与其他操作组合Modal 组件特定操作await components.modal1.open()直接控制组件支持 await 等待完成配套使用Modal 组件关键属性为了用好 Show Modal 操作了解 Modal 组件的关键属性很有帮助。根据 Modal 组件文档其核心属性包括属性说明默认值Title模态框头部显示的标题-Loading state显示模态框内容加载动画常与查询的isLoading属性绑定关闭Hide title bar隐藏模态框标题栏关闭Hide close button隐藏模态框关闭按钮关闭Close on escape key按 Esc 键关闭模态框开启Close on outside click点击模态框外部区域时关闭关闭Modal size模态框尺寸可选small/medium/largemediumModal height模态框高度400pxModal 组件支持On open与On close两个事件你也可以为这两个事件配置多个处理器实现模态框打开或关闭时的联动逻辑。常见使用场景确认对话框点击删除按钮时通过 Show Modal 打开一个包含确认信息的模态框用户确认后才执行删除查询。详情查看表格行点击事件中触发 Show Modal将选中行的数据通过{{components.table1.selectedRow}}绑定到模态框内的文本或表单组件上。表单收集在模态框中放置 Form 组件通过 Show Modal 打开提交后使用 Close modal 操作关闭。条件弹出在 RunJS 中根据查询结果或表单校验结果决定是否调用actions.showModal()弹出提示。小结Show Modal 是 ToolJet 中最常用的交互操作之一配置简单、触发方式灵活。无论是通过事件处理器进行 UI 配置化触发还是通过 RunJS 进行编程式控制都能快速实现模态框的显示。结合 Debounce 防抖参数你可以精确控制模态框弹出的时机从而打造更流畅、更可控的用户交互体验。更多操作参考可查看 Actions 参考文档 及其他操作文档。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考