ToolJet 教程：使用 Widget 管理器添加、配置并绑定数据到组件

ToolJet 教程使用 Widget 管理器添加、配置并绑定数据到组件【免费下载链接】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 可视化应用构建教程系列中的一环聚焦于如何在右侧的Widget 管理器中查找、拖放、调整与配置内置组件Widget并将上一步查询Query返回的数据通过双花括号表达式绑定到 Table 表格组件上。读完本篇你将掌握 ToolJet 画布上的组件拖放、尺寸调整、Modal 内嵌组件、列宽调整、属性检查器Inspector操作以及{{queries.xxx.data}}动态数据绑定的完整实战流程。前置上下文本教程在整体流程中的位置本指南属于 ToolJet 2.50.0-LTS 版本教程系列中的一环。在开始添加 Widget 之前建议你先完成系列中的前置步骤以便文中涉及的fetch customers查询与 PostgreSQL 数据源真实可用创建应用ToolJet 应用将 Widget、数据源Data source与查询Query三者绑定在一起。添加数据源连接 PostgreSQL 数据库。构建查询创建SELECT * FROM customers;查询并运行。在 ToolJet 中应用由三部分组成Widgets表格、按钮、下拉框等 UI 组件、Data sources可连接的数据库、API 与外部服务以及Queries用于访问已连接数据源。本篇文章要完成的正是把查询结果可视化地呈现在界面上这一关键环节。打开 Widget 管理器要添加组件请导航到应用编辑器右侧边栏的Widget manager组件管理器。它会列出所有可添加到应用的内置组件例如表格Table、按钮Button、下拉框Dropdown等。当组件数量较多时可以使用面板顶部的搜索功能快速定位你想要的组件——输入关键字即可过滤组件列表无需在长列表中手动翻找。从源码结构看该面板在仓库中的实现位于 ComponentsManagerTab.jsx配套的 sectionConfig.js 负责定义组件的分区与分类展示逻辑而组件本身的类型定义集中在 WidgetManager/componentTypes.js每个组件的元信息默认属性、事件、校验规则等则存放在 WidgetManager/configs 与 WidgetManager/widgets 目录中。拖放 Widget 到画布接下来我们把一个table表格组件添加到应用中用来展示上一步查询获取到的客户数据。操作方式非常简单从 Widget 管理器中将目标组件直接拖拽Drag and Drop到中间的画布Canvas区域松开鼠标后组件即被放置到画布上。画布采用的是基于网格Grid的响应式布局组件被放置后会自动吸附到网格单元上方便对齐与排版。调整 Widget 的大小与位置组件放入画布后可以随时进行缩放Resize与重新定位Reposition调整大小选中组件拖动其边缘或角落的调整手柄resize handle即可改变宽高。重新定位按住组件主体拖动即可在画布内移动到任意位置。在 ToolJet 中画布上的组件坐标与尺寸由网格系统统一管理相关实现可参考 Grid.jsx 及其工具函数 gridUtils.js其中定义了组件在画布上的行列定位与尺寸换算逻辑。向 Modal 中添加 Widget有时我们希望把表单或详情内容放在弹窗Modal里而不是直接铺在页面上。要向 Modal 添加组件需要借助Show modal action显示弹窗动作。:::info 在触发Show modal action之前必须先向画布添加一个modal弹窗组件。 :::完整步骤如下从 Widget 管理器将一个modal widget添加到画布上触发Show modal action该动作属于 ToolJet 内置的可用动作之一详细动作列表见 actions 教程其中包含 Show alert、Run query、Open webpage、Goto app、Show modal、Close modal、Copy to clipboard、Set localStorage、Generate file 等点击画布空白区域让右侧边栏切换回Widget manager再次从右侧的 Widget 管理器中拖放组件到弹窗内部即可。这里有一个容易混淆的细节触发Show modal动作的入口不止一处——为组件事件绑定处理器时可在组件检查器Inspector中点击Add handler为查询事件绑定处理器时则需选中查询、切换到advanced标签页后点击Add handler。两者最终都能调用到 Show modal 这类内置动作。调整表格列宽表格组件放置好后你可能需要调整各列的显示宽度。ToolJet 支持直接使用**列的调整手柄resize handle**来拖拽改变列宽这与常规表格编辑器的体验一致。修改 Widget 属性点击画布上的组件右侧边栏会打开**检查器Inspector**面板即属性面板。在这里可以修改组件的一系列属性Properties例如标题、数据、事件处理器等。Inspector 的实现位于 Inspector.jsx。针对 Table 组件我们可以配置其列来展示客户数据。其中列的显示顺序可以通过拖动列名旁边的拖拽图标来调整不需要手动编辑配置。将查询数据连接到 Widget现在进入本篇的核心环节把fetch customers查询返回的data对象绑定到表格组件上。点击表格组件在右侧打开 Inspector 面板找到data属性此时它的值是一个空数组[]在data字段中输入以下表达式{{queries.postgresql1.data}}关于这个表达式有几点需要理解双花括号语法与编辑器中的几乎所有字段一样data字段支持在双花括号内书写单行 JavaScript 代码ToolJet 会将其求值后作为属性值使用。这种机制让组件属性具备完全动态的能力——不仅限于查询数据任何可访问的变量、表达式都可以在此求值。变量提示在字段中输入代码时系统会以下拉列表的形式实时给出变量建议帮助你快速补全变量名避免手写拼错。查询结果即时呈现由于在前面的步骤中我们已经运行过该查询绑定完成后表格会立即显示出查询返回的数据无需重新运行查询。至此本教程已经完成了从连接 PostgreSQL 数据库 → 编写查询 → 添加表格组件 → 绑定查询数据并可视化展示的完整闭环。表格组件除了展示数据外还支持服务端分页、操作按钮、数据编辑等更丰富的自定义能力可进一步参考仓库中 widgets 目录 下的组件文档继续深入学习。小结通过本文你掌握了 ToolJet 应用编辑器中组件的完整操作链路操作关键要点添加组件从右侧Widget manager拖放至画布支持关键字搜索调整组件拖拽手柄缩放尺寸、拖动组件重新定位Modal 内嵌组件先添加 modal 组件再触发 Show modal action随后向弹窗内拖放调整表格列宽使用列头右侧的 resize handle 拖拽修改属性点击组件打开右侧 Inspector 面板可配置属性、调整列顺序数据绑定在属性字段中输入{{queries.查询名.data}}双花括号表达式自动获得变量提示下一步你可以继续学习教程系列中的 变换Transformations、调试器Debugger 或 分享与部署进一步打磨你的第一个 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），仅供参考