尧图网站建设 
ToolJet Set Page Variable 动作详解页面级变量的创建、访问与 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页面变量Page Variable是 ToolJet 多页面应用Multipage Apps中作用域限定在单个页面内的动态数据载体与贯穿整个应用的普通变量App 级变量不同它只能在被创建的页面中被访问。本篇指南基于 set-page-var.md 展开结合 ToolJet 前端源码完整讲解 Set Page Variable 动作的配置方式、Debounce 延迟执行、通过 RunJS 查询调用该动作的语法以及页面变量在底层状态树中的存储与求值原理。读完本篇你将能够在多页面应用中熟练创建、读写页面级变量并将其接入事件处理器或 JavaScript 代码。页面变量与普通变量的区别在 ToolJet 中普通变量通过 Set Variable 动作创建属于整个应用可以在任意页面、任意组件中通过{{variables.key}}访问而页面变量则被限制在创建它的那一个页面内作用域仅限当前页面无法像普通变量那样在整个应用中跨页访问适用场景多页面应用Multipage Apps中需要为每个页面维护彼此独立的临时状态例如分页器当前页码、筛选条件、表单暂存值等访问方式页面变量的值通过{{page.variables.pageVariableName}}动态获取其中pageVariableName是使用 Set Page Variable 动作创建的具体变量名。补充从 pages.md 的 Exposed variables 一节可知每个页面本身暴露了handle页面 slug、name页面名称、id页面唯一标识和variables该页面通过 Set Page Variable 创建的全部变量对象四个内置变量page.variables即对应最后一个。在事件处理器中配置 Set Page VariableSet Page Variable 是一个动作Action可以附加到任何组件的任意事件上最常见的场景是配合按钮的 On Click 事件或页面的 On Page Load 事件见 pages.md。配置时只需要两个字段字段说明Key页面变量名即存储到page.variables对象中的键Value要赋给该变量的值对应的事件管理器表单实现在 EventManager.jsx当event.actionId set-page-variable时渲染一个 Key 字段和一个 Value 字段两者都是CodeHinter类型的输入框意味着 Key 和 Value 都可以直接书写表达式例如引用其他组件的值{{components.textinput1.value}}并支持自动补全提示。在事件处理器中为 Set Page Variable 动作填写 Key 与 Value 字段。Debounce延迟执行毫秒数默认情况下Debounce字段保持为空即动作立即执行。你也可以输入一个数值表示在执行动作前等待的毫秒数例如输入300表示延迟 300 毫秒后再设置变量。Debounce 的典型用途是在需要节流/防抖的场景下使用例如输入框内容变化事件中避免每次按键都立即更新变量从而减少不必要的状态刷新与下游重算。由于页面变量写入后会触发依赖该变量的组件重新求值详见下文源码中的实现合理使用 Debounce 可以显著降低高频事件下的渲染开销。通过 RunJS 查询设置页面变量除了在事件处理器中可视化配置Set Page Variable 动作还可以在RunJS 查询中通过 JavaScript 代码直接触发语法如下await actions.setPageVariable(variablekey, variablevalue);参数规则variablekey必须作为字符串提供用引号包裹例如filterKeywordvariablevalue如果是数值则无需加引号例如await actions.setPageVariable(currentPage, 3)如果是字符串或对象、数组等复合类型则需要按 JS 语法书写字符串加引号对象/数组直接写字面量。在 RunJS 查询中使用actions.setPageVariable以编程方式写入页面变量。示例在 RunJS 中同时写入一个字符串变量与一个数值变量await actions.setPageVariable(filterKeyword, ToolJet); await actions.setPageVariable(currentPage, 1);关于如何在 RunJS 查询中运行各类动作的完整说明请参考指南 run-action-from-runjs.md。源码中的实现从事件到状态树为了理解页面变量的真实行为可以深入前端状态管理层查看实现。ToolJet 前端使用 Zustand 管理应用构建器状态页面变量最终存储在模块module级的状态树中。动作分发入口在 eventsSlice.js 中事件处理器按actionId分发动作case set-page-variable: { const { setPageVariable } get(); const key getResolvedValue(event.key, customVariables, moduleId); const value getResolvedValue(event.value, customVariables, moduleId); setPageVariable(key, value, moduleId); return Promise.resolve(); }可以看到事件配置里的key和value会先经过getResolvedValue求值将其中嵌入的{{...}}表达式解析为真实值再写入页面变量存储。此外还有配套的get-page-variable、unset-page-variable、unset-all-page-variables三个动作分支分别对应读取、删除单个、清空全部页面变量。状态树的写入与依赖刷新实际写入逻辑位于 resolvedSlice.jssetPageVariable: (key, value, moduleId canvas) { set((state) { state.resolvedStore.modules[moduleId].exposedValues.page.variables[key] value; }, false, setPageVariable); get().updateDependencyValues(page.variables.${key}, moduleId); get().rebuildVariableHints(moduleId); },从源码结构看可以确认以下几点实现事实存储位置页面变量存放在resolvedStore.modules[moduleId].exposedValues.page.variables与普通变量exposedValues.variables分属不同的命名空间这正是两者作用域隔离的底层原因依赖联动写入变量后立即调用updateDependencyValues(page.variables.key)所有在表达式中引用了{{page.variables.key}}的组件会被重新求值实现响应式更新编辑提示rebuildVariableHints会重建代码提示索引使新创建的页面变量立即出现在后续表达式的自动补全候选中。RunJS 中的 actions 对象在 eventsSlice.js 中暴露给 RunJS 的actions.setPageVariable被定义为const setPageVariable (key , value ) { const event { actionId: set-page-variable, key, value }; return executeAction(event, mode, {}, moduleId); };它本质上就是把调用参数包装成与事件处理器相同的actionId: set-page-variable事件对象再走统一的executeAction执行通道因此与可视化配置的事件行为完全一致——这也解释了为什么文档中 RunJS 与事件处理器两种方式可以等价互换。动作清单与代码分析动作白名单定义在 actions.js其中包含setPageVariable、unsetPageVariable、unsetAllPageVariables三项页面变量相关动作在 scriptAnalysis.ts 中setPageVariable与unsetPageVariable被归类为pageVariableWrites页面变量写操作用于静态分析 RunJS 脚本对页面变量的写入依赖进而驱动依赖图与提示系统。实践一个完整的多页面示例假设一个包含列表页和详情页的多页面应用希望在点击列表中的某一行时把选中的记录 ID 存入当前页面的变量中在列表页选中一个按钮或行点击事件添加事件处理器动作选择Set Page VariableKey 填selectedRecordIdValue 填{{components.table1.selectedRow.id}}或直接写数值/字符串如需要延迟执行在 Debounce 中填入毫秒数如300。之后在列表页任意组件的属性或查询参数中即可通过{{page.variables.selectedRecordId}}读取该值由于作用域限制切换到详情页后该变量不再可用——此时应改用应用级变量{{variables.selectedRecordId}}或通过 Switch Page 动作携带参数传值。若希望以脚本方式实现可在 RunJS 查询中写入await actions.setPageVariable(selectedRecordId, components.table1.selectedRow.id); return page.variables.selectedRecordId;需要清理页面状态时还可以使用配套的Unset Page Variable删除单个变量动作RunJS 对应语法为await actions.unsetPageVariable(key)清空全部页面变量则对应unsetAllPageVariables。小结Set Page Variable 是 ToolJet 多页面应用中实现页面级隔离状态的核心动作通过事件处理器或 RunJS 两种方式均可创建页面变量配合 Debounce 字段可控制延迟执行写入后的变量以{{page.variables.key}}形式被同页组件消费。其底层实现resolvedSlice.js 与 eventsSlice.js展示了动作分发、表达式求值、依赖刷新与代码提示的完整链路为理解 ToolJet 响应式状态系统提供了一个清晰的切入点。【免费下载链接】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 Set Page Variable 动作详解：页面级变量的创建、访问与 RunJS 调用
ToolJet Set Page Variable 动作详解页面级变量的创建、访问与 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页面变量Page Variable是 ToolJet 多页面应用Multipage Apps中作用域限定在单个页面内的动态数据载体与贯穿整个应用的普通变量App 级变量不同它只能在被创建的页面中被访问。本篇指南基于 set-page-var.md 展开结合 ToolJet 前端源码完整讲解 Set Page Variable 动作的配置方式、Debounce 延迟执行、通过 RunJS 查询调用该动作的语法以及页面变量在底层状态树中的存储与求值原理。读完本篇你将能够在多页面应用中熟练创建、读写页面级变量并将其接入事件处理器或 JavaScript 代码。页面变量与普通变量的区别在 ToolJet 中普通变量通过 Set Variable 动作创建属于整个应用可以在任意页面、任意组件中通过{{variables.key}}访问而页面变量则被限制在创建它的那一个页面内作用域仅限当前页面无法像普通变量那样在整个应用中跨页访问适用场景多页面应用Multipage Apps中需要为每个页面维护彼此独立的临时状态例如分页器当前页码、筛选条件、表单暂存值等访问方式页面变量的值通过{{page.variables.pageVariableName}}动态获取其中pageVariableName是使用 Set Page Variable 动作创建的具体变量名。补充从 pages.md 的 Exposed variables 一节可知每个页面本身暴露了handle页面 slug、name页面名称、id页面唯一标识和variables该页面通过 Set Page Variable 创建的全部变量对象四个内置变量page.variables即对应最后一个。在事件处理器中配置 Set Page VariableSet Page Variable 是一个动作Action可以附加到任何组件的任意事件上最常见的场景是配合按钮的 On Click 事件或页面的 On Page Load 事件见 pages.md。配置时只需要两个字段字段说明Key页面变量名即存储到page.variables对象中的键Value要赋给该变量的值对应的事件管理器表单实现在 EventManager.jsx当event.actionId set-page-variable时渲染一个 Key 字段和一个 Value 字段两者都是CodeHinter类型的输入框意味着 Key 和 Value 都可以直接书写表达式例如引用其他组件的值{{components.textinput1.value}}并支持自动补全提示。在事件处理器中为 Set Page Variable 动作填写 Key 与 Value 字段。Debounce延迟执行毫秒数默认情况下Debounce字段保持为空即动作立即执行。你也可以输入一个数值表示在执行动作前等待的毫秒数例如输入300表示延迟 300 毫秒后再设置变量。Debounce 的典型用途是在需要节流/防抖的场景下使用例如输入框内容变化事件中避免每次按键都立即更新变量从而减少不必要的状态刷新与下游重算。由于页面变量写入后会触发依赖该变量的组件重新求值详见下文源码中的实现合理使用 Debounce 可以显著降低高频事件下的渲染开销。通过 RunJS 查询设置页面变量除了在事件处理器中可视化配置Set Page Variable 动作还可以在RunJS 查询中通过 JavaScript 代码直接触发语法如下await actions.setPageVariable(variablekey, variablevalue);参数规则variablekey必须作为字符串提供用引号包裹例如filterKeywordvariablevalue如果是数值则无需加引号例如await actions.setPageVariable(currentPage, 3)如果是字符串或对象、数组等复合类型则需要按 JS 语法书写字符串加引号对象/数组直接写字面量。在 RunJS 查询中使用actions.setPageVariable以编程方式写入页面变量。示例在 RunJS 中同时写入一个字符串变量与一个数值变量await actions.setPageVariable(filterKeyword, ToolJet); await actions.setPageVariable(currentPage, 1);关于如何在 RunJS 查询中运行各类动作的完整说明请参考指南 run-action-from-runjs.md。源码中的实现从事件到状态树为了理解页面变量的真实行为可以深入前端状态管理层查看实现。ToolJet 前端使用 Zustand 管理应用构建器状态页面变量最终存储在模块module级的状态树中。动作分发入口在 eventsSlice.js 中事件处理器按actionId分发动作case set-page-variable: { const { setPageVariable } get(); const key getResolvedValue(event.key, customVariables, moduleId); const value getResolvedValue(event.value, customVariables, moduleId); setPageVariable(key, value, moduleId); return Promise.resolve(); }可以看到事件配置里的key和value会先经过getResolvedValue求值将其中嵌入的{{...}}表达式解析为真实值再写入页面变量存储。此外还有配套的get-page-variable、unset-page-variable、unset-all-page-variables三个动作分支分别对应读取、删除单个、清空全部页面变量。状态树的写入与依赖刷新实际写入逻辑位于 resolvedSlice.jssetPageVariable: (key, value, moduleId canvas) { set((state) { state.resolvedStore.modules[moduleId].exposedValues.page.variables[key] value; }, false, setPageVariable); get().updateDependencyValues(page.variables.${key}, moduleId); get().rebuildVariableHints(moduleId); },从源码结构看可以确认以下几点实现事实存储位置页面变量存放在resolvedStore.modules[moduleId].exposedValues.page.variables与普通变量exposedValues.variables分属不同的命名空间这正是两者作用域隔离的底层原因依赖联动写入变量后立即调用updateDependencyValues(page.variables.key)所有在表达式中引用了{{page.variables.key}}的组件会被重新求值实现响应式更新编辑提示rebuildVariableHints会重建代码提示索引使新创建的页面变量立即出现在后续表达式的自动补全候选中。RunJS 中的 actions 对象在 eventsSlice.js 中暴露给 RunJS 的actions.setPageVariable被定义为const setPageVariable (key , value ) { const event { actionId: set-page-variable, key, value }; return executeAction(event, mode, {}, moduleId); };它本质上就是把调用参数包装成与事件处理器相同的actionId: set-page-variable事件对象再走统一的executeAction执行通道因此与可视化配置的事件行为完全一致——这也解释了为什么文档中 RunJS 与事件处理器两种方式可以等价互换。动作清单与代码分析动作白名单定义在 actions.js其中包含setPageVariable、unsetPageVariable、unsetAllPageVariables三项页面变量相关动作在 scriptAnalysis.ts 中setPageVariable与unsetPageVariable被归类为pageVariableWrites页面变量写操作用于静态分析 RunJS 脚本对页面变量的写入依赖进而驱动依赖图与提示系统。实践一个完整的多页面示例假设一个包含列表页和详情页的多页面应用希望在点击列表中的某一行时把选中的记录 ID 存入当前页面的变量中在列表页选中一个按钮或行点击事件添加事件处理器动作选择Set Page VariableKey 填selectedRecordIdValue 填{{components.table1.selectedRow.id}}或直接写数值/字符串如需要延迟执行在 Debounce 中填入毫秒数如300。之后在列表页任意组件的属性或查询参数中即可通过{{page.variables.selectedRecordId}}读取该值由于作用域限制切换到详情页后该变量不再可用——此时应改用应用级变量{{variables.selectedRecordId}}或通过 Switch Page 动作携带参数传值。若希望以脚本方式实现可在 RunJS 查询中写入await actions.setPageVariable(selectedRecordId, components.table1.selectedRow.id); return page.variables.selectedRecordId;需要清理页面状态时还可以使用配套的Unset Page Variable删除单个变量动作RunJS 对应语法为await actions.unsetPageVariable(key)清空全部页面变量则对应unsetAllPageVariables。小结Set Page Variable 是 ToolJet 多页面应用中实现页面级隔离状态的核心动作通过事件处理器或 RunJS 两种方式均可创建页面变量配合 Debounce 字段可控制延迟执行写入后的变量以{{page.variables.key}}形式被同页组件消费。其底层实现resolvedSlice.js 与 eventsSlice.js展示了动作分发、表达式求值、依赖刷新与代码提示的完整链路为理解 ToolJet 响应式状态系统提供了一个清晰的切入点。【免费下载链接】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），仅供参考