尧图网站建设 
ToolJet 查询面板完全指南在 App Builder 中创建与管理数据查询【免费下载链接】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 应用构建器App Builder底部的Query Panel查询面板展开讲解如何基于已连接的数据源创建查询、使用 GUI/SQL 两种模式配置查询、通过参数与组件值实现动态查询、将查询结果绑定到组件以及利用转换Transformations、事件Events和高级设置完成从数据获取到应用联动闭环的完整流程。读完本文你将掌握在 ToolJet 中构建查询 → 转换 → 事件 → 组件绑定全链路的实战能力。Query Panel 的界面构成Query Panel 位于 App Builder 底部是与已连接数据源交互的集中入口既可以发起 API 请求、查询数据库也可以使用 JavaScript 和 Python 对数据做转换或操作。它由左右两个区域组成Query Manager查询管理器位于左侧以列表形式展示当前应用中已创建的全部查询Query Editor查询编辑器位于右侧用于配置当前选中的查询。在源码层面两者分别对应 QueryPanel.jsx负责面板整体的展开/折叠与拖拽高度和 QueryManager.jsx负责选中查询的渲染与数据源解析。Query Manager 内部又按Setup / Transformation / Settings三个标签页组织编辑区对应实现见 QueryManagerHeader.jsx 中的tabs定义其中 Transformation 标签对runpy、runjs、workflows三类查询自动隐藏因为它们本身就是代码查询无需再转换。创建新查询在 Query Panel 中点击按钮会弹出菜单列出当前工作区可用的数据源若需要新的数据源可点击菜单中的 Add new Data Source进入数据源管理页面添加。随后选择要操作的数据源即可开始配置。从源码结构看内置的静态数据源定义在 constants.js包括 REST API、Run JavaScript code、Run Python code、ToolJet Database、Run WorkflowWorkflows 需要特性开关启用后才出现。此外还有大量由插件提供的数据库与 SaaS 数据源PostgreSQL、MySQL、MongoDB、Stripe 等这些插件定义在 plugins/packages 目录下每个插件包通过operations.json/manifest.json声明其查询能力。配置查询GUI 模式与 SQL 模式选中数据源后根据数据源类型的不同可以选择两种配置方式GUI 模式低代码只需选择要操作的Table name和Operations操作类型无需编写代码。例如 ToolJet Database 数据源的 GUI 模式实现位于 TooljetDatabase 查询编辑器它根据 operations.json 声明的能力渲染 ListRows、CreateRow、UpdateRows、DeleteRows、JoinTable、AggregateUI 等可视化操作界面。SQL 模式直接在编辑器中输入 SQL 查询语句完成所需操作。对于每个查询都可以点击 Query Editor 顶部的查询名称区域输入一个有意义的名称如fetchUsers。Query Editor 头部同时提供Run运行快捷键CtrlEnter/⌘↩、Preview预览快捷键CtrlShiftEnter/⌘⇧↩和 Abort中止查询运行超时后出现快捷键Ctrl./⌘.三个操作按钮实现细节见 QueryManagerHeader.jsx。此外对于 AI 特性可用的环境该头部还会出现Generate query按钮可将当前查询上下文带到 ToolJet AI 对话中生成查询受GENERATE_QUERY_SUPPORTED_KINDS列表约束。使用查询参数如果查询需要参数点击Parameters标签旁的 Add按钮添加即可。参数以{{parameters.参数名}}的形式在查询语句中引用。示例PostgreSQL 数据源中名为fetchUsers的查询从allUsers表按 id 取单条用户数据SELECT * FROM allUsers WHERE id {{parameters.id}}这里的{{parameters.id}}就是通过 Add按钮定义的参数。参数定义的核心机制位于 ParameterDetails.jsx每个参数包含名称name和默认值defaultValue而 QueryManager.jsx 在运行时通过resolveReferences将每个参数的默认值解析后注入 CodeHinter 上下文供查询语句中的{{parameters.xxx}}引用求值。参数名在应用内唯一若与已有参数重名会被拒绝添加见 QueryManagerBody.jsx 中的handleAddParameter校验逻辑。查询示例以 PostgreSQL 为例下面以 PostgreSQL 数据源和一张名为feature_requests的表为例演示完整的 CRUD 查询写法。读取数据创建名为getAllRequests的查询读取feature_requests表的全部记录SELECT * FROM feature_requests;执行后向下滚动即可在Preview区域看到返回的数据。将查询结果绑定到组件非常简单在 Table 组件的Data属性中直接引用查询名即可{{queries.getAllRequests.data}}这里的queries.getAllRequests.data是 ToolJet 的全局暴露对象——所有查询执行完毕后其结果都会挂载到queries.查询名.data上供任意组件属性或代码编辑器引用。源码层面查询结果通过setResolvedQuery写入运行时状态见 queryPanelSlice.js同时写入rawData原始未转换数据、metadata含请求/响应详情等字段。插入数据定义查询addNewRequest向feature_requests表插入新记录INSERT INTO feature_requests (id, title, description, votes, priority) VALUES (10, Toggle Component, We need a toggle component in future release., 0, 2);查询中可以直接插入组件值使用双大括号语法引用组件即可让查询随组件状态动态变化。例如把上面代码改为从两个文本输入框取值INSERT INTO feature_requests (id, title, description, votes, priority) VALUES (10, {{components.textinput1.value}}, {{components.textinput2.value}}, 0, 2);这种{{components.组件名.属性}}的引用方式对所有组件通用后续示例同样适用。更新数据要更新已有数据可在 WHERE 子句中引用组件值。例如建立查询updateRequest根据 Table 组件中选中行的 id 修改对应记录UPDATE feature_requests SET title Updated Feature Title, description Updated Feature Description, votes 15, priority 2 WHERE id {{components.table1.selectedRow.id}};components.table1.selectedRow是 Table 组件暴露的选中行对象selectedRow.id即当前选中记录的主键值。这样点选某行 → 运行更新查询的交互模式是 ToolJet 中典型的编辑场景。删除数据创建查询deleteRequest基于参数删除数据。例如删除票数少于指定阈值的记录DELETE FROM feature_requests WHERE votes {{parameters.minimumVotes}};minimumVotes是提前在 Parameters 中定义好的参数运行时由默认值或调用方传入的值解析。使用转换Transformations与事件EventsTransformations结果格式化查询取回数据后往往需要进一步加工过滤无关字段、转换数据类型等。ToolJet 允许在查询上启用Transformation功能使用JavaScript 或 Python处理查询结果。开启方式在查询编辑器的Transformation标签页打开开关然后选择 JavaScript 或 Python 语言编写转换代码。默认示例代码见 Transformation.jsx// write your code here // return value will be set as data and the original data will be available as rawData return data.filter(row row.amount 1000);# write your code here # return value will be set as data and the original data will be available as rawData [row for row in data if row[amount] 1000]转换代码中data是查询的原始结果代码的返回值会被设为该查询的最终数据原始数据始终可在rawData中获取。从源码看转换在查询结果返回后按enableTransformation开关执行runTransformation会调用用户代码并将返回值覆盖为finalData转换失败则走失败处理分支见 queryPanelSlice.js。值得注意runjs、runpy、workflows三类查询不会显示 Transformation 标签因为它们本身就是代码执行类查询。Event Handling查询与应用联动将查询与应用事件关联可实现动态交互。例如在updateRequest查询上配置事件当该查询成功后自动运行getAllRequests这样应用就能立刻拉取并展示更新后的数据无需用户手动再点一次刷新。事件系统定义在 constants.js查询事件包含两类onDataQuerySuccessQuery Success查询成功时触发onDataQueryFailureQuery Failure查询失败时触发。每个事件可绑定动作运行其他查询、显示告警、控制组件、切换页面等事件处理器渲染在 Query Editor 的 Events 区域见 QueryManagerBody.jsx 中的renderEventManager并在查询执行结果确定后通过onEvent(onDataQuerySuccess, ...)/ 失败分支触发。高级设置与调试Preview 与 RunPreview运行查询但只把结果显示在面板底部的Preview区域用于先验证再正式使用。预览结果支持JSON与Raw两种查看格式对象类型结果自动切换到 JSON 树视图其他类型显示原始文本实现见 Preview.jsxRun真正在应用内执行该查询执行结果将写入queries.查询名.data并触发后续事件。Preview 与 Run 在源码层面走同一套查询执行流程previewQuery与runQuery共用runQueryInternal等核心逻辑差别仅在于 Preview 不触发事件、只更新面板内预览数据。配置设置Settings 标签页Query Editor 的Settings标签页提供以下运行时行为配置对应 constants.js 中定义的customTogglesUI 实现在 QueryManagerBody.jsx 的renderQueryOptions设置项作用底层选项键Run this query on application load应用加载时是否自动执行该查询runOnPageLoadRun this query on dependency change当查询依赖的组件值/查询结果变化时是否自动重新执行runOnDependencyChangeRequest confirmation before running query执行前弹出确认框防止误操作造成数据变更可自定义确认文案requestConfirmation/confirmationMessageShow notification on success成功后显示通知提示可自定义通知消息内容与显示时长showSuccessNotification/successMessage/notificationDuration其中Run this query on application load在 dataQuerySlice.js 中被用于应用加载阶段的查询调度Show notification on success在 queryPanelSlice.js 中实现为toast.success通知时长由notificationDuration * 1000计算未配置时默认 5000msRequest confirmation在 queryPanelSlice.js 中实现确认消息可动态解析组件值且同一查询的确认请求不会重复入队。此外Settings 中还包括均在 QueryManagerBody.jsx 中实现Timeout (ms)查询超时时间可用表达式动态设置Disable query / Disable message通过表达式如{{components.toggleswitch1.value}}动态禁用查询并可自定义禁用时提示的消息Events上节所述的查询成功/失败事件配置对 REST API 查询还有Retry on network errors选项默认情况下 ToolJet 会重试最多 3 次见 constants.js。切换数据源对于已创建的查询可在 Source 区域直接切换到同类型相同kind的其他数据源无需重写查询语句实现见renderChangeDataSource全局作用域的数据源还支持Edit datasource快捷入口。若查询引用的数据源缺失如 Git 同步后数据源未拉取面板会给出is_dummy警告提示用户从 Git 拉取解决。小结本文完整梳理了 ToolJet Query Panel 的使用链路创建查询 按钮 / 数据源选择→ 双模式配置GUI 低代码 / SQL→ 参数化与组件值注入{{parameters.*}}、{{components.*}}→ 结果预览与绑定{{queries.*.data}}→ 转换与事件JavaScript/Python 转换、Success/Failure 事件→ 高级设置加载执行、确认、通知、超时、禁用。相关源码均可在本仓库 frontend/src/AppBuilder/QueryManager 与 frontend/src/AppBuilder/QueryPanel 中继续深入阅读。【免费下载链接】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 查询面板完全指南：在 App Builder 中创建与管理数据查询
ToolJet 查询面板完全指南在 App Builder 中创建与管理数据查询【免费下载链接】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 应用构建器App Builder底部的Query Panel查询面板展开讲解如何基于已连接的数据源创建查询、使用 GUI/SQL 两种模式配置查询、通过参数与组件值实现动态查询、将查询结果绑定到组件以及利用转换Transformations、事件Events和高级设置完成从数据获取到应用联动闭环的完整流程。读完本文你将掌握在 ToolJet 中构建查询 → 转换 → 事件 → 组件绑定全链路的实战能力。Query Panel 的界面构成Query Panel 位于 App Builder 底部是与已连接数据源交互的集中入口既可以发起 API 请求、查询数据库也可以使用 JavaScript 和 Python 对数据做转换或操作。它由左右两个区域组成Query Manager查询管理器位于左侧以列表形式展示当前应用中已创建的全部查询Query Editor查询编辑器位于右侧用于配置当前选中的查询。在源码层面两者分别对应 QueryPanel.jsx负责面板整体的展开/折叠与拖拽高度和 QueryManager.jsx负责选中查询的渲染与数据源解析。Query Manager 内部又按Setup / Transformation / Settings三个标签页组织编辑区对应实现见 QueryManagerHeader.jsx 中的tabs定义其中 Transformation 标签对runpy、runjs、workflows三类查询自动隐藏因为它们本身就是代码查询无需再转换。创建新查询在 Query Panel 中点击按钮会弹出菜单列出当前工作区可用的数据源若需要新的数据源可点击菜单中的 Add new Data Source进入数据源管理页面添加。随后选择要操作的数据源即可开始配置。从源码结构看内置的静态数据源定义在 constants.js包括 REST API、Run JavaScript code、Run Python code、ToolJet Database、Run WorkflowWorkflows 需要特性开关启用后才出现。此外还有大量由插件提供的数据库与 SaaS 数据源PostgreSQL、MySQL、MongoDB、Stripe 等这些插件定义在 plugins/packages 目录下每个插件包通过operations.json/manifest.json声明其查询能力。配置查询GUI 模式与 SQL 模式选中数据源后根据数据源类型的不同可以选择两种配置方式GUI 模式低代码只需选择要操作的Table name和Operations操作类型无需编写代码。例如 ToolJet Database 数据源的 GUI 模式实现位于 TooljetDatabase 查询编辑器它根据 operations.json 声明的能力渲染 ListRows、CreateRow、UpdateRows、DeleteRows、JoinTable、AggregateUI 等可视化操作界面。SQL 模式直接在编辑器中输入 SQL 查询语句完成所需操作。对于每个查询都可以点击 Query Editor 顶部的查询名称区域输入一个有意义的名称如fetchUsers。Query Editor 头部同时提供Run运行快捷键CtrlEnter/⌘↩、Preview预览快捷键CtrlShiftEnter/⌘⇧↩和 Abort中止查询运行超时后出现快捷键Ctrl./⌘.三个操作按钮实现细节见 QueryManagerHeader.jsx。此外对于 AI 特性可用的环境该头部还会出现Generate query按钮可将当前查询上下文带到 ToolJet AI 对话中生成查询受GENERATE_QUERY_SUPPORTED_KINDS列表约束。使用查询参数如果查询需要参数点击Parameters标签旁的 Add按钮添加即可。参数以{{parameters.参数名}}的形式在查询语句中引用。示例PostgreSQL 数据源中名为fetchUsers的查询从allUsers表按 id 取单条用户数据SELECT * FROM allUsers WHERE id {{parameters.id}}这里的{{parameters.id}}就是通过 Add按钮定义的参数。参数定义的核心机制位于 ParameterDetails.jsx每个参数包含名称name和默认值defaultValue而 QueryManager.jsx 在运行时通过resolveReferences将每个参数的默认值解析后注入 CodeHinter 上下文供查询语句中的{{parameters.xxx}}引用求值。参数名在应用内唯一若与已有参数重名会被拒绝添加见 QueryManagerBody.jsx 中的handleAddParameter校验逻辑。查询示例以 PostgreSQL 为例下面以 PostgreSQL 数据源和一张名为feature_requests的表为例演示完整的 CRUD 查询写法。读取数据创建名为getAllRequests的查询读取feature_requests表的全部记录SELECT * FROM feature_requests;执行后向下滚动即可在Preview区域看到返回的数据。将查询结果绑定到组件非常简单在 Table 组件的Data属性中直接引用查询名即可{{queries.getAllRequests.data}}这里的queries.getAllRequests.data是 ToolJet 的全局暴露对象——所有查询执行完毕后其结果都会挂载到queries.查询名.data上供任意组件属性或代码编辑器引用。源码层面查询结果通过setResolvedQuery写入运行时状态见 queryPanelSlice.js同时写入rawData原始未转换数据、metadata含请求/响应详情等字段。插入数据定义查询addNewRequest向feature_requests表插入新记录INSERT INTO feature_requests (id, title, description, votes, priority) VALUES (10, Toggle Component, We need a toggle component in future release., 0, 2);查询中可以直接插入组件值使用双大括号语法引用组件即可让查询随组件状态动态变化。例如把上面代码改为从两个文本输入框取值INSERT INTO feature_requests (id, title, description, votes, priority) VALUES (10, {{components.textinput1.value}}, {{components.textinput2.value}}, 0, 2);这种{{components.组件名.属性}}的引用方式对所有组件通用后续示例同样适用。更新数据要更新已有数据可在 WHERE 子句中引用组件值。例如建立查询updateRequest根据 Table 组件中选中行的 id 修改对应记录UPDATE feature_requests SET title Updated Feature Title, description Updated Feature Description, votes 15, priority 2 WHERE id {{components.table1.selectedRow.id}};components.table1.selectedRow是 Table 组件暴露的选中行对象selectedRow.id即当前选中记录的主键值。这样点选某行 → 运行更新查询的交互模式是 ToolJet 中典型的编辑场景。删除数据创建查询deleteRequest基于参数删除数据。例如删除票数少于指定阈值的记录DELETE FROM feature_requests WHERE votes {{parameters.minimumVotes}};minimumVotes是提前在 Parameters 中定义好的参数运行时由默认值或调用方传入的值解析。使用转换Transformations与事件EventsTransformations结果格式化查询取回数据后往往需要进一步加工过滤无关字段、转换数据类型等。ToolJet 允许在查询上启用Transformation功能使用JavaScript 或 Python处理查询结果。开启方式在查询编辑器的Transformation标签页打开开关然后选择 JavaScript 或 Python 语言编写转换代码。默认示例代码见 Transformation.jsx// write your code here // return value will be set as data and the original data will be available as rawData return data.filter(row row.amount 1000);# write your code here # return value will be set as data and the original data will be available as rawData [row for row in data if row[amount] 1000]转换代码中data是查询的原始结果代码的返回值会被设为该查询的最终数据原始数据始终可在rawData中获取。从源码看转换在查询结果返回后按enableTransformation开关执行runTransformation会调用用户代码并将返回值覆盖为finalData转换失败则走失败处理分支见 queryPanelSlice.js。值得注意runjs、runpy、workflows三类查询不会显示 Transformation 标签因为它们本身就是代码执行类查询。Event Handling查询与应用联动将查询与应用事件关联可实现动态交互。例如在updateRequest查询上配置事件当该查询成功后自动运行getAllRequests这样应用就能立刻拉取并展示更新后的数据无需用户手动再点一次刷新。事件系统定义在 constants.js查询事件包含两类onDataQuerySuccessQuery Success查询成功时触发onDataQueryFailureQuery Failure查询失败时触发。每个事件可绑定动作运行其他查询、显示告警、控制组件、切换页面等事件处理器渲染在 Query Editor 的 Events 区域见 QueryManagerBody.jsx 中的renderEventManager并在查询执行结果确定后通过onEvent(onDataQuerySuccess, ...)/ 失败分支触发。高级设置与调试Preview 与 RunPreview运行查询但只把结果显示在面板底部的Preview区域用于先验证再正式使用。预览结果支持JSON与Raw两种查看格式对象类型结果自动切换到 JSON 树视图其他类型显示原始文本实现见 Preview.jsxRun真正在应用内执行该查询执行结果将写入queries.查询名.data并触发后续事件。Preview 与 Run 在源码层面走同一套查询执行流程previewQuery与runQuery共用runQueryInternal等核心逻辑差别仅在于 Preview 不触发事件、只更新面板内预览数据。配置设置Settings 标签页Query Editor 的Settings标签页提供以下运行时行为配置对应 constants.js 中定义的customTogglesUI 实现在 QueryManagerBody.jsx 的renderQueryOptions设置项作用底层选项键Run this query on application load应用加载时是否自动执行该查询runOnPageLoadRun this query on dependency change当查询依赖的组件值/查询结果变化时是否自动重新执行runOnDependencyChangeRequest confirmation before running query执行前弹出确认框防止误操作造成数据变更可自定义确认文案requestConfirmation/confirmationMessageShow notification on success成功后显示通知提示可自定义通知消息内容与显示时长showSuccessNotification/successMessage/notificationDuration其中Run this query on application load在 dataQuerySlice.js 中被用于应用加载阶段的查询调度Show notification on success在 queryPanelSlice.js 中实现为toast.success通知时长由notificationDuration * 1000计算未配置时默认 5000msRequest confirmation在 queryPanelSlice.js 中实现确认消息可动态解析组件值且同一查询的确认请求不会重复入队。此外Settings 中还包括均在 QueryManagerBody.jsx 中实现Timeout (ms)查询超时时间可用表达式动态设置Disable query / Disable message通过表达式如{{components.toggleswitch1.value}}动态禁用查询并可自定义禁用时提示的消息Events上节所述的查询成功/失败事件配置对 REST API 查询还有Retry on network errors选项默认情况下 ToolJet 会重试最多 3 次见 constants.js。切换数据源对于已创建的查询可在 Source 区域直接切换到同类型相同kind的其他数据源无需重写查询语句实现见renderChangeDataSource全局作用域的数据源还支持Edit datasource快捷入口。若查询引用的数据源缺失如 Git 同步后数据源未拉取面板会给出is_dummy警告提示用户从 Git 拉取解决。小结本文完整梳理了 ToolJet Query Panel 的使用链路创建查询 按钮 / 数据源选择→ 双模式配置GUI 低代码 / SQL→ 参数化与组件值注入{{parameters.*}}、{{components.*}}→ 结果预览与绑定{{queries.*.data}}→ 转换与事件JavaScript/Python 转换、Success/Failure 事件→ 高级设置加载执行、确认、通知、超时、禁用。相关源码均可在本仓库 frontend/src/AppBuilder/QueryManager 与 frontend/src/AppBuilder/QueryPanel 中继续深入阅读。【免费下载链接】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），仅供参考