尧图网页设计 
ToolJet Exposed Variables暴露变量实战指南用{{components.*}}实现组件间的动态数据联动【免费下载链接】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/ToolJetExposed Variables暴露变量是 ToolJet 低代码应用中组件与数据互通的桥梁每个组件在运行时都会自动暴露一组变量用于承载用户输入、可见状态、选中结果等实时数据。本指南以 ToolJet 2.50.0-LTS 版本为背景系统讲解暴露变量的概念、{{components.textinput1.value}}这类访问语法、常见组件的变量清单并结合仓库源码剖析其自动创建与更新的运行机制帮助你在属性绑定、事件处理和查询参数中灵活读写组件状态。什么是 Exposed Variables在 ToolJet 中Exposed Variables 帮助开发者访问和操作组件内部的数据。这些变量并非手动定义而是随着应用运行自动创建、自动更新的——每当用户与应用交互在文本框中输入文字、切换下拉选项、勾选复选框、隐藏或禁用某个组件对应的暴露变量都会在运行时被同步刷新。从源码结构看每个组件在配置阶段就声明了自己的暴露变量集合。例如 TextInput 组件定义 中exposedVariables: { value: , isMandatory: false, isVisible: true, isDisabled: false, isLoading: false, },这组声明定义了 TextInput 组件在应用运行时对外暴露的 5 个变量及其初始值随着用户输入与状态切换这些值会被实时覆盖。无论是捕捉文本编辑器中的文字、检查组件当前是否可见还是读取下拉菜单的选中项暴露变量都是 ToolJet 应用内动态数据处理的核心载体。访问暴露变量的语法{{components.*}}每个 ToolJet 组件都拥有自己的一组暴露变量用于承载与该组件相关的具体数据。开发者可以在任何支持表达式的位置组件属性、查询参数、事件处理器、JS 代码等使用 JavaScript 模板语法动态访问它们。以 Text Input 组件为例其value变量保存着用户当前输入的内容每次用户在输入框中键入文字value都会被更新访问方式是{{components.textinput1.value}}其中片段含义{{ }}表达式求值标记ToolJet 会将其内部内容作为 JavaScript 表达式执行并替换为结果components组件命名空间表示访问的是画布上的组件textinput1组件 ID默认为「组件类型名 序号」第一个 Text Input 即textinput1可在组件属性面板中修改value该组件暴露的具体变量名得益于这套语法开发者可以实时追踪并利用用户在应用中的输入数据例如把输入框内容实时同步到其他组件、文本展示或后端查询参数中。常见组件的暴露变量盘点不同组件的暴露变量集合不同。下面结合仓库源码列出两个典型组件的完整变量清单。Text Input 组件来源frontend/src/AppBuilder/WidgetManager/widgets/textinput.js暴露变量类型/初始值含义value当前输入框中的文本内容随用户输入实时更新isMandatoryfalse当前字段是否为必填受「Make this field mandatory」校验配置影响isVisibletrue组件当前是否可见isDisabledfalse组件当前是否被禁用isLoadingfalse组件当前是否处于加载态例如读取第一个 Text Input 的可见状态{{components.textinput1.isVisible}}。Dropdown 组件来源frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js暴露变量类型/初始值含义value2当前选中项的值对应选项值数组中的元素searchText用户在搜索框中输入的搜索文本labelSelect组件的标签文本optionLabels[one, two, three]全部选项的展示标签数组selectedOptionLabeltwo当前选中项对应的展示标签例如读取第一个 Dropdown 当前选中的展示标签{{components.dropdown1.selectedOptionLabel}}。更多组件几乎每一个内置组件都在配置文件中声明了自己的暴露变量集合仓库中对应文件位于 frontend/src/AppBuilder/WidgetManager/widgets/ 目录例如复选框Checkboxcheckbox.js文件选择器File Pickerfilepicker.js手风琴Accordionaccordion.js日历Calendarcalendar.js图表Chartchart.js级联选择器Cascadercascader.ts按钮组Button GroupbuttonGroup.js日期选择器Date Pickerdatepicker.js编写表达式时可以直接在组件配置文件中查找对应组件声明关键字exposedVariables以确认可用的变量名、初始值类型与语义。各个组件的详细暴露变量说明也可参考组件各自的官方文档章节。实战场景组件间动态联动暴露变量最常见的用途就是让一个组件的状态驱动另一个组件或查询的行为。下面是一个典型示例让下拉菜单的选中结果实时显示在文本输入框中。在画布上放置一个 Dropdown 组件默认 ID 为dropdown1选项值设置为[one, two, three]展示标签设置为[one, two, three]放置一个 Text Input 组件默认 ID 为textinput1将 TextInput 的Default value属性见 textinput.js 中properties.value的定义设置为{{components.dropdown1.selectedOptionLabel}}保存并预览应用每当用户在下拉菜单中选择一个新选项文本输入框就会自动显示对应的选项标签。整个过程无需任何事件绑定或查询纯粹依赖暴露变量的自动更新机制。在此基础上你还可以把暴露变量用于查询参数例如将某个查询的参数值写为{{components.textinput1.value}}即可让查询动态携带用户输入也可以在 Dropdown 的On select事件见 dropdown.js中触发其他逻辑。在表达式校验中引用暴露变量暴露变量同样可用于组件自身的校验规则。以 TextInput 的自定义校验Custom validation为例其占位示例本身就是对组件暴露变量的引用见 textinput.js{{components.text2.textyesvalid}}含义是当text2这个文本组件的当前值为yes时本字段校验通过返回valid否则校验失败。这展示了暴露变量在跨组件联动校验中的典型用法——一个组件的输入状态可以直接影响另一个组件的有效性判定。运行机制暴露变量如何被自动创建与更新从源码结构看暴露变量的「自动创建与自动更新」由前端的状态管理Store统一维护。左侧检查器Left Sidebar Inspector在渲染时通过useStore读取全局暴露值相关实现见 frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsxconst exposedComponentsVariables useStore((state) state.getAllExposedValues().components, shallow); const exposedQueries useStore((state) state.getAllExposedValues().queries || {}, shallow); const exposedVariables useStore((state) state.getAllExposedValues().variables || {}, shallow); const exposedConstants useStore((state) state.getAllExposedValues().constants || {}, shallow); const exposedPageVariables useStore((state) state.getAllExposedValues().page || {}, shallow); const exposedGlobalVariables useStore((state) state.getAllExposedValues().globals || {}, shallow); const exposedModuleInputs useStore((state) state.getAllExposedValues(moduleId).input || {}, shallow);可见暴露值体系不止包含组件components还包括查询queries、变量variables、常量constants、页面变量page、全局变量globals以及模块输入input等命名空间。组件的暴露变量只是其中components命名空间的一部分——当组件渲染、用户交互、查询执行时对应的暴露值会被写入全局状态任何引用该值的表达式都会随之重新求值从而形成「状态变化 → 表达式重算 → 界面/查询刷新」的响应式链路。在 Inspector 中实时查看暴露变量开发时无需记忆每个变量的名字。ToolJet 的左侧 Inspector检查器面板会以树状结构实时展示当前应用的全部暴露值包括各组件的变量、查询结果、全局变量等。当你选中某个组件或运行应用并与之交互时Inspector 中对应节点的值会实时变化是调试暴露变量表达式最直接的辅助工具数据来源即上文引用的 LeftSidebarInspector.jsx 中的formatInspectorComponentData、formatInspectorQueryData等格式化函数。注意事项与最佳实践组件 ID 决定访问路径{{components.组件ID.变量名}}中组件 ID 是访问的关键。画布上同类组件会被自动编号textinput1、textinput2……重命名组件后所有引用该组件暴露变量的表达式都要同步更新否则会指向不存在的组件。以配置文件为准不同版本或不同组件的暴露变量集合可能不同编写表达式前可对照 widgets 目录 下对应组件的exposedVariables声明确认变量名与类型避免引用不存在的变量。区分「值」与「状态」同一组件往往同时暴露数据值如value、selectedOptionLabel与界面状态如isVisible、isDisabled、isLoading按需选择例如控制另一个组件显隐时可读取源组件的isVisible。响应式特性暴露变量是实时的响应式数据表达式中引用它意味着「始终取最新值」无需手动同步——这正是它适合做组件联动与动态查询参数的原因。总结Exposed Variables 是 ToolJet 动态数据处理的基石组件在运行时自动暴露并实时更新一组变量开发者通过{{components.组件ID.变量名}}即可在任意表达式中访问它们。从捕捉文本输入、读取下拉选中项到检查可见性、驱动跨组件校验与查询参数掌握暴露变量意味着你能够用最少的代码搭建出真正活起来的内部工具与业务应用。结合 组件配置文件 与 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），仅供参考 ToolJet Exposed Variables（暴露变量）实战指南：用 `{{components.*}}` 实现组件间的动态数据联动
ToolJet Exposed Variables暴露变量实战指南用{{components.*}}实现组件间的动态数据联动【免费下载链接】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/ToolJetExposed Variables暴露变量是 ToolJet 低代码应用中组件与数据互通的桥梁每个组件在运行时都会自动暴露一组变量用于承载用户输入、可见状态、选中结果等实时数据。本指南以 ToolJet 2.50.0-LTS 版本为背景系统讲解暴露变量的概念、{{components.textinput1.value}}这类访问语法、常见组件的变量清单并结合仓库源码剖析其自动创建与更新的运行机制帮助你在属性绑定、事件处理和查询参数中灵活读写组件状态。什么是 Exposed Variables在 ToolJet 中Exposed Variables 帮助开发者访问和操作组件内部的数据。这些变量并非手动定义而是随着应用运行自动创建、自动更新的——每当用户与应用交互在文本框中输入文字、切换下拉选项、勾选复选框、隐藏或禁用某个组件对应的暴露变量都会在运行时被同步刷新。从源码结构看每个组件在配置阶段就声明了自己的暴露变量集合。例如 TextInput 组件定义 中exposedVariables: { value: , isMandatory: false, isVisible: true, isDisabled: false, isLoading: false, },这组声明定义了 TextInput 组件在应用运行时对外暴露的 5 个变量及其初始值随着用户输入与状态切换这些值会被实时覆盖。无论是捕捉文本编辑器中的文字、检查组件当前是否可见还是读取下拉菜单的选中项暴露变量都是 ToolJet 应用内动态数据处理的核心载体。访问暴露变量的语法{{components.*}}每个 ToolJet 组件都拥有自己的一组暴露变量用于承载与该组件相关的具体数据。开发者可以在任何支持表达式的位置组件属性、查询参数、事件处理器、JS 代码等使用 JavaScript 模板语法动态访问它们。以 Text Input 组件为例其value变量保存着用户当前输入的内容每次用户在输入框中键入文字value都会被更新访问方式是{{components.textinput1.value}}其中片段含义{{ }}表达式求值标记ToolJet 会将其内部内容作为 JavaScript 表达式执行并替换为结果components组件命名空间表示访问的是画布上的组件textinput1组件 ID默认为「组件类型名 序号」第一个 Text Input 即textinput1可在组件属性面板中修改value该组件暴露的具体变量名得益于这套语法开发者可以实时追踪并利用用户在应用中的输入数据例如把输入框内容实时同步到其他组件、文本展示或后端查询参数中。常见组件的暴露变量盘点不同组件的暴露变量集合不同。下面结合仓库源码列出两个典型组件的完整变量清单。Text Input 组件来源frontend/src/AppBuilder/WidgetManager/widgets/textinput.js暴露变量类型/初始值含义value当前输入框中的文本内容随用户输入实时更新isMandatoryfalse当前字段是否为必填受「Make this field mandatory」校验配置影响isVisibletrue组件当前是否可见isDisabledfalse组件当前是否被禁用isLoadingfalse组件当前是否处于加载态例如读取第一个 Text Input 的可见状态{{components.textinput1.isVisible}}。Dropdown 组件来源frontend/src/AppBuilder/WidgetManager/widgets/dropdown.js暴露变量类型/初始值含义value2当前选中项的值对应选项值数组中的元素searchText用户在搜索框中输入的搜索文本labelSelect组件的标签文本optionLabels[one, two, three]全部选项的展示标签数组selectedOptionLabeltwo当前选中项对应的展示标签例如读取第一个 Dropdown 当前选中的展示标签{{components.dropdown1.selectedOptionLabel}}。更多组件几乎每一个内置组件都在配置文件中声明了自己的暴露变量集合仓库中对应文件位于 frontend/src/AppBuilder/WidgetManager/widgets/ 目录例如复选框Checkboxcheckbox.js文件选择器File Pickerfilepicker.js手风琴Accordionaccordion.js日历Calendarcalendar.js图表Chartchart.js级联选择器Cascadercascader.ts按钮组Button GroupbuttonGroup.js日期选择器Date Pickerdatepicker.js编写表达式时可以直接在组件配置文件中查找对应组件声明关键字exposedVariables以确认可用的变量名、初始值类型与语义。各个组件的详细暴露变量说明也可参考组件各自的官方文档章节。实战场景组件间动态联动暴露变量最常见的用途就是让一个组件的状态驱动另一个组件或查询的行为。下面是一个典型示例让下拉菜单的选中结果实时显示在文本输入框中。在画布上放置一个 Dropdown 组件默认 ID 为dropdown1选项值设置为[one, two, three]展示标签设置为[one, two, three]放置一个 Text Input 组件默认 ID 为textinput1将 TextInput 的Default value属性见 textinput.js 中properties.value的定义设置为{{components.dropdown1.selectedOptionLabel}}保存并预览应用每当用户在下拉菜单中选择一个新选项文本输入框就会自动显示对应的选项标签。整个过程无需任何事件绑定或查询纯粹依赖暴露变量的自动更新机制。在此基础上你还可以把暴露变量用于查询参数例如将某个查询的参数值写为{{components.textinput1.value}}即可让查询动态携带用户输入也可以在 Dropdown 的On select事件见 dropdown.js中触发其他逻辑。在表达式校验中引用暴露变量暴露变量同样可用于组件自身的校验规则。以 TextInput 的自定义校验Custom validation为例其占位示例本身就是对组件暴露变量的引用见 textinput.js{{components.text2.textyesvalid}}含义是当text2这个文本组件的当前值为yes时本字段校验通过返回valid否则校验失败。这展示了暴露变量在跨组件联动校验中的典型用法——一个组件的输入状态可以直接影响另一个组件的有效性判定。运行机制暴露变量如何被自动创建与更新从源码结构看暴露变量的「自动创建与自动更新」由前端的状态管理Store统一维护。左侧检查器Left Sidebar Inspector在渲染时通过useStore读取全局暴露值相关实现见 frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsxconst exposedComponentsVariables useStore((state) state.getAllExposedValues().components, shallow); const exposedQueries useStore((state) state.getAllExposedValues().queries || {}, shallow); const exposedVariables useStore((state) state.getAllExposedValues().variables || {}, shallow); const exposedConstants useStore((state) state.getAllExposedValues().constants || {}, shallow); const exposedPageVariables useStore((state) state.getAllExposedValues().page || {}, shallow); const exposedGlobalVariables useStore((state) state.getAllExposedValues().globals || {}, shallow); const exposedModuleInputs useStore((state) state.getAllExposedValues(moduleId).input || {}, shallow);可见暴露值体系不止包含组件components还包括查询queries、变量variables、常量constants、页面变量page、全局变量globals以及模块输入input等命名空间。组件的暴露变量只是其中components命名空间的一部分——当组件渲染、用户交互、查询执行时对应的暴露值会被写入全局状态任何引用该值的表达式都会随之重新求值从而形成「状态变化 → 表达式重算 → 界面/查询刷新」的响应式链路。在 Inspector 中实时查看暴露变量开发时无需记忆每个变量的名字。ToolJet 的左侧 Inspector检查器面板会以树状结构实时展示当前应用的全部暴露值包括各组件的变量、查询结果、全局变量等。当你选中某个组件或运行应用并与之交互时Inspector 中对应节点的值会实时变化是调试暴露变量表达式最直接的辅助工具数据来源即上文引用的 LeftSidebarInspector.jsx 中的formatInspectorComponentData、formatInspectorQueryData等格式化函数。注意事项与最佳实践组件 ID 决定访问路径{{components.组件ID.变量名}}中组件 ID 是访问的关键。画布上同类组件会被自动编号textinput1、textinput2……重命名组件后所有引用该组件暴露变量的表达式都要同步更新否则会指向不存在的组件。以配置文件为准不同版本或不同组件的暴露变量集合可能不同编写表达式前可对照 widgets 目录 下对应组件的exposedVariables声明确认变量名与类型避免引用不存在的变量。区分「值」与「状态」同一组件往往同时暴露数据值如value、selectedOptionLabel与界面状态如isVisible、isDisabled、isLoading按需选择例如控制另一个组件显隐时可读取源组件的isVisible。响应式特性暴露变量是实时的响应式数据表达式中引用它意味着「始终取最新值」无需手动同步——这正是它适合做组件联动与动态查询参数的原因。总结Exposed Variables 是 ToolJet 动态数据处理的基石组件在运行时自动暴露并实时更新一组变量开发者通过{{components.组件ID.变量名}}即可在任意表达式中访问它们。从捕捉文本输入、读取下拉选中项到检查可见性、驱动跨组件校验与查询参数掌握暴露变量意味着你能够用最少的代码搭建出真正活起来的内部工具与业务应用。结合 组件配置文件 与 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），仅供参考