ToolJet RunJS 数据源详解在内部工具应用中执行自定义 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/ToolJetRun JavaScript CodeRunJS是 ToolJet 内置的一种数据源类型它允许你在查询管理器中直接编写并执行自定义 JavaScript用于完成计算、生成动态值、加工数据以及与查询和组件进行交互。本文将以 ToolJet 3.0.0-LTS 文档为骨架结合仓库源码完整讲解 RunJS 查询的创建方法、参数机制、跨查询调用、典型示例与底层执行原理读完你即可在应用构建器中熟练运用 RunJS 实现各类交互逻辑。RunJS 是什么RunJS 是 ToolJet 提供的静态数据源之一。从服务端源码看runjs与restapi、runpy、tooljetdb、workflows一同被定义在DefaultDataSourceKinds中见 server/src/modules/data-sources/constants/index.ts每个工作区会对应一行runjsdefault默认数据源记录。也就是说你不需要配置任何连接信息打开查询管理器即可直接使用。它的前端定义见 frontend/src/modules/common/components/DataSourceComponents/Runjs.schema.json揭示了其执行模型的关键信息source.kind为runjs数据源名称显示为Run JavaScript执行后默认暴露三个变量isLoading加载状态、data返回结果、rawData原始数据后续在表达式中可通过queries.查询名.data等方式读取开启customTesting自定义预览测试disableTransformations为true即 RunJS 查询本身不再走转换管道你直接在代码里处理数据即可。一个重要的执行模型事实是对于应用App中的 RunJS 查询代码是在浏览器端执行的只有当 RunJS 被用于工作流Workflow企业版功能时才会在服务端通过isolated-vm沙箱逐节点执行见 server/src/modules/data-queries/AGENTS.md 与 IUtilService.ts。因此在应用构建器中使用 RunJS 时代码可以访问浏览器环境如alert、Math等同时也应避免依赖仅存在于服务端的 API。创建 Run JavaScript 查询在应用编辑器中创建一个 RunJS 查询只需四步点击编辑器底部查询管理器的 Add按钮在可用数据源列表中选择Run JavaScript Code在代码编辑器中编写 JavaScript 代码点击Preview预览输出或点击Run立即触发查询。前端编辑器组件位于 frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx可以看到它复用了CodeHinter代码编辑器langjavascript、typemultiline、默认高度 400px初始占位代码为//Type your JavaScript code here每次编辑都会通过optionsChanged实时同步代码内容。查询代码以查询的options.code字段保存查询执行后代码的返回值即为查询结果可通过{{queries.查询名.data}}在任意组件属性或事件处理器中引用。参数机制动态控制代码输入参数Parameters允许你为同一个脚本提供不同的输入值从而在不改动核心代码的前提下复用查询提升灵活性。每个参数包含两个属性Name参数名称供代码引用Default value默认值可以是常量字符串、数字或对象。添加参数的步骤在 RunJS 查询编辑器中点击Parameters 按钮创建一个新参数为参数指定Name设置默认Value字符串、数字或对象均可。参数添加完成后在代码中通过parameters.name语法引用。例如定义参数newAlert其值为对象并在代码中调用alert(parameters.newAlert)查询被触发时alert弹窗将展示参数值这常用于快速验证参数传递是否生效。跨查询调用让一个查询以自定义参数调用另一个查询参数最常见的进阶用法是在 RunJS 中触发其他查询并传入自定义值。完整示例分为两步。第一步创建基础查询multiply新建 RunJS 查询并命名为multiply添加参数num1默认值10添加参数num2默认值2编写如下代码return parameters.num1 * parameters.num2;要展示结果可在画布上放置一个文本组件并将其文本设置为{{queries.multiply.data}}第二步创建调用方查询callMultiply再新建一个名为callMultiply的 RunJS 查询代码如下queries.multiply.run({num1: 20, num2: 7})执行callMultiply时会以num1 20、num2 7触发multiply查询并得到结果 140。由此multiply查询可以被任意其他查询反复调用每次传入不同的参数值实现真正的一次编写、多处复用。RunJS 示例查询集下面三个示例覆盖了最常见的 RunJS 使用场景均可在查询编辑器中直接复制运行。生成随机数该示例演示如何在按钮点击时生成随机数并实时显示在文本组件中。在画布上的容器组件中拖入一个按钮和一个文本组件在查询面板点击 Add选择Run JavaScript code数据源新建查询默认名如runjs1在代码编辑器中写入并运行const a Math.floor(Math.random() * (10 - 1)) 1; return a;配置组件属性为按钮添加事件处理器事件选择On Click动作选择Run Query目标查询选择runjs1——这样每次点击按钮都会执行这段随机数代码在文本组件的文本字段中填入Random number:{{queries.runjs1.data}}显示效果为Random number: 随机结果。生成唯一 ID以下代码生成形如id加随机十六进制字符序列的唯一 IDvar id id Math.random().toString(16).slice(2); return id;运行结果示例id2f4a1b。生成基于时间戳的唯一 ID下面的代码生成timestamp randomHex格式的 ID其中timestamp是当前时间戳的 base-32 表示randomHex是随机十六进制值return String(Date.now().toString(32) Math.random().toString(16)).replace(/\./g, );该 ID 比上一示例更长形如2g3h1d6a4h3适用于需要更高唯一性的场景。内置库与外部库导入RunJS 查询内部可直接使用以下三个常用库库名说明典型用法示例Moment日期时间处理库moment().format(YYYY-MM-DD)Lodash实用工具函数库_.map(data, item item.name)AxiosHTTP 请求库axios.get(url).then(res res.data)这三个库在 frontend/src/AppBuilder/_helpers/libraryLoader.js 中被显式导入作为执行环境的内置依赖注入到脚本作用域中。同时该文件实现了完整的外部库加载机制loadLibraryFromURL仅允许 HTTPS 地址通过 fetch 获取源码后用 UMD/IIFE shim模拟module/exports/define在沙箱中执行避免污染全局作用域initializeLibraries会并行加载实例设置中启用的第三方 JavaScript 库并将导出对象注册到库注册表中executePreloadedJS则把预加载代码的返回值须为对象展开为 RunJS 可用的顶层变量且会通过RESERVED_PARAMS过滤保留参数。关于在实例设置中添加自定义外部 JavaScript 库并配合 RunJS 使用的完整操作请参阅 导入外部 JavaScript 库。进阶技巧故意让查询失败以调试错误处理在调试事件处理器或验证错误分支时可以让 RunJS 查询主动抛错例如throw new ReferenceError(This is a reference error.);随后为该查询添加失败On Failure事件处理器如弹出告警再点击Run即可观察错误是否被正确捕获与处理。完整演练见 故意让 RunJS 查询抛出错误。定时触发 RunJS 查询RunJS 还可以配合定时触发机制按指定时间间隔自动执行例如轮询外部接口并刷新界面数据具体配置方法见 按指定时间间隔触发查询。小结RunJS 是 ToolJet 中打通数据计算—查询联动—界面呈现的高频数据源通过parameters语法实现参数化复用通过queries.name.run({...})实现查询间相互调用通过{{queries.name.data}}将结果绑定到任意组件再结合内置的 Moment、Lodash、Axios 以及可导入的外部库足以在纯前端完成绝大多数业务逻辑编排。理解其浏览器端执行模型与isLoading/data/rawData暴露变量能帮助你写出更健壮、更易维护的 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 RunJS 数据源详解：在内部工具应用中执行自定义 JavaScript 代码
ToolJet RunJS 数据源详解在内部工具应用中执行自定义 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/ToolJetRun JavaScript CodeRunJS是 ToolJet 内置的一种数据源类型它允许你在查询管理器中直接编写并执行自定义 JavaScript用于完成计算、生成动态值、加工数据以及与查询和组件进行交互。本文将以 ToolJet 3.0.0-LTS 文档为骨架结合仓库源码完整讲解 RunJS 查询的创建方法、参数机制、跨查询调用、典型示例与底层执行原理读完你即可在应用构建器中熟练运用 RunJS 实现各类交互逻辑。RunJS 是什么RunJS 是 ToolJet 提供的静态数据源之一。从服务端源码看runjs与restapi、runpy、tooljetdb、workflows一同被定义在DefaultDataSourceKinds中见 server/src/modules/data-sources/constants/index.ts每个工作区会对应一行runjsdefault默认数据源记录。也就是说你不需要配置任何连接信息打开查询管理器即可直接使用。它的前端定义见 frontend/src/modules/common/components/DataSourceComponents/Runjs.schema.json揭示了其执行模型的关键信息source.kind为runjs数据源名称显示为Run JavaScript执行后默认暴露三个变量isLoading加载状态、data返回结果、rawData原始数据后续在表达式中可通过queries.查询名.data等方式读取开启customTesting自定义预览测试disableTransformations为true即 RunJS 查询本身不再走转换管道你直接在代码里处理数据即可。一个重要的执行模型事实是对于应用App中的 RunJS 查询代码是在浏览器端执行的只有当 RunJS 被用于工作流Workflow企业版功能时才会在服务端通过isolated-vm沙箱逐节点执行见 server/src/modules/data-queries/AGENTS.md 与 IUtilService.ts。因此在应用构建器中使用 RunJS 时代码可以访问浏览器环境如alert、Math等同时也应避免依赖仅存在于服务端的 API。创建 Run JavaScript 查询在应用编辑器中创建一个 RunJS 查询只需四步点击编辑器底部查询管理器的 Add按钮在可用数据源列表中选择Run JavaScript Code在代码编辑器中编写 JavaScript 代码点击Preview预览输出或点击Run立即触发查询。前端编辑器组件位于 frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx可以看到它复用了CodeHinter代码编辑器langjavascript、typemultiline、默认高度 400px初始占位代码为//Type your JavaScript code here每次编辑都会通过optionsChanged实时同步代码内容。查询代码以查询的options.code字段保存查询执行后代码的返回值即为查询结果可通过{{queries.查询名.data}}在任意组件属性或事件处理器中引用。参数机制动态控制代码输入参数Parameters允许你为同一个脚本提供不同的输入值从而在不改动核心代码的前提下复用查询提升灵活性。每个参数包含两个属性Name参数名称供代码引用Default value默认值可以是常量字符串、数字或对象。添加参数的步骤在 RunJS 查询编辑器中点击Parameters 按钮创建一个新参数为参数指定Name设置默认Value字符串、数字或对象均可。参数添加完成后在代码中通过parameters.name语法引用。例如定义参数newAlert其值为对象并在代码中调用alert(parameters.newAlert)查询被触发时alert弹窗将展示参数值这常用于快速验证参数传递是否生效。跨查询调用让一个查询以自定义参数调用另一个查询参数最常见的进阶用法是在 RunJS 中触发其他查询并传入自定义值。完整示例分为两步。第一步创建基础查询multiply新建 RunJS 查询并命名为multiply添加参数num1默认值10添加参数num2默认值2编写如下代码return parameters.num1 * parameters.num2;要展示结果可在画布上放置一个文本组件并将其文本设置为{{queries.multiply.data}}第二步创建调用方查询callMultiply再新建一个名为callMultiply的 RunJS 查询代码如下queries.multiply.run({num1: 20, num2: 7})执行callMultiply时会以num1 20、num2 7触发multiply查询并得到结果 140。由此multiply查询可以被任意其他查询反复调用每次传入不同的参数值实现真正的一次编写、多处复用。RunJS 示例查询集下面三个示例覆盖了最常见的 RunJS 使用场景均可在查询编辑器中直接复制运行。生成随机数该示例演示如何在按钮点击时生成随机数并实时显示在文本组件中。在画布上的容器组件中拖入一个按钮和一个文本组件在查询面板点击 Add选择Run JavaScript code数据源新建查询默认名如runjs1在代码编辑器中写入并运行const a Math.floor(Math.random() * (10 - 1)) 1; return a;配置组件属性为按钮添加事件处理器事件选择On Click动作选择Run Query目标查询选择runjs1——这样每次点击按钮都会执行这段随机数代码在文本组件的文本字段中填入Random number:{{queries.runjs1.data}}显示效果为Random number: 随机结果。生成唯一 ID以下代码生成形如id加随机十六进制字符序列的唯一 IDvar id id Math.random().toString(16).slice(2); return id;运行结果示例id2f4a1b。生成基于时间戳的唯一 ID下面的代码生成timestamp randomHex格式的 ID其中timestamp是当前时间戳的 base-32 表示randomHex是随机十六进制值return String(Date.now().toString(32) Math.random().toString(16)).replace(/\./g, );该 ID 比上一示例更长形如2g3h1d6a4h3适用于需要更高唯一性的场景。内置库与外部库导入RunJS 查询内部可直接使用以下三个常用库库名说明典型用法示例Moment日期时间处理库moment().format(YYYY-MM-DD)Lodash实用工具函数库_.map(data, item item.name)AxiosHTTP 请求库axios.get(url).then(res res.data)这三个库在 frontend/src/AppBuilder/_helpers/libraryLoader.js 中被显式导入作为执行环境的内置依赖注入到脚本作用域中。同时该文件实现了完整的外部库加载机制loadLibraryFromURL仅允许 HTTPS 地址通过 fetch 获取源码后用 UMD/IIFE shim模拟module/exports/define在沙箱中执行避免污染全局作用域initializeLibraries会并行加载实例设置中启用的第三方 JavaScript 库并将导出对象注册到库注册表中executePreloadedJS则把预加载代码的返回值须为对象展开为 RunJS 可用的顶层变量且会通过RESERVED_PARAMS过滤保留参数。关于在实例设置中添加自定义外部 JavaScript 库并配合 RunJS 使用的完整操作请参阅 导入外部 JavaScript 库。进阶技巧故意让查询失败以调试错误处理在调试事件处理器或验证错误分支时可以让 RunJS 查询主动抛错例如throw new ReferenceError(This is a reference error.);随后为该查询添加失败On Failure事件处理器如弹出告警再点击Run即可观察错误是否被正确捕获与处理。完整演练见 故意让 RunJS 查询抛出错误。定时触发 RunJS 查询RunJS 还可以配合定时触发机制按指定时间间隔自动执行例如轮询外部接口并刷新界面数据具体配置方法见 按指定时间间隔触发查询。小结RunJS 是 ToolJet 中打通数据计算—查询联动—界面呈现的高频数据源通过parameters语法实现参数化复用通过queries.name.run({...})实现查询间相互调用通过{{queries.name.data}}将结果绑定到任意组件再结合内置的 Moment、Lodash、Axios 以及可导入的外部库足以在纯前端完成绝大多数业务逻辑编排。理解其浏览器端执行模型与isLoading/data/rawData暴露变量能帮助你写出更健壮、更易维护的 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），仅供参考