时序数据库高写入吞吐场景下的透明数据加密实践：用安当TDE 给工业时序与监控落盘加一层“看不见的锁“
2026/10/8 13:06:50
ToolJet Actions 机制详解：事件驱动的 Action 类型、参数配置与 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
本文以 ToolJet 官方文档中的 Actions 概念为核心，系统讲解 Actions 的定义、可配置的触发方式（事件处理器与 RunJS 查询）、内置 16 种 Action 的完整参数说明，并结合开源仓库前端源码（frontend/src/AppBuilder/_stores/slices/eventsSlice.js）剖析各 Action 的实际执行链路，帮助你在 ToolJet 中构建可靠的事件响应逻辑。
什么是 Actions
在 ToolJet 中，Actions 是可被应用内事件触发的多功能函数。基于用户交互，Actions 可以被配置为：弹出告警提示（Show alert）、执行数据查询（Run query）、跳转到其他页面（Switch page / Go to app），以及完成其他一系列任务。
Actions 与 Events 是紧密配合的一对概念：Event 定义“何时触发”，Action 定义“触发后做什么”。事件可以链式串联——例如一个查询执行完成后再触发另一个事件执行第二个查询，一次按钮点击即可启动一连串逻辑操作。关于事件的完整概念可参考 Events 文档。
Actions 的两种配置方式
文档明确给出了 Actions 的两条配置路径：
- 事件处理器（Event Handler）方式：Actions 可以响应多种事件，如按钮点击、查询执行成功等。在任意组件或查询的配置面板中建立一个新的New Event Handler，选择事件与要执行的 Action 即可。这是可视化、低代码的主流配置路径。
- RunJS 查询方式：为了更动态的交互，可以编写Run JavaScript code（RunJS）查询，在 JS 代码中直接调用
actions.*API。这种方式支持基于复杂用户交互逻辑、条件判断、甚至按指定时间间隔（setInterval定时任务）触发 Action。
两种方式的完整语法对照见 Run Actions from RunJS 指南。
内置 Action 全览
ToolJet 内置的 Action 完整清单（对应 Actions Reference 目录 下 16 篇参考文档）如下，每篇参考文档给出了对应的界面截图与参数说明：
| Action | 功能 | 参考文档 |
|---|---|---|
| Show alert | 弹出 Info / Success / Warning / Error 四种类型的告警消息 | show-alert.md |
| Run query | 事件触发时执行已创建的查询 | run-query.md |
| Open webpage | 在新标签页打开一个网页 | open-webpage.md |
| Switch page | 在多页面应用内切换页面，支持附带 Query Params | switch-page.md |
| Go to app | 打开另一个已发布的 ToolJet 应用 | go-to-app.md |
| Show modal / Close modal | 显示 / 关闭 Modal | show-modal.md、close-modal.md |
| Copy to clipboard | 将文本复制到剪贴板 | copy-to-clipboard.md |
| Set localStorage | 向浏览器 localStorage 写入 key-value | set-localstorage.md |
| Set variable / Unset variable | 创建（赋值）/ 删除应用级变量 | set-variable.md、unset-variable.md |
| Set page variable | 在多页面应用内创建页面级变量（仅当前页面可访问） | set-page-var.md |
| Generate file | 即时构造 CSV / Text / PDF 文件供用户下载 | generate-file.md |
| Set Table Page | 修改 Table 组件当前页码 | set-table-page.md |
| Control component | 调用组件专有 Action（Component Specific Actions） | control-component.md |
| Logout | 将当前用户从 ToolJet 登出 | logout.md |
此外，Events 概念文档 中还给出了典型的事件链示例：按钮点击 → 触发查询刷新数据 → 查询成功后弹出确认告警，这正是 “Event + Action” 组合的标准用法。
关键参数详解
Debounce（防抖延时）
几乎所有 Action 都带有Debounce字段，默认为空。填入数值表示“毫秒级延时”——即事件触发后延迟指定毫秒才执行 Action，例如300表示 300ms 后执行。它可用于合并高频触发、避免重复执行。这一参数在 Set variable 文档、Run query 文档 等每一篇 Action 参考中都有相同说明。
Set variable / Unset variable
| 选项 | 说明 |
|---|---|
| Key | 变量名（String），后续通过它访问值 |
| Value | 可为字符串、数字、布尔表达式、数组或对象 |
| Debounce | 默认空，可填数值表示毫秒延时，例：300 |
Unset variable 仅需 Key，用于删除由 Set variable 创建的变量。
Generate file
| 选项 | 说明 |
|---|---|
| Type | 文件类型：CSV、Text、PDF |
| File name | 生成的文件名 |
| Data | 构造文件所用的数据，格式随文件类型变化 |
| Debounce | 默认空，毫秒级延时 |
各类型的数据格式要求（摘自 generate-file.md）：
- CSV：Data 应为对象数组，各对象键相同，被视为列头：
{{ [ { name: 'John', email: 'john@tooljet.com' }, { name: 'Sarah', email: 'sarah@tooljet.com' }, ] }}将生成内容如下：
name,email John,john@tooljet.com Sarah,sarah@tooljet.com- Text：Data 应为字符串；若源数据是对象数组（如 Table 组件数据），需先序列化，例如
{{JSON.stringify(components.table1.currentPageData)}}。 - PDF：支持
string或对象数组两种输入。对象数组将渲染为带行列的表格；字符串则生成纯文本 PDF。
Set Table Page
| 选项 | 说明 |
|---|---|
| Table | 从下拉框选择 Table 组件 |
| Page Index | 页码数值，例：{{2}} |
| Debounce | 默认空，毫秒级延时 |
Switch page 与 Query Params
Switch Page 用于在 多页面应用 中切换页面，并支持附带Query Parameters：参数以?追加到应用 URL 末尾，键值以=分隔，多个参数可点击+按钮追加。文档示例中将 key 设为username、value 设为{{globals.currentUser.email}}，切换页面后目标页 URL 即携带该参数——可用于搜索过滤、分页、排序等场景。
Go to app
只能打开**已发布（released）**的 ToolJet 应用。对应应用的slug可从分享弹窗或已发布应用 URL 中application/之后的路径获取。
Control component（组件专有 Action）
Control component 用于触发特定组件专属的 Action（如 Table 的分页、Tabs 切换等），既可通过事件处理器触发，也可在 RunJS 中调用。据 control-component.md 文档，该能力当前支持 Button、Checkbox、Color Picker、Dropdown、File Picker、Form、Icon、Kanban、Link、Map、Modal、Multiselect、Radio button、Table、Tabs、Text Input、Text、Text Area 等组件，具体 Action 列表需查阅各组件文档。文档给出了完整示例：为 Button 的 On Click 事件挂Control ComponentAction，选择textinput1、Action 选Set text，即可在点击按钮时更新 Text Input 的字段值；同一文档也展示了用 JavaScript 查询清空文本输入值的做法。
Set localStorage 实战示例
set-localstorage.md 提供了从组件事件到 RunJS 查询的完整闭环示例，可复制参考：
- 画布添加Text Input、Button、Text组件；
- 选中 Button，新增事件处理器，添加
Set local storageAction，key设为localtest，value设为{{components.textinput1.value}}； - 创建
Run JavaScript code查询，写入return localStorage.getItem("localtest");，点击 Query Panel 的Run按钮即可读到刚写入的值； - 将Text组件的 Text 属性设为
{{queries.runjs1.data}}，展示查询返回值； - 再给 Button 加一个
Run queryAction 选择runjs1、Debounce 设为300。此后每次点击按钮即写入 localStorage 并刷新 Text 组件显示。
该模式适合“保存表单草稿”“暂存不入库的数据”等场景。
从源码看 Action 的执行链路
前端仓库中，事件驱动的各 Action 实现集中在 eventsSlice.js（Zustand Store 切片）。从源码结构看：
runQuery（约 L1110 定义、L646 事件分支调用）：事件触发时经由queryPanel.runQuery(queryId, queryName, ...)真正发起查询执行，对应 “Run query” Action；showAlert（约 L1226 定义）：接收alertType与message两个参数，对应 Show alert Action；copyToClipboard（约 L1280 定义、L762 事件分支调用，底层依赖 appUtils.js 中的同名工具函数）；switchPage（约 L1344 定义、L1049-L1072 事件分支解析 query params 后调用）：与 Switch Page Action 的 Query Params 能力一一对应；- 上述方法最终统一注册进 Store 导出列表（约 L1456-L1474），供事件系统按名称分发。
文件生成类 Action 的底层实现位于 generate-file.js，与 Generate file Action 的 CSV / Text / PDF 三种类型说明相吻合。
这一结构印证了文档描述的两条触发路径最终汇聚到同一套执行实现：事件处理器与 RunJS 调用的actions.*方法，本质上是同一组 Store 动作的不同入口。
RunJS 中的 actions API 速查
按 Run Actions from RunJS 指南，各 Action 在 RunJS 查询中的调用语法如下：
// 执行查询（两种等价写法） queries.getSalesData.run(); await actions.runQuery('getSalesData'); // 查询执行后立即取回数据 await queries.getSalesData.run(); let value = queries.getSalesData.getData(); // 处理后数据 let raw = queries.getCustomerData.getRawData(); // 原始数据 let loading = queries.getTodos.getLoadingState(); // 加载状态 // 变量 actions.setVariable('variableName', 'variableValue'); actions.unSetVariable('variableName'); actions.getVariable('mode'); actions.setPageVariable('number', 1); actions.getPageVariable('number'); // 模态框 actions.showModal('modalName'); actions.closeModal('modalName'); // localStorage 与剪贴板 actions.setLocalStorage('key', 'value'); actions.copyToClipboard('contentToCopy'); // 生成文件（fileType: csv / plaintext / pdf） actions.generateFile('csvfile1', 'csv', '{{components.table1.currentPageData}}'); actions.generateFile('textfile1', 'plaintext', '{{JSON.stringify(components.table1.currentPageData)}}'); actions.generateFile('Pdffile1', 'pdf', '{{components.table1.currentPageData}}'); // 跳转 actions.switchPage('page-handle'); actions.switchPage('pageHandle', [['param1', 'value1'], ['param2', 'value2']]); actions.goToApp('slug', [['key1', 'value1'], ['key2', 'value2']]); // 告警（类型：info / success / warning / danger） actions.showAlert('error', 'This is an error'); // 登出 actions.logout();注意两点参数细节：setPageVariable的 key 必须为带引号的字符串，数值型 value 则无需引号；goToApp的slug取自已发布应用 URL 中application/之后或 Share 弹窗展示的内容。
组合多个 Action：定时触发模式
指南最后给出了按指定间隔运行多个 Action的 async-await 模式（配套指南见 run-query-at-specified-intervals.md）：
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') }这正是文档中 “actions can be triggered at designated time intervals” 这一能力的标准落地写法。
小结
- Actions 是 ToolJet 事件系统的执行单元，覆盖告警、查询执行、页面/应用跳转、模态框、剪贴板、localStorage、变量、文件生成、表格分页、组件专有控制与登出共 16 类内置动作；
- 配置路径有两条：组件/查询配置面板中的事件处理器（可视化），以及 RunJS 查询中的
actions.*API（可编程），二者在源码层（eventsSlice.js）共享同一套执行实现； - 通用参数 Debounce 默认为空、以毫秒为单位控制执行延时；生成文件、切换页面带 Query Params 等高级能力均有明确的文档化参数格式；
- 完整逐项参数与界面截图，建议以 Actions Reference 目录 下各文档为准查阅。
【免费下载链接】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），仅供参考