ToolJet 跨应用导航动作完全指南Go to app 的配置、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导读Go to app跳转到应用是 ToolJet 内置的一种导航类动作用于在事件触发时打开当前工作区中任意已发布Released的 ToolJet 应用是实现多应用间相互跳转、入口聚合与流程串联的核心手段。本文将从动作的触发场景、配置面板各字段、通过 RunJS 以代码方式调用到其在 frontend 中的事件执行源码给出完整且可验证的实战说明。读完本文你将掌握如何在事件处理器中正确配置跳转目标与查询参数、如何获取并校验应用 slug以及跨应用跳转在编辑器与查看器两种模式下的实际行为差异。何时使用 Go to app 动作ToolJet 应用由组件、查询与事件处理器Event Handler组成。每个组件都可以绑定交互事件而每个事件又可以挂载一个或多个动作。当应用体系拆分为多个应用时例如一个仪表盘应用 若干业务处理应用Go to app 就是连接它们的桥梁从列表应用跳转到某个记录的详情应用并通过查询参数传递记录 ID在一个总入口应用中放置多个导航按钮分别进入不同的已发布应用在事件驱动的自动化流程中如 RunJS 查询成功后按条件跳转到指定应用。正如动作定义所示它归属于navigation导航分组与 Switch page切换页面、Open webpage打开网页 同属一类用于改变用户当前所处的位置或上下文。使用前提目标应用必须已发布文档明确说明了一个约束Go to app 只能打开已经发布Released的应用未发布的草稿应用无法作为跳转目标。因此在实际使用前需要在应用构建器中编辑完成应用并通过右上角的Release发布按钮将其发布在另一个应用中添加 Go to app 动作选择或填写该已发布应用的标识。发布状态决定了该应用是否拥有可访问的线上 slug——这是动作执行时构造跳转 URL 的依据。如何获取应用的 slugGo to app 需要一个slug来唯一定位目标应用。根据官方动作文档slug 可以通过以下两种途径获得从已发布应用的浏览器 URL 中提取格式为https://your-tooljet-host/applications/slug即application/之后的路径段从共享Share弹窗中查看在应用构建器右上角点击Share按钮弹出的共享弹窗中会给出该应用的发布链接slug 即链接中的标识部分。注意在较新的版本中图形化配置面板保存的是应用的稳定关联 IDcorrelationId并据此反查 slug而通过 RunJS 直接调用时则仍以 slug 为直接参数详见下文。在事件处理器中配置 Go to app添加动作并选择目标应用在任意组件的事件处理器中新增一个动作从动作列表选择Go to app后会渲染对应的配置面板。该面板的实现位于 GotoApp.jsx包含两个配置区域App目标应用选择通过下拉框OptionCombobox列出当前工作区中可选的应用选中后写入事件配置。源码注释表明新版面板持久化的是correlationId而非旧的slug字段同时会把所选应用的slug与currentVersionId镜像到 store 的linkedApps映射中目的是无需刷新即可在点击时构造 URL并让校验逻辑能够区分目标缺失与没有已发布版本两种错误。若所选应用在加载的链接映射中无法通过校验面板会显示红色错误标签与Undefined app提示。Query params查询参数以键 / 值成对的行来维护跳转时携带的查询参数每行是一个 CodeHinter 代码输入框event-query-param-key与event-query-param-value因此键与值都可以使用动态引用如{{components.table1.selectedRow.id}}。通过Add param按钮可追加新的键值行行尾的删除按钮可移除不再需要的参数。对应动作在配置层事件模型中的定义位于 ActionTypes.js{ name: Go to app, id: go-to-app, options: [ { name: app, type: text, default: }, { name: queryParams, type: code, default: [] }, ], group: navigation, }即动作需要app目标应用与queryParams查询参数JSON 数组形式默认空数组[]两类配置。下图展示了该动作在事件处理器中的配置界面Debounce 防抖字段在事件处理器中每个动作都可以附带一个Debounce防抖字段默认情况下该字段为空表示动作被触发后立即执行可以输入一个**数值毫秒**来指定动作延迟执行的时间例如300表示事件触发后 300 毫秒才执行该动作。该字段在 EventManager.jsx 中有相应的处理逻辑当 debounce 参数被置为空字符串时会从事件配置中删除该键从而恢复立即执行的语义。防抖非常适合与查询、按钮快速连点等高频事件配合避免在极短时间内重复触发跳转。通过 RunJS 以代码方式触发跳转除了在事件处理器中图形化配置Go to app 同样可以从JavaScript 代码中触发在 RunJS 查询、组件代码等场景。ToolJet 为各动作提供了一套全局actionsAPI具体语法可参考 Run actions from RunJS query其核心调用形式为actions.goToApp(slug, queryparams)参数说明slug目标已发布应用的 slug可从发布后 URL 的application/之后获取或从 Share 弹窗中查看queryparams二维数组形式例如[ [key1,value1], [key2,value2] ]。一个实际示例——从当前应用跳转到 slug 为customer-detail的应用并携带客户 IDconst row components.table1.selectedRow; actions.goToApp(customer-detail, [[id, row.id], [source, dashboard]]);在执行层RunJS 发起的调用会被识别为event.source app-action此时直接使用传入的slug源码注释明确说明这是为了向后兼容保留的直接传 slug 方式。因此代码方式跳转时 slug 是必填参数若为空会抛出No application slug provided错误。动作执行原理与源码级解析Go to app 的核心执行逻辑位于事件运行时 eventsSlice.js一次跳转的执行过程可以拆解为以下几步解析目标 slug来自 RunJSsource app-action时直接校验event.slug非空并通过getResolvedValue解析其中可能存在的动态引用来自构建器事件配置时要求event.correlationId非空然后从 store 的linkedAppsMapcorrelationId, { slug, currentVersionId }定义于 appSlice.js中反查该应用对应的 slug。若在编辑器模式下校验失败应用缺失或未发布会抛出带具体原因的异常并进入调试器错误日志logError(go_to_app, ...)而在查看器viewer模式下则跳过校验直接尝试重定向交由既有的 404/not found 兜底处理。组装查询参数将配置中的键值对数组reduce成一个对象键与值都经过getResolvedValue解析因此可引用组件状态、变量等动态数据随后通过serializeNestedObjectToQueryParams序列化支持嵌套对象的展开最终拼接出查询串。构造跳转 URL 并执行基础路径为/applications/slug若存在查询参数则追加?...若 ToolJet 部署在子路径subpath下还会自动加上子路径前缀。之后按运行模式分流查看器模式view通过window.open(url, _self)在当前标签页完成跳转编辑器模式editor会先弹出确认框The app will be opened in a new tab as the action is triggered from the editor.确认后基于当前 Host URL 拼出完整地址并在新标签页打开——因为编辑器本身承载着正在编辑的应用不能直接覆盖当前页面。正是这条 URL 构建逻辑决定了动作只能打开已发布应用应用只有发布后才拥有对外可访问的 slug 路径供拼接与访问。此外事件执行前的动作校验isLinkedAppValid及相关工具逻辑位于 AppBuilder/_stores/utils.js 附近负责在页面/事件触发前验证 go-to-app 链接目标是否有效从而把配置期即可发现错误的能力前置到构建阶段。常见问题与注意事项关注点说明目标应用未发布跳转会失败。请先在目标应用中完成 Release再检查其 slug 是否存在。运行在编辑器模式下跳转前会有确认弹窗并在新标签页打开这是为了不打断当前应用的编辑会话。运行在已发布应用的查看模式跳转发生在当前标签页_self体验上如同页面间的自然流转。查询参数动态取值键与值均支持模板引用{{ ... }}可将选中行、变量等运行时数据带给目标应用。代码方式必填 slug使用actions.goToApp(...)时必须传 slug否则抛No application slug provided。防抖配合需要延迟执行时填写毫秒值为空即立即执行。从跨应用跳转这个单一动作可以看到 ToolJet 事件机制的设计取向图形化配置存储关联 ID、可校验、防抖可控与代码化调用actions全局 API双轨并存统一收敛到同一套事件运行时执行既适合无代码使用者也为开发者保留了完整的可编程空间。延伸阅读与源码索引动作官方文档含多版本归档docs/docs/actions/go-to-app.md另见 version-3.0.0-LTS 与 version-2.50.0-LTS 两个版本的文档在 RunJS 中触发全部动作的 API 指南docs/docs/how-to/run-action-from-runjs.md同类导航动作Switch page、Open webpage动作配置面板源码GotoApp.jsx动作模型定义含 options 与分组ActionTypes.js事件执行运行时含 go-to-app 分支eventsSlice.js已链接应用映射状态appSlice.js事件配置面板与防抖处理EventManager.jsx【免费下载链接】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），仅供参考