ToolJet 实战在页面加载时读取 URL 参数并按需触发 REST API 查询【免费下载链接】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 多页面应用为例讲解如何在页面加载Page Load时读取 URL 参数并根据参数内容按需触发 REST API 查询。你将掌握{{globals.urlparams}}全局对象的使用方法、通过「Switch page」动作或 JavaScript 代码传递参数的两种方式以及一套可复制的「表单提交 → 跨页传参 → 页面加载时自动拉取数据」完整实现方案。URL 参数的作用与添加方式在 ToolJet 多页面应用中URL 参数Query Parameters通常用来在页面之间传递数据例如把用户在Home页输入的表单值带到Dashboard页再结合 REST API 查询按条件加载对应数据。URL 参数会以?keyvalue的形式追加在应用 URL 末尾多个参数用连接例如?emailab.compage2。目前ToolJet 提供两种给页面添加 URL 参数的方式通过事件处理器的Switch page动作Switch Page 动作参考通过JavaScript 代码查询调用actions.switchPage见该文档中「Switch page with query params」一节。只要页面是带着 URL 参数被打开的就可以在任意表达式中通过全局对象{{globals.urlparams}}访问这些参数。该对象以键值对key-value形式保存全部 URL 参数使用{{globals.urlparams.参数名}}即可取出单个参数的值例如{{globals.urlparams.email}}。理解{{globals.urlparams}}全局对象从源码实现看urlparams是 ToolJet 前端在运行时维护的全局对象之一其值来自浏览器地址栏的查询字符串使用queryString.parse解析为键值对对象应用初次加载 / 预览时从location.search解析useAppData.js 中的setResolvedGlobals(urlparams, JSON.parse(JSON.stringify(queryString.parse(location?.search))))页面切换时由 Switch page 动作携带的参数构造appSlice.js 中的setResolvedGlobals(urlparams, JSON.parse(JSON.stringify(queryString.parse(queryParamsString))))。因此无论页面是通过点击事件跳转还是直接以带参 URL 打开{{globals.urlparams}}都能拿到最新的一批参数。在编辑器的 Inspector左侧边栏中展开globals → URL Params即可实时查看当前页面持有的 URL 参数键值对。方式一通过 Switch Page 动作传递 URL 参数在事件处理器Event Handler中配置 Switch page 动作时除了选择目标页面还可以为跳转追加 URL 参数。配置面板的源码位于 SwitchPage.jsx其核心交互为参数以[key, value]键值对形式组织key 与 value 各自是一个 CodeHinter 输入框value 支持写表达式如{{globals.currentUser.email}}点击Add param 按钮可继续添加参数对支持一次携带多个参数每个参数对可单独删除。事件真正触发时前端会先对每个 key/value 做表达式解析getResolvedValue并把当前 URL 中已有的version、env等参数自动合并进新 URL避免环境信息丢失见 eventsSlice.js随后调用底层switchPage(pageId, handle, queryParams, moduleId)appSlice.js完成页面切换与 URL 拼接?key1value1key2value2。方式二通过 JavaScript 代码传递 URL 参数除了事件配置还可以在 RunJS 查询中用一行代码触发带参跳转actions.switchPage(pageHandle, [[param1, value1], [param2, value2]])其中第一个参数是目标页面的 handle页面标识第二个参数是[key, value]组成的二维数组。actions.switchPage属于 ToolJet 暴露给脚本的全局动作 API 之一从 scriptAnalysis.ts 可以看到runQuery等动作同样以actions.fn(queryName)的形式在脚本中识别与执行。完整实战页面加载时使用 URL 参数触发 REST API 查询下面从零搭建一个双页面示例用户在Home页输入邮箱并点击提交跳转到Dashboard页Dashboard页在加载完成时检查 URL 中是否带有email参数有则自动运行两个 REST API 查询并把结果渲染到表格中。第一步创建 Home 与 Dashboard 页面新建应用后默认会有一个Home页面。在左侧边栏的Pages菜单中点击新建页面命名为Dashboard得到两个页面第二步在 Home 页面搭建表单并配置跳转事件向Home页面添加一个Form 组件内含一个文本输入框和一个按钮将文本输入框命名为email用于录入邮箱将按钮命名为Submit用于触发跳转。选中按钮添加事件On click动作选择Switch page目标页面选择Dashboard然后添加一条 URL 参数key 填emailvalue 填{{components.form1.data.textinput1.value}}。这样点击按钮时输入框中的值会被解析为字符串并拼进跳转 URL第三步在 Dashboard 页面创建 REST API 查询为Dashboard页新建两个 REST API 查询用于模拟「按 URL 参数触发后加载」的数据源查询 1products商品列表新建 REST API 查询命名为products请求 URL 填写https://fakestoreapi.com/productsmock 接口运行查询并检查预览数据打开table1的属性面板将表数据Table Data绑定为{{queries.products.data}}。查询 2users用户详情新建 REST API 查询命名为users请求 URL 填写https://jsonplaceholder.typicode.com/usersmock 接口运行查询并检查预览数据将table2的表数据绑定为{{queries.users.data}}。这样两张表格的数据都来自查询结果后续只需触发查询即可刷新表格。第四步编写 JavaScript 查询读取 URL 参数并触发查询新建一个 JavaScript 代码查询命名为urlparams。它负责「等待 URL 参数就绪 → 检查是否存在email→ 依次运行products与users查询」function waitForURLParams(timeout) { // Wait for URL parameters to be available const check resolve { // Check if URL parameters are available if (location.search.length 0) resolve(); // URL parameters are available else setTimeout(_ check(resolve), timeout); // Check again after a timeout } return new Promise(check); // Return a promise that resolves when URL parameters are available } async function checkAndRunQuery(timeout) { // Check if URL parameters are available and run the REST API queries await waitForURLParams(timeout); // Wait for URL parameters to be available const urlParams new URLSearchParams(window.location.search); // Get URL parameters if (urlParams.get(email)) { // Check if email parameter is present in the URL await actions.runQuery(products); // Run the REST API query to get products await actions.runQuery(users); // Run the REST API query to get user details } else { alert(URL param not found); // Alert if email parameter is not present in the URL } } checkAndRunQuery(5000); // Check if URL parameters are available and run the REST API queries after a timeout of 5 seconds逐段拆解这段脚本的职责waitForURLParams(timeout)以轮询方式等待浏览器地址栏出现查询字符串location.search.length 0返回一个 Promise。这是为了保证在页面事件触发的时序下URL 参数已经写入地址栏再执行后续逻辑checkAndRunQuery(timeout)等待参数就绪后用原生URLSearchParams解析window.location.search判断是否存在email参数actions.runQuery(products)/actions.runQuery(users)按名称触发已定义好的 REST API 查询await确保按顺序执行若 URL 中没有email参数则弹出alert(URL param not found)提示末尾调用checkAndRunQuery(5000)启动检查流程超时步长为 5 秒。第五步配置 Dashboard 页面级 On page load 事件回到左侧边栏的Pages菜单打开Dashboard页面的菜单选择添加事件处理器Event handler事件类型选择On page load页面加载时动作选择Run query查询选择urlparams。这样每当Dashboard页面被加载都会自动执行urlparams查询从而走完「检查 URL 参数 → 触发 REST API 查询 → 表格渲染数据」的完整链路。第六步运行效果与验证在Home页输入邮箱并点击Submit页面通过 Switch page 动作跳转到Dashboard地址栏出现?email输入的值Dashboard的On page load事件触发urlparams查询脚本轮询到 URL 参数存在检测到email后依次运行products、userstable1与table2分别展示商品与用户数据。如需人工核对参数可在左侧边栏打开Inspector展开globals → URL Params即可看到当前页面持有的键值对原理剖析与注意事项为什么需要waitForURLParams轮询页面级On page load事件的触发时机可能早于地址栏查询字符串完全写入直接读取window.location.search可能拿到空串。用「延时 轮询」把检查挂到 Promise 上可以稳定等到参数就绪本例超时步长 5000ms。globals.urlparams的两种数据来源。直接以带参 URL 打开应用时由 useAppData.js 从location.search解析由 Switch page 动作跳转时由 appSlice.js 依据动作携带的参数对构造并写入。两条路径最终都会同步到{{globals.urlparams}}。环境参数自动保留。切换页面时前端会检查当前 URL 中的version、env等参数并自动合并进新 URLeventsSlice.js因此按上文方式跳转不会丢失应用的版本与环境上下文。边界情况。如果 URL 中缺少email参数示例脚本会弹出提示而不是继续执行查询这正好演示了「按参数条件化执行」的思路——你可以把alert替换为跳转到默认页、展示空状态等任意兜底逻辑。参数值的动态化。Switch page 的 value 输入框支持表达式除了绑定组件值如{{components.form1.data.textinput1.value}}也可以使用全局变量或当前用户信息如{{globals.currentUser.email}}适用于登录态透传等场景多个参数可通过「Add param」继续追加。小结通过{{globals.urlparams}} 页面级On page load事件 RunJS 脚本中的actions.runQuery即可在 ToolJet 中实现「跨页传参、按需加载」的完整模式。这套方案不需要后端参与纯前端即可完成参数校验、查询触发与数据渲染可复用于权限透传、筛选条件传递、详情页数据预加载等常见内部工具场景。进一步了解 Switch page 动作的参数配置与 RunJS 触发方式可参阅 Switch Page 动作参考。【免费下载链接】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 实战在页面加载时读取 URL 参数并按需触发 REST API 查询【免费下载链接】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 多页面应用为例讲解如何在页面加载Page Load时读取 URL 参数并根据参数内容按需触发 REST API 查询。你将掌握{{globals.urlparams}}全局对象的使用方法、通过「Switch page」动作或 JavaScript 代码传递参数的两种方式以及一套可复制的「表单提交 → 跨页传参 → 页面加载时自动拉取数据」完整实现方案。URL 参数的作用与添加方式在 ToolJet 多页面应用中URL 参数Query Parameters通常用来在页面之间传递数据例如把用户在Home页输入的表单值带到Dashboard页再结合 REST API 查询按条件加载对应数据。URL 参数会以?keyvalue的形式追加在应用 URL 末尾多个参数用连接例如?emailab.compage2。目前ToolJet 提供两种给页面添加 URL 参数的方式通过事件处理器的Switch page动作Switch Page 动作参考通过JavaScript 代码查询调用actions.switchPage见该文档中「Switch page with query params」一节。只要页面是带着 URL 参数被打开的就可以在任意表达式中通过全局对象{{globals.urlparams}}访问这些参数。该对象以键值对key-value形式保存全部 URL 参数使用{{globals.urlparams.参数名}}即可取出单个参数的值例如{{globals.urlparams.email}}。理解{{globals.urlparams}}全局对象从源码实现看urlparams是 ToolJet 前端在运行时维护的全局对象之一其值来自浏览器地址栏的查询字符串使用queryString.parse解析为键值对对象应用初次加载 / 预览时从location.search解析useAppData.js 中的setResolvedGlobals(urlparams, JSON.parse(JSON.stringify(queryString.parse(location?.search))))页面切换时由 Switch page 动作携带的参数构造appSlice.js 中的setResolvedGlobals(urlparams, JSON.parse(JSON.stringify(queryString.parse(queryParamsString))))。因此无论页面是通过点击事件跳转还是直接以带参 URL 打开{{globals.urlparams}}都能拿到最新的一批参数。在编辑器的 Inspector左侧边栏中展开globals → URL Params即可实时查看当前页面持有的 URL 参数键值对。方式一通过 Switch Page 动作传递 URL 参数在事件处理器Event Handler中配置 Switch page 动作时除了选择目标页面还可以为跳转追加 URL 参数。配置面板的源码位于 SwitchPage.jsx其核心交互为参数以[key, value]键值对形式组织key 与 value 各自是一个 CodeHinter 输入框value 支持写表达式如{{globals.currentUser.email}}点击Add param 按钮可继续添加参数对支持一次携带多个参数每个参数对可单独删除。事件真正触发时前端会先对每个 key/value 做表达式解析getResolvedValue并把当前 URL 中已有的version、env等参数自动合并进新 URL避免环境信息丢失见 eventsSlice.js随后调用底层switchPage(pageId, handle, queryParams, moduleId)appSlice.js完成页面切换与 URL 拼接?key1value1key2value2。方式二通过 JavaScript 代码传递 URL 参数除了事件配置还可以在 RunJS 查询中用一行代码触发带参跳转actions.switchPage(pageHandle, [[param1, value1], [param2, value2]])其中第一个参数是目标页面的 handle页面标识第二个参数是[key, value]组成的二维数组。actions.switchPage属于 ToolJet 暴露给脚本的全局动作 API 之一从 scriptAnalysis.ts 可以看到runQuery等动作同样以actions.fn(queryName)的形式在脚本中识别与执行。完整实战页面加载时使用 URL 参数触发 REST API 查询下面从零搭建一个双页面示例用户在Home页输入邮箱并点击提交跳转到Dashboard页Dashboard页在加载完成时检查 URL 中是否带有email参数有则自动运行两个 REST API 查询并把结果渲染到表格中。第一步创建 Home 与 Dashboard 页面新建应用后默认会有一个Home页面。在左侧边栏的Pages菜单中点击新建页面命名为Dashboard得到两个页面第二步在 Home 页面搭建表单并配置跳转事件向Home页面添加一个Form 组件内含一个文本输入框和一个按钮将文本输入框命名为email用于录入邮箱将按钮命名为Submit用于触发跳转。选中按钮添加事件On click动作选择Switch page目标页面选择Dashboard然后添加一条 URL 参数key 填emailvalue 填{{components.form1.data.textinput1.value}}。这样点击按钮时输入框中的值会被解析为字符串并拼进跳转 URL第三步在 Dashboard 页面创建 REST API 查询为Dashboard页新建两个 REST API 查询用于模拟「按 URL 参数触发后加载」的数据源查询 1products商品列表新建 REST API 查询命名为products请求 URL 填写https://fakestoreapi.com/productsmock 接口运行查询并检查预览数据打开table1的属性面板将表数据Table Data绑定为{{queries.products.data}}。查询 2users用户详情新建 REST API 查询命名为users请求 URL 填写https://jsonplaceholder.typicode.com/usersmock 接口运行查询并检查预览数据将table2的表数据绑定为{{queries.users.data}}。这样两张表格的数据都来自查询结果后续只需触发查询即可刷新表格。第四步编写 JavaScript 查询读取 URL 参数并触发查询新建一个 JavaScript 代码查询命名为urlparams。它负责「等待 URL 参数就绪 → 检查是否存在email→ 依次运行products与users查询」function waitForURLParams(timeout) { // Wait for URL parameters to be available const check resolve { // Check if URL parameters are available if (location.search.length 0) resolve(); // URL parameters are available else setTimeout(_ check(resolve), timeout); // Check again after a timeout } return new Promise(check); // Return a promise that resolves when URL parameters are available } async function checkAndRunQuery(timeout) { // Check if URL parameters are available and run the REST API queries await waitForURLParams(timeout); // Wait for URL parameters to be available const urlParams new URLSearchParams(window.location.search); // Get URL parameters if (urlParams.get(email)) { // Check if email parameter is present in the URL await actions.runQuery(products); // Run the REST API query to get products await actions.runQuery(users); // Run the REST API query to get user details } else { alert(URL param not found); // Alert if email parameter is not present in the URL } } checkAndRunQuery(5000); // Check if URL parameters are available and run the REST API queries after a timeout of 5 seconds逐段拆解这段脚本的职责waitForURLParams(timeout)以轮询方式等待浏览器地址栏出现查询字符串location.search.length 0返回一个 Promise。这是为了保证在页面事件触发的时序下URL 参数已经写入地址栏再执行后续逻辑checkAndRunQuery(timeout)等待参数就绪后用原生URLSearchParams解析window.location.search判断是否存在email参数actions.runQuery(products)/actions.runQuery(users)按名称触发已定义好的 REST API 查询await确保按顺序执行若 URL 中没有email参数则弹出alert(URL param not found)提示末尾调用checkAndRunQuery(5000)启动检查流程超时步长为 5 秒。第五步配置 Dashboard 页面级 On page load 事件回到左侧边栏的Pages菜单打开Dashboard页面的菜单选择添加事件处理器Event handler事件类型选择On page load页面加载时动作选择Run query查询选择urlparams。这样每当Dashboard页面被加载都会自动执行urlparams查询从而走完「检查 URL 参数 → 触发 REST API 查询 → 表格渲染数据」的完整链路。第六步运行效果与验证在Home页输入邮箱并点击Submit页面通过 Switch page 动作跳转到Dashboard地址栏出现?email输入的值Dashboard的On page load事件触发urlparams查询脚本轮询到 URL 参数存在检测到email后依次运行products、userstable1与table2分别展示商品与用户数据。如需人工核对参数可在左侧边栏打开Inspector展开globals → URL Params即可看到当前页面持有的键值对原理剖析与注意事项为什么需要waitForURLParams轮询页面级On page load事件的触发时机可能早于地址栏查询字符串完全写入直接读取window.location.search可能拿到空串。用「延时 轮询」把检查挂到 Promise 上可以稳定等到参数就绪本例超时步长 5000ms。globals.urlparams的两种数据来源。直接以带参 URL 打开应用时由 useAppData.js 从location.search解析由 Switch page 动作跳转时由 appSlice.js 依据动作携带的参数对构造并写入。两条路径最终都会同步到{{globals.urlparams}}。环境参数自动保留。切换页面时前端会检查当前 URL 中的version、env等参数并自动合并进新 URLeventsSlice.js因此按上文方式跳转不会丢失应用的版本与环境上下文。边界情况。如果 URL 中缺少email参数示例脚本会弹出提示而不是继续执行查询这正好演示了「按参数条件化执行」的思路——你可以把alert替换为跳转到默认页、展示空状态等任意兜底逻辑。参数值的动态化。Switch page 的 value 输入框支持表达式除了绑定组件值如{{components.form1.data.textinput1.value}}也可以使用全局变量或当前用户信息如{{globals.currentUser.email}}适用于登录态透传等场景多个参数可通过「Add param」继续追加。小结通过{{globals.urlparams}} 页面级On page load事件 RunJS 脚本中的actions.runQuery即可在 ToolJet 中实现「跨页传参、按需加载」的完整模式。这套方案不需要后端参与纯前端即可完成参数校验、查询触发与数据渲染可复用于权限透传、筛选条件传递、详情页数据预加载等常见内部工具场景。进一步了解 Switch page 动作的参数配置与 RunJS 触发方式可参阅 Switch Page 动作参考。【免费下载链接】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），仅供参考
