ToolJet 动作Actions完全指南为组件与查询事件绑定 Show Alert、Run Query、Generate File 等内置动作【免费下载链接】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在 ToolJet 中动作Action是事件驱动模型的核心载体无论是用户点击按钮、表格行触发操作还是查询成功返回数据都可以通过绑定动作来驱动应用产生响应——弹出提示、运行查询、跳转页面、开关弹窗、生成文件等。本文以 ToolJet 官方教程 actions.md 为骨架结合 3.0.0-LTS 版本的 动作参考文档 与前端源码 ActionTypes.js系统讲解动作的添加方式、九大内置动作的配置细节、Debounce 防抖机制以及如何在 RunJS 查询中以代码方式触发动作帮助你在实际应用中构建完整的交互闭环。什么是 ToolJet 动作ToolJet 支持将若干预置动作作为应用中任何事件event触发时的处理器handler。事件来源主要有两类组件事件例如按钮的On click、表格的On row selected、输入框的On change等查询事件例如查询的On success成功、On failure失败等。当事件发生时绑定在事件上的动作会被依次执行。动作的参数支持 ToolJet 的{{ }}表达式语法因此可以动态引用组件属性、查询结果和全局变量实现数据驱动的响应逻辑。从当前仓库前端源码 ActionTypes.js 可以看到动作系统在实现层被组织为若干分组group字段run-action运行类、control-component组件控制类、navigation导航类、variable变量类、other其他类每个动作声明了自己的名称、唯一id和配置项options配置项还带有类型与默认值供右侧检查器面板渲染对应的配置表单。如何添加动作根据事件来源不同添加动作有两条路径1. 为组件事件添加动作在画布上点击目标组件例如 Button在右侧的Inspector检查器面板中找到事件配置区点击Add handler按钮选择事件类型并绑定动作。2. 为查询事件添加动作在查询面板中选择目标查询Query切换到查询编辑器的Advanced高级标签页点击Add handler按钮为查询的成功/失败等事件绑定动作。3. Debounce 防抖参数所有动作都支持可选的Debounce字段。该字段默认为空输入数值后表示延迟多少毫秒再执行该动作例如300表示事件触发后延迟 300ms 执行。Debounce 在需要防抖的场景如输入框连续输入时触发查询非常实用。九大内置动作一览原教程文档给出了 ToolJet 支持的核心动作清单下表为完整对照描述来自官方文档配置项字段名来自 ActionTypes.js 源码定义动作说明核心配置项源码字段Show alert以 toast 形式显示一条提示消息message默认Message !Run query运行任意已创建的数据查询queryIdOpen webpage在新标签页打开另一个网页url默认https://example.comGoto app跳转到另一个 ToolJet 应用app、queryParams默认[]Show modal打开已添加的某个模态框modalClose modal关闭已打开的模态框modalCopy to clipboard将应用中的任意文本复制到剪贴板待复制的文本内容Set localStorage向浏览器 localStorage 写入键值对key、valueGenerate file基于应用内数据即时构造文件并让用户下载fileType、fileName、data默认{{[]}}补充说明从当前前端源码 ActionTypes.js 可以看到运行类动作还扩展了Reset query重置查询与Abort query中止查询此外还有Control component、Set table page、Scroll component into view、Switch page、Set variable、Unset variable、Logout、Toggle app mode等更多动作可按需查阅源码中的完整清单。逐个详解核心动作Show Alert显示提示消息该动作允许你显示一条提示消息。可以设置自定义的message消息内容并选择提示类型共 4 种类型Info、Success、Warning和Error。消息内容支持表达式例如{{保存成功共 components.table1.searchResult.length 条记录}}可将动态数据渲染进提示中。详细参考见 show-alert.md。Run Query运行数据查询该动作在事件发生时触发指定的查询。只需在下拉中选择要运行的查询即可。搭配查询自身的On success事件可以串联多个查询形成类似“A 查询成功后自动运行 B 查询”的链式流程。详细参考见 run-query.md。Open Webpage新标签页打开网页该动作用于在新标签页中打开一个网页配置项为url。URL 同样支持表达式拼接例如{{https://example.com/search?q components.searchbox1.value}}。详细参考见 open-webpage.md。Go to App跳转 ToolJet 应用该动作允许在事件发生时打开任意已发布released的 ToolJet 应用——注意只有已发布的应用才能通过此动作打开。除了选择目标应用外还可以通过queryParams传入查询参数格式为二维数组例如[[key1,value1],[key2,value2]]目标应用可通过URL或全局变量读取这些参数。详细参考见 go-to-app.md。Show Modal / Close Modal开关模态框Show modal用于打开指定的模态框Close modal用于关闭已经打开的模态框两者的配置项都是modal选择目标模态框组件。典型用法是点击按钮 → Show modal 打开编辑表单表单提交成功 → 运行查询 → 查询On success→ Close modal 关闭弹窗形成一个完整闭环。参考 show-modal.md 与 close-modal.md。Copy to Clipboard复制到剪贴板该动作将应用中的任意文本复制到系统剪贴板例如把订单号、分享链接、临时生成的 Token 复制给用户。详细参考见 copy-to-clipboard.md。Set LocalStorage写入浏览器本地存储该动作允许你向浏览器 localStorage 写入一个key及其对应的value。常见使用场景包括保存表单值避免用户刷新页面后意外丢失存储不需要传输到数据库的临时数据。详细参考见 set-localstorage.md下文的组合示例会给出一个完整用法。Generate File即时生成并下载文件该动作允许基于应用内的数据动态构造文件并让用户下载适用于导出报表、导出表格数据等场景。配置项包括配置项说明Type生成的文件类型支持CSV、Text、PDFFile name生成文件的名称Data构造文件所用的数据其格式取决于文件类型见下文Debounce默认空可输入毫秒数值延迟执行例如300CSV 数据格式Data字段需传入对象数组ToolJet 假定每个对象的键key相同并将其作为 CSV 的列头。例如{{ [ { name: John, email: johntooljet.com }, { name: Sarah, email: sarahtooljet.com }, ] }}将生成如下内容的 CSV 文件name,email John,johntooljet.com Sarah,sarahtooljet.comText 数据格式Data字段需传入字符串。如果数据来自对象数组如表格组件需要先字符串化例如在 Data 字段输入{{JSON.stringify(components.table1.currentPageData)}}。PDF 数据格式支持两种输入——字符串或对象数组。传入对象数组时生成的 PDF 会以表格形式含列与行展示数据传入字符串时生成的是纯文本 PDF。完整参考见 generate-file.md。在 RunJS 中通过代码触发动作除可视化配置外ToolJet 还允许在Run JavaScript codeRunJS查询中编程式触发动作这让动作可以嵌入复杂逻辑、循环与条件判断。完整指南见 run-action-from-runjs.md核心语法如下运行查询两种等价写法queries.getSalesData.run() // 或 await actions.runQuery(getSalesData)运行查询后还可以立即获取其数据、原始数据与加载状态await queries.getSalesData.run(); let value queries.getSalesData.getData(); // 获取处理后数据 let raw queries.getSalesData.getRawData(); // 获取原始数据 let loading queries.getSalesData.getLoadingState(); // 获取加载状态显示提示类型支持info、success、warning、dangeractions.showAlert(error, This is an error)开关模态框 / 本地存储 / 剪贴板 / 跳转应用actions.showModal(modalName) actions.closeModal(modalName) actions.setLocalStorage(key, value) actions.copyToClipboard(contentToCopy) actions.goToApp(slug, [[key1,value1],[key2,value2]])生成文件fileType可取csv、plaintext、pdf// 以表格当前页数据生成 CSV actions.generateFile(csvfile1, csv, {{components.table1.currentPageData}}) // 以字符串化后的表格数据生成文本文件 actions.generateFile(textfile1, plaintext, {{JSON.stringify(components.table1.currentPageData)}}) // 以表格数据生成 PDF actions.generateFile(Pdffile1, pdf, {{components.table1.currentPageData}})串行执行多个动作在 RunJS 中使用async-await即可按序执行多个动作例如先运行两个查询再弹出提示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) }组合实战基于 localStorage 的值联动示例下面以官方文档 set-localstorage.md 中的完整示例演示动作的组合运用——将输入框的值写入 localStorage再通过 RunJS 读取并展示到文本组件向画布添加Text Input、Button和Text三个组件选中 Button新增事件处理器添加Set local storage动作key设为localtestvalue设为{{components.textinput1.value}}——这样会把输入框的当前值以localtest为键写入 localStorage创建一个Run JavaScript code查询输入以下代码并点击运行读取刚才写入的本地存储值return localStorage.getItem(localtest);选中Text组件在其Text属性中输入{{queries.runjs1.data}}文本组件即可展示该 RunJS 查询的返回值即 localStorage 中的值再选中 Button新增一个事件处理器添加Run query动作选择runjs1查询并设置 Debounce 为300。完成后每次点击 Button都会先写入 localStorage再由 RunJS 查询读取并刷新 Text 组件显示的内容——一个典型的“写入 → 读取 → 展示”联动闭环就此打通。小结动作系统是 ToolJet 将静态界面变为可交互应用的关键机制通过检查器面板或查询的 Advanced 标签页即可在几十秒内为事件挂载动作配合表达式与 Debounce 可应对绝大多数交互需求而 RunJS 编程式触发则提供了更高的灵活性适合需要条件分支、循环或串行编排的复杂场景。若需扩展更多动作如重置/中止查询、页面变量、组件控制等可直接查阅前端动作清单源码 ActionTypes.js各动作的详细配置说明可在 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），仅供参考