免费获取学习方案
ARTICLE DETAIL

资讯详情

深耕编程基础知识与建站技术分享的一线实战洞察。

ToolJet RunJS(Run JavaScript Code)查询完全指南:在低代码应用中编写与执行自定义 JavaScript

ToolJet RunJS(Run JavaScript Code)查询完全指南:在低代码应用中编写与执行自定义 JavaScript ToolJet RunJSRun JavaScript Code查询完全指南在低代码应用中编写与执行自定义 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 Code下称 RunJS是 ToolJet 内置的一种查询类型允许你在应用中直接编写并执行自定义 JavaScript 代码用于数据转换、组件属性操控、条件逻辑判断与动作触发等场景。本文以 tooljet-concepts/run-js.md 为主体骨架结合仓库中的数据源参考文档、多个 how-to 教程与前端源码系统讲解 RunJS 的创建流程、参数机制、Action 调用 API、内置库与外部库导入以及基于 Geolocation API 的完整实战案例帮助你全面掌握这一 ToolJet 高阶能力。什么是 RunJS 查询Run JavaScript Code查询让开发者与业务用户无需离开 ToolJet 应用构建器就能编写并执行自定义 JavaScript 逻辑。它的典型用途包括转换查询返回的数据例如格式化、聚合、过滤读取并动态修改其他组件的属性例如根据条件隐藏/显示组件、更新文本内容根据特定条件触发动作例如点击按钮后执行一串自定义逻辑生成随机数、唯一 ID 等动态值并回填到组件中。从源码结构看RunJS 在 ToolJet 前端被建模为一种静态数据源static data sourcekind定义于 frontend/src/AppBuilder/QueryManager/constants.js其展示名称为Run JavaScript code短名JavaScript在查询管理器的左侧数据源列表中它同样以runjs为标识出现在 leftSidebarConstants.js 中。前端在保存与执行时会读取 RunJS 查询的options.code字段作为脚本主体见 scriptAnalysis.ts并对其进行语法解析分析依赖检测、错误标注等从而在编辑阶段就能给出静态提示。创建 RunJS 查询按照>alert(parameters.newAlert)查询触发时浏览器/应用会弹出 Alert 显示该参数值。示例二用参数调用另一个查询先创建一个名为multiply的 RunJS 查询添加参数num1默认值10与num2默认值2代码如下return parameters.num1 * parameters.num2;在画布上放置一个 Text 组件将其文本设置为{{queries.multiply.data}}即可显示乘积结果。随后再创建名为callMultiply的查询通过给run()传入对象覆盖参数默认值queries.multiply.run({num1: 20, num2: 7})执行callMultiply后multiply查询会以num120、num27重新执行并返回140。这种查询即函数的模式让同一段逻辑可以被多处复用、传参是构建复杂应用的常用手段。与组件和事件交互RunJS 的一大核心价值在于与组件进行动态交互。你可以给按钮挂载事件处理器Event Handler当它被点击时触发 RunJS 查询也可以在 RunJS 代码中读取components.componentName.property来访问组件暴露的变量例如components.table1.currentPageData进而操控其他组件的属性。关于组件暴露变量Exposed Variables的完整清单可参阅 tooljet-concepts/exposed-variables.md事件Events与事件处理器的概念见 tooljet-concepts/events.mdToolJet 中可配置的全部动作Actions体系见 tooljet-concepts/actions.md。高级功能与内置库RunJS 支持一系列高级能力设置/取消变量、打开或关闭模态框、复制内容到剪贴板、将用户登出等这些通过特定的语法与函数完成。此外RunJS 环境内置了三个库可直接使用无需额外导入名称说明Moment日期与时间处理库Moment.jsLodash实用工具函数库提供merge、camelCase等Axios基于 Promise 的 HTTP 客户端支持GET、POST、PUT/PATCH、DELETE等请求需要说明的是仓库前端代码本身也大量使用 Lodash例如 appUtils.js 中import { merge, mergeWith, camelCase } from lodash这印证了 Lodash 是 ToolJet 前端运行环境中的常用工具库。关于 Moment、Lodash、Axios 的详细文档可分别参考官方文档站点本文不展开外部链接。接下来重点演示Axios的使用方式详见 how-to/use-axios.md。使用 Axios 发起 HTTP 请求GET 请求以 JSONPlaceholder 免费 API 为例var url https://jsonplaceholder.typicode.com/users/1; var data (await axios.get(url)).data; return data代码先设置 URL 变量再发起 GET 请求并取回响应体数据最终通过return返回给查询结果。点击Preview即可看到 API 的响应内容。POST 请求var url https://jsonplaceholder.typicode.com/users; var data axios.post(url,{ id: 11, name: Shubhendra, username: camelcaseguy, email: shubhendratooljet.com,}) return data该 POST 请求向服务器提交用户信息成功时服务器返回Status: 201资源创建成功。通过这种方式RunJS 可以充当无后端场景下的 API 聚合层把外部接口数据拉取、转换后直接喂给图表或表格组件。从 RunJS 触发 Action完整 API 速查ToolJet 允许在 RunJS 查询中执行各种 Actions。以下语法与示例整理自 how-to/run-action-from-runjs.md可作为日常开发的速查手册。Run Query触发查询两种等价写法queries.getSalesData.run() // replace getSalesData with your query nameawait actions.runQuery(getSalesData) // replace getSalesData with your query nameGet Query Data获取查询结果触发查询后若想立即在 RunJS 内部使用其返回值可用getData()、getRawData()与getLoadingState()await queries.getSalesData.run(); // replace getSalesData with your query name let value queries.getSalesData.getData();await queries.getCustomerData.run(); //replace getCustomerData with your query name let value queries.getCustomerData.getRawData();await queries.getTodos.run() //replace getTodos with your query name let value queries.getTodos.getLoadingState();Set / Unset / Get 变量创建变量actions.setVariable(variableName, variableValue)删除变量actions.unSetVariable(variableName)设置后立即读取全局变量与页面级变量actions.setVariable(mode,dark); //replace mode with your desired variable name return actions.getVariable(mode);actions.setPageVariable(number,1); //replace number with your desired variable name return actions.getPageVariable(number);关于变量体系的完整概念可参阅 tooljet-concepts/variables.md。Logout登出actions.logout();Show / Close Modal打开/关闭模态框actions.showModal(modalName)actions.closeModal(modalName)Set Local Storage写入本地存储actions.setLocalStorage(key, value);Copy to Clipboard复制到剪贴板actions.copyToClipboard(contentToCopy)Generate File生成文件actions.generateFile(fileName, fileType, data)其中fileName为文件名字符串fileType可选csv、plaintext或pdfdata为写入文件的数据。实际示例actions.generateFile(csvfile1, csv, {{components.table1.currentPageData}}) // 将表格当前页数据导出为 csvfile1.csvactions.generateFile(textfile1, plaintext, {{JSON.stringify(components.table1.currentPageData)}}) // 生成文本文件数据经 JSON.stringify 序列化actions.generateFile(Pdffile1, pdf, {{components.table1.currentPageData}}) // 生成 PDF 文件Go to App跳转其他应用actions.goToApp(slug,queryparams)slug可以在已发布应用的 URL 中application/之后找到也可以在应用构建器右上角点击Share弹出的分享弹窗中获取queryparams使用如下格式传入[ [key1,value1 ], [key2,value2] ]。Show Alert显示提示actions.showAlert(alert type , message )可用的 alert 类型为info、success、warning与danger。示例actions.showAlert(error , This is an error )一次运行多个 Action在 RunJS 中串联多个动作时必须使用async-await。下面示例每隔 5 秒依次执行两个查询并弹出信息提示完整版见 how-to/run-query-at-specified-intervals.mdactions.setVariable(interval,setInterval(countdown, 5000)); async function countdown(){ await queries.restapi1.run() await queries.restapi2.run() await actions.showAlert(info,This is an information) }上述各类 Action 的详细参考文档位于 actions 目录例如 show-alert.md、set-variable.md、generate-file.md 等均可在 RunJS 中按上述方式调用。导入外部 JavaScript 库除内置库外RunJS 还支持通过 CDN 动态导入任意第三方 JavaScript 库详见 how-to/import-external-lib-js.md。推荐到 jsDelivr 查找开源项目的 CDN 链接。导入步骤从 ToolJet Dashboard 新建应用在查询面板选择默认的JavaScript数据源创建 RunJS 查询在代码编辑器中粘贴以下代码示例同时导入 MathJS 与 FlattenJS// Function to add script dynamically function addScript(src) { return new Promise((resolve, reject) { const scriptTag document.createElement(script); scriptTag.setAttribute(src, src); scriptTag.addEventListener(load, resolve); scriptTag.addEventListener(error, reject); document.body.appendChild(scriptTag); }); } try { // Importing MathJS await addScript(https://cdn.jsdelivr.net/npm/mathjs11.7.0); // Importing FlattenJS await addScript(https://cdn.jsdelivr.net/npm/flattenjs2.1.3/lib/flatten.min.js); // Showing a success alert await actions.showAlert(success, Mathjs and Flatten imported); } catch (error) { console.error(error); }点击Run运行应弹出 Mathjs and Flatten imported 成功提示。:::tip 勾选查询设置中的Run this query on application load?选项可在应用加载完成后立即使这些库全局可用。 :::应用示例 1用 FlattenJS 展平嵌套 JSONreturn flatten({ key1: { keyA: valueI }, key2: { keyB: valueII }, key3: { a: { b: { c: 2 } } } });应用示例 2用 MathJS 做数学计算return math.atan2(3, -3) / math.pi;在查询管理器中预览输出或在查询面板点击Run查看结果。实战案例用 RunJS Geolocation API 获取用户位置下面通过 how-to/access-users-location.md 的完整流程演示 RunJS 与浏览器 Geolocation API 结合的真实场景该 API 通过 GPS、Wi-Fi、IP 定位等手段提供经纬度、海拔、速度等地理数据出于隐私考虑浏览器会在定位前请求用户授权。新建一个应用进入应用编辑器在底部查询面板点击 Add数据源选择Run JavaScript Code创建 RunJS 查询编写以下代码调用 Geolocation APIfunction getCoordinates() { // Function to get coordinates return new Promise(function (resolve, reject) { // Promise to get coordinates navigator.geolocation.getCurrentPosition(resolve, reject); // Get current position }); } async function getAddress() { // Function to get address const position await getCoordinates(); // Await the coordinates let latitude position.coords.latitude; // Get latitude let longitude position.coords.longitude; // Get longitude return [latitude, longitude]; // Return the coordinates } return await getAddress(); // Return the address在查询编辑器下方的Settings中勾选Run this query on application load?确保应用每次打开都自动获取位置点击Run浏览器会弹出位置授权提示允许后即可获得坐标查询成功后坐标会显示在查询编辑器的Preview区也可以在左侧边栏的Inspector中展开queries - runjs1 - data查看返回结果将坐标用于Map地图组件向画布添加 Map 组件在其Initial location属性中填入{{ {lat: queries.runjs1.data[0], lng: queries.runjs1.data[1]} }}更新属性后地图组件即会显示用户当前位置。这个案例很好地展示了 RunJS 的完整链路浏览器原生能力Geolocation→ RunJS 查询 → 查询结果暴露为queries.*.data→ 组件属性绑定 → 可视化呈现。调试与错误处理RunJS 也支持刻意制造异常以辅助调试详见 how-to/intentionally-fail-js-query.md在查询面板点击 Add新建 RunJS 查询在编辑器中粘贴以下代码利用ReferenceError构造函数主动抛出错误throw new ReferenceError(This is a reference error.);为该查询添加事件处理器Event Handler在查询**失败failure**时触发 Alert 等动作点击Run观察错误被抛出并触发失败处理逻辑。这种失败路径演练可以验证应用的容错与兜底机制提升整体健壮性。从源码看 RunJS 的实现原理结合前端源码可以更深入理解 RunJS 在 ToolJet 中的实现定位静态数据源建模runjs与runpy、tooljetdb同属于静态数据源static data sources见 QueryManagerBody.jsx且 RunJS 查询不支持中止abort操作ABORT_UNSUPPORTED_KINDS集合包含runjs见 constants.js。脚本静态分析前端会对 RunJS 的options.code进行解析分析analyzeScript并基于options对象做 WeakMap 缓存查询保存会替换 options从而自动失效缓存见 scriptAnalysis.ts。这意味着编辑器能够在运行前就识别脚本中的依赖与潜在问题。查询面板集成查询面板切片对runjs类型的查询有专门处理逻辑见 queryPanelSlice.js说明 RunJS 与查询运行状态、依赖变更检测深度绑定。这些实现细节印证了 RunJS 并非简单的文本执行器而是与查询管理器、依赖分析、事件系统深度集成的第一等公民能力。更多参考资料查询Queries基础概念tooljet-concepts/queries.mdRunJS 查询的完整参考参数、示例查询、内置库data-sources/custom-js.md从 RunJS 执行动作how-to/run-action-from-runjs.md在 RunJS 中使用 Axioshow-to/use-axios.md导入外部库how-to/import-external-lib-js.md获取用户位置how-to/access-users-location.md定时触发查询how-to/run-query-at-specified-intervals.md刻意制造查询失败how-to/intentionally-fail-js-query.md【免费下载链接】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),仅供参考
返回列表