ToolJet 应用构建器值访问与引用指南使用{{}}表达式、Inspector 与全局变量【免费下载链接】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 应用构建器中如何通过双花括号{{}}表达式访问与引用动态数据——包括查询queries返回的数据、组件components属性、全局变量globals、用户变量variables与页面变量page variables。你将掌握 Inspector 面板的完整用法、各命名空间的实际取值语法以及如何用自定义 JavaScript 代码让组件属性动态化为构建内部工具、数据看板与业务应用打下数据绑定基础。为什么需要值访问动态数据接入的基础ToolJet 应用中的数据绑定能力源自一套统一的值访问机制双花括号{{}}表达式。在应用构建器中你可以在组件属性、查询参数、事件配置等任何可输入的位置写入{{...}}ToolJet 会将其解析为 JavaScript 表达式并实时求值。这使应用能够把查询结果、用户操作、页面状态等运行时数据无缝注入到界面与逻辑中实现无代码/低代码外壳下的完整动态能力。围绕这套机制ToolJet 提供了四大取值来源queries访问查询执行后返回的数据components访问画布上组件的值与其他组件相关变量globals访问环境预置的全局设置与变量主题、当前用户、URL 参数等variables / page访问用户自定义的全局变量与页面级变量。这些可访问值的完整清单都可以通过左侧边栏的Inspector标签页实时查看。使用 Inspector 查看所有可访问值Inspector 是应用构建器中最常用的调试与数据探查工具位于左侧边栏。它可以直观地展示查询与组件返回的数据并支持在查询、组件中引用这些值。从源码实现看Inspector 面板的数据来自构建器全局状态仓库的getAllExposedValues()分别聚合了components、queries、variables、constants、page、globals六个命名空间并按树形结构渲染见 LeftSidebarInspector.jsx。Inspector 的六大分区根据 use-inspector 指南Inspector 面板包含 6 个主要分区分区内容说明Queries查询的详细信息只有查询被执行/触发后其数据才会出现在此处Components画布上各组件的属性与值用于分析每个组件在应用内的运行状态Globals与应用相关的全局信息当前用户、用户组、主题、URL 参数、环境、模式等Variables用户自定义变量键值对通过事件处理器或 Run JavaScript 代码设置全应用可访问Page页面级属性页面名称、handle 与页面变量仅限所在页面访问Constants预定义的常量值通常存放 token、密钥、API Key 等固定值便于统一维护Inspector 还支持在面板内搜索可快速定位queries、components、globals、variables、page、constants等路径下的任意字段。Globals 全局变量明细Globals 分区提供以下预置数据详见 use-inspector.mdcurrentUser当前登录用户信息如email、firstName、lastNamegroups当前用户所属的用户组名称列表all_users是所有人的默认组theme当前正在使用的主题名称urlparams应用 URL 参数解析结果。在 appSlice.js 中可以看到urlparams由 URL 查询字符串经queryString.parse解析后写入全局状态environment包含id自动生成的唯一标识与name当前应用版本的环境名modes应用当前所处的模式——edit编辑、preview构建器中点击预览、view通过分享链接打开。说明environment与modes两个变量在 ToolJet 企业版 v2.2.3 及以上版本才可用而currentUser、groups、theme等其余全局变量在所有 ToolJet 应用中均可随处访问。核心取值语法queries、components、globals在 Inspector 中确认了可用值之后即可在任意属性或代码输入处用{{}}引用它们。以下是三种最常见的取值场景。场景一读取查询数据目的取回查询返回的业务数据。实现使用表达式{{queries.getSalesData.data}}获取名为getSalesData的查询返回的数据。该语法在查询管理中同样适用——例如在 using-code.md 的示例中可以在 Run JavaScript 代码查询里先用await queries.restapi1.run()执行查询再通过queries.restapi1.getData()读取结果并做二次加工。场景二读取组件值目的获取组件上的用户交互状态或选中数据。实现使用表达式{{components.table1.selectedRow.id}}获取表格table1当前选中行的id字段。组件值读取是构建交互式界面的关键例如{{components.textinput1.value}}可获取文本输入框的当前内容{{components.checkbox1.value}}可获取复选框的勾选状态布尔值它们常被用于驱动其他组件的禁用、显隐与样式。场景三访问全局变量目的读取 ToolJet 环境预置的全局设置并据此动态调整界面。实现使用{{globals.theme.name}}获取当前主题名进而动态适配组件样式。全局变量还可组合出更复杂的逻辑例如基于用户组控制可见性{{globals.currentUser.groups.includes(admin) ? true : false }}这段代码会让组件仅在管理员访问时可见非常适合按钮、操作入口等权限敏感型 UI 的按需渲染。用fx编写自定义代码让属性动态化除直接取值外{{}}内还可以编写任意 JavaScript 表达式。属性面板中每个属性旁的fx按钮可切换静态值/动态表达式模式是低代码场景下注入自定义逻辑的最常用入口。示例一按主题切换按钮背景色在 Button 组件的 Background Color 属性上使用 fx返回十六进制颜色字符串{{globals.theme.name light ? #375FCF : #FFFFFF}}示例二根据用户输入启用/禁用按钮在 Button 组件的 Disable 属性上使用 fx返回布尔值{{components.form1.data.textinput1 ? true : false}}当表单内文本输入为空时按钮禁用有输入时恢复可用。示例三按输入值控制禁用状态Number Input{{components.numberinput1.value ? false : true}} // 将 numberinput1 替换为你实际的组件名当数字输入框没有值时按钮处于禁用状态。示例四文本匹配动态改色{{components.textinput1.value available ? #375FCF : #FF0000}} // 将 textinput1 替换为你实际的组件名示例五复选框控制图片显隐在 Image 组件的 Visibility 属性上使用 fx{{components.checkbox1.value ? true : false}} // 将 checkbox1 替换为你实际的组件名表格单元格转换在 Table 组件的属性面板中进入某列设置其Transformations默认值为{{cellValue}}可编写代码动态改写单元格值例如四舍五入{{cellValue 4.5 ? 5 : 4}}日期默认值使用 Moment.js在 Datepicker 组件的 Default value 属性中输入{{moment().format(DD/MM/YYYY);}}即可将今天日期以DD/MM/YYYY格式设为默认值。ToolJet 内置了 moment 等常用工具库可在表达式中直接使用。变量与页面变量跨页面管理动态状态当需要跨页面或跨组件共享状态时应使用variables应用级变量与page variables页面级变量。设置方式有两种详见 variables.md通过事件在事件处理器中选择Set variable动作并在 Action Options 中定义 Key 与 Value页面变量则使用Set page variable动作。通过 Run JavaScript code 查询调用setVariable(key, value)设置应用级变量调用setPageVariable(key, value)设置页面级变量。实战统计用户访问页面次数创建名为countVisits的 Run JavaScript code 查询function incrementPageVisit() { if (!page.variables.visitCount) { actions.setPageVariable(visitCount, 1); } else { actions.setPageVariable(visitCount, Number(page.variables.visitCount) 1); } } incrementPageVisit();随后新建页面如Product Listing为该页面添加事件处理器事件选On page load动作选Run Query查询选择countVisits。此后用户每次进入该页面visitCount都会自动 1。注意这里通过page.variables.visitCount访问页面变量体现出page命名空间与variables命名空间应用级的作用域差异。实战避免表格加载闪烁创建getData与updateData两个查询将表格数据放入变量loadedData给getData添加Query Success事件动作选setVariableKey 设为loadedDataValue 设为返回数据queries.getData.data在 Table 组件的Data属性中输入{{variables.loadedData}}给updateData添加两个Query Success事件第一个运行getData查询第二个用getData返回的数据更新loadedData变量。这样表格始终渲染loadedData中的数据数据刷新期间不会出现加载指示器交互体验更平滑。左侧边栏页面、调试器与全局设置除了 Inspector应用构建器左侧边栏还是应用导航与配置的中枢包含以下关键选项Pages页面在一个应用内管理多个页面增强组织结构与用户导航体验Inspector检查器检查查询与组件关联的数据是调试与数据操作的核心工具Debugger调试器跟踪并展示查询执行期间的错误为排查应用问题提供线索Global Settings全局设置配置应用级设置如应用 slug、页头可见性、维护模式等。实用建议在编写任何{{}}表达式前先打开 Inspector 确认字段名与数据结构能显著减少拼写错误与数据流问题善用 Debugger 观察查询执行错误保持应用运行顺畅、快速定位问题通过 Global Settings 按组织或用户需求调整应用行为需要全局共享的状态优先使用variables仅在单页内使用的状态用page.variables作用域清晰、便于维护涉及密钥、token 等固定值优先放入 Constants 统一管理避免散落在各表达式中。进一步阅读Inspector 完整使用指南值访问概念详解变量与页面变量管理自定义代码使用示例查询创建指南【免费下载链接】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），仅供参考