ToolJet Show Alert 动作完整指南：配置提示消息、四种类型、防抖延迟与 RunJS 触发-北京尧图网络

ToolJet Show Alert 动作完整指南配置提示消息、四种类型、防抖延迟与 RunJS 触发【免费下载链接】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 Alert 是 ToolJet 应用编辑器中开箱即用的内置动作Action用于在应用界面弹出提示消息向用户即时反馈操作结果——例如保存成功、删除确认、校验失败或后台任务完成。本指南以 show-alert.md 为骨架结合仓库前端源码事件管理器、事件执行切片与 RunJS 动作指南系统讲解如何在事件处理器中配置 Show Alert、理解四种提示类型与防抖参数并掌握在 JavaScript 代码中编程式触发提示的完整姿势。读完本文你可以在任意 ToolJet 应用中熟练使用该动作并理解其底层实现机制。一、Show Alert 动作概览Show Alert 允许你在应用中显示一条提醒消息。它的核心能力可以概括为两点自定义消息内容message你可以为提示设置任意文本选择提示类型alert typeToolJet 提供Info信息、Success成功、Warning警告、Error错误四种提示类型分别以不同的视觉风格呈现。在仓库前端代码中该动作被注册在 ActionTypes.js 内定义如下{ name: Show Alert, id: show-alert, options: [{ name: message, type: text, default: Message ! }], group: run-action, }从中可以看出动作的唯一标识是show-alert归属分组为run-action运行类动作并且动作级默认的消息占位值为Message !。当你在事件管理器中新建事件时默认创建的事件消息为Hello world!、类型为info见 EventManager.jsxconst createdEvent await createAppVersionEventHandlers({ event: { eventId: selectedEventId, actionId: show-alert, message: Hello world!, alertType: info, ... }, ... });二、在事件处理器中配置 Show AlertShow Alert 通常绑定在组件的某个事件上如按钮的onClick配置路径为在画布上选中一个组件打开右侧Inspector面板在事件列表区域点击 Add handler新增事件处理器Event选择触发事件例如onClickAction下拉框选择Show Alert在下方的Configure action配置动作区域填写两个字段。事件管理器中针对show-alert渲染的配置字段位于 EventManager.jsx共两个字段说明输入形式Message要显示的提示消息内容代码编辑器CodeHinter支持内联 JavaScript 表达式Alert Type提示类型Info / Success / Warning / Error下拉选择RocketSelect其中Message字段使用的是 CodeHinter 代码编辑器这意味着你可以在消息中直接书写表达式例如{{components.table1.selectedRow.name}} 已被删除ToolJet 会在动作执行时动态解析该表达式详见下文第四节。三、四种提示类型及其底层渲染差异在 EventManager.jsx 中四种提示类型被定义为如下选项let alertTypes [ { name: Info, id: info }, { name: Success, id: success }, { name: Warning, id: warning }, { name: Error, id: error }, ];也就是说四种类型的**标识值id**分别为info、success、warning、error——这与文档中 Info / Success / Warning / Error 一一对应。在 RunJS 编程式触发时传入的就是这些标识值。不同类型的提示在底层由react-hot-toast的toast函数渲染具体分支逻辑位于事件执行切片 eventsSlice.jscase show-alert: { let message getResolvedValue(event.message, customVariables, moduleId); if (typeof message object) message JSON.stringify(message); if (Number.isNaN(message)) message ; switch (event.alertType) { case success: case error: toastevent.alertType; break; case info: toast(message); break; case warning: toast(message, { icon: ⚠️, }); break; } return Promise.resolve(); }从源码可以看到几个值得注意的实现细节success与error直接调用toast.success(message)/toast.error(message)使用热提示库内置的成功、错误样式info调用默认的toast(message)warning在调用toast(message)的同时附加了一个 ⚠️ 图标强化警示效果每种类型最终都返回Promise.resolve()因此 Show Alert 动作支持被await等待便于与 RunJS 中的异步流程组合。四、消息的动态解析规则Message 字段不只是静态文本。在执行show-alert动作时事件切片会通过getResolvedValue(event.message, customVariables, moduleId)对消息做运行时求值这意味着你可以在消息中嵌入表达式如{{订单 components.table1.selectedRow.orderId 已取消}}解析后的结果会显示在提示中如果解析结果是对象类型会被JSON.stringify序列化后展示方便直接展示查询返回的对象如果解析结果是NaN会被置为空字符串避免出现无效提示内容。这一机制让 Show Alert 与表单、表格、查询结果等动态数据天然打通是实现“操作反馈数据回显”的常见手段。五、Debounce防抖字段Show Alert 的Debounce字段默认是空的。你可以输入一个数值单位是毫秒ms用于指定动作执行前等待的时间例如输入300表示延迟 300ms 后执行该动作。防抖的典型用途是避免高频事件如连续点击按钮、快速切换开关导致提示被反复触发、遮挡界面。配合事件处理器中的runOnlyIf条件仅当表达式为真时才执行动作可以精确控制提示的出现时机。从源码结构看事件切片中的executeAction本身就以debounce(...)包装定义见 eventsSlice.js为动作级防抖预留了执行通道Debounce 字段填写的毫秒数正是作用于该层。六、在 RunJS 代码中触发 Show AlertShow Alert 不仅可以通过事件面板配置还可以在RunJS 查询JavaScript 代码中编程式触发。根据仓库中的 run-action-from-runjs.md语法如下actions.showAlert(alert type, message)其中alert type传入提示类型标识message传入提示内容。示例actions.showAlert(error, This is an error)在事件执行切片中showAlert助手函数的实现为见 eventsSlice.jsconst showAlert (alertType , message ) { const event { actionId: show-alert, alertType, message, }; return executeAction(event, mode, {}, moduleId); };也就是说actions.showAlert(type, message)本质上是构造了一个{ actionId: show-alert, alertType, message }事件对象并交给executeAction统一执行——编程式触发与事件面板配置走的是同一条执行链路四种类型的渲染规则完全一致。RunJS 中还支持在异步函数里组合多个动作例如定时轮询查询并在期间弹出信息提示actions.setVariable(interval, setInterval(countdown, 5000)); async function countdown(){ await queries.restapi1.run(); await queries.restapi2.run(); await actions.showAlert(info, This is an information); }由于showAlert返回的 Promise 可被await它天然适合与queries.xxx.run()等异步查询串行编排。七、典型使用场景Show Alert 最常见的落地场景包括表单/操作结果反馈保存成功后弹出success提示失败时弹出error提示并附带具体错误信息删除/危险操作拦截提示例如在表格行的删除按钮上绑定onClick → Show Alert类型选error红色警示消息写明不可删除的原因如示例截图中的 The row cannot be deleted并配合防抖值如300避免连点重复弹窗流程进度告知在 RunJS 工作流的关键节点查询完成、文件生成、模态框关闭后弹出info或success提示数据回显校验利用消息表达式动态拼装查询返回的数据向用户展示精确的操作对象信息。八、源码脉络速查如果你想深入了解 Show Alert 的完整实现链路可以按以下路径在仓库中继续阅读关注点文件位置动作注册与默认参数ActionTypes.js事件管理器中的配置 UIMessage / Alert Type 字段EventManager.jsx四种类型的选项定义EventManager.jsx动作执行与 toast 渲染分支eventsSlice.jsRunJS 中的actions.showAlert封装eventsSlice.jsRunJS 调用语法与示例run-action-from-runjs.md概览而言Show Alert 是 ToolJet 事件体系中最简单也最常用的反馈型动作配置端由ActionTypes注册、EventManager渲染字段执行端由eventsSlice.executeAction统一处理最终落到react-hot-toast的四种视觉形态上。无论你通过事件面板还是 RunJS 触发都能获得一致的提示体验配合防抖与动态表达式可以覆盖绝大多数内部工具的操作反馈需求。【免费下载链接】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 Alert 动作完整指南：配置提示消息、四种类型、防抖延迟与 RunJS 触发

相关推荐

Mojo 结构体声明完全指南：字段、方法、参数与 trait 符合性（附仓库源码与测试验证）

Onyx Craft V1：把“AI 同事”做成可审计、可审批、可调度企业级 Agent 的技术路线图

大模型训练网络为什么绕不开RoCEv2？从原理到调优全解析

更多资讯

C语言闯关指南：从基础语法到项目实战的完整进阶路线

如何用 OpenHuman 的触发器（Triggers）让新邮件和 GitHub Issue 自动触发 Agent 动作

Microduck OTA三重防护机制：签名验证、健康门控与自动回滚

Flutter开发OpenHarmony应用：抛硬币掷骰子实战全记录

OpenCore Legacy Patcher 完整指南：让老 Mac 重新装上新版 macOS

STM32单ADC+UART实现4档开关识别与Modbus float传输

今日更新

CopilotKit Vue Demo 与 React Demo 的 Parity 实现指南：路由、运行时端点与交互语义的全框架对齐

Harbor RBAC 实战：db_auth 模式下非管理员用户管理项目成员的完整验证与权限模型解析

STM32平衡车纯平衡程序从拆包到参数整定的完整调试指南

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？