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 教程《Adding a widget》为主线系统讲解在 ToolJet 应用编辑器中添加组件的完整流程从右侧Widget manager组件管理器搜索与拖放组件、画布上的缩放与重定位、向 Modal 中添加组件、调整表格列宽再到通过检查器面板配置组件属性最终把 PostgreSQL 查询结果通过{{queries.postgresql1.data}}双花括号表达式绑定到表格组件。读完本篇你将掌握 ToolJet 低代码编辑器的核心交互方式与数据绑定原理能够独立完成连数据源 → 建查询 → 拖组件 → 绑数据的完整应用搭建链路。前置条件本教程所处的上下文本教程是 ToolJet 入门系列位于 docs/docs/tutorial 目录中的一环。在开始添加组件之前假设你已经完成了以下前置步骤创建一个 ToolJet 应用并进入应用编辑器连接一个数据源本教程以PostgreSQL为例创建并运行一个名为fetch customers或示例中的postgresql1的查询用于返回客户数据。本篇文章的所有操作都发生在 ToolJet 编辑器的画布Canvas与右侧边栏中无需编写任何前后端代码。打开组件管理器添加组件的入口要添加组件首先导航到右侧边栏的Widget manager组件管理器。它会列出所有可以添加到应用中的内置组件并且提供了搜索功能帮助你在组件数量较多时快速定位目标组件。从仓库源码看组件管理器由 ComponentsManagerTab.jsx 实现。它从componentTypes组件类型列表中动态生成组件清单并使用Fuse.js模糊搜索new Fuse(searchList, ...)防抖 125ms来支持搜索框的即时过滤也就是说即便你不记得组件的完整名称输入部分关键词也能匹配到目标组件。组件管理器中的组件按分类组织分类定义见 sectionConfig.js分类包含的组件Commonly used常用Table、Button、Text、TextInput、DatetimePickerV2、FormButtons按钮Button、ButtonGroupV2、PopoverMenu、FileButtonData数据Table、Chart、KeyValuePairLayouts布局Form、ModalV2、Container、Accordion、Tabs、Listview、Kanban、CalendarText inputs文本输入TextInput、TextArea、EmailInput、PasswordInput、RichTextEditorNumber inputs数字输入NumberInput、PhoneInput、CurrencyInput、RangeSliderV2、StarRatingSelect inputs选择输入TagsInput、DropdownV2、MultiselectV2、ToggleSwitchV2、RadioButtonV2、Checkbox、TreeSelect、CascaderDate and time inputs日期时间输入DaterangePicker、DatePickerV2、TimePicker、DatetimePickerV2Navigation导航Navigation、Link、Pagination、StepsMedia媒体Icon、Image、SvgImage、PDF、Map、AudioRecorder、CameraPresentation展示Text、Tags、CircularProgressBar、ProgressBar、Timeline、Divider、VerticalDivider、Spinner、Statistics、Timer、JSONExplorerCustom自定义CustomComponent、Html、IFrameMiscellaneous其他FilePicker、CodeEditor、ColorPicker、BoundedBox、QrScanner、Chat、ReorderableList、JSONEditorLegacy旧版组件Modal、Datepicker、RadioButton、ToggleSwitch、DropDown、Multiselect、RangeSlider、ButtonGroup组件的完整注册表位于 widgetConfig.js每一个组件的配置名称、属性、校验规则、默认值都由对应的配置文件声明例如表格组件的配置见 table.js。搜索时可以直接输入组件名比如输入table即可快速筛选出 Table 组件。拖放组件到画布以本教程的场景为例我们需要在应用中添加一个Table表格组件用来展示上一步查询得到的客户数据。操作步骤在右侧 Widget manager 中找到Table组件可通过搜索框输入Table快速定位按住鼠标左键将组件拖拽到左侧画布Canvas上松开鼠标组件即被放置到画布中。ToolJet 的组件管理器使用 HTML5 拖放机制配合自定义的DragLayer见 DragLayer渲染拖拽时的视觉反馈。拖放完成后组件会以网格化布局出现在画布上自动吸附到网格线方便后续对齐与排版。调整组件大小与位置组件放入画布后可以自由缩放与重新定位具体方式如下选中组件单击画布上的组件即可将其选中组件四周会出现选中边框与操作手柄调整大小拖拽组件右下角或边缘的缩放手柄即可横向、纵向或整体改变组件的宽高重新定位直接拖拽组件本体将其移动到画布中的任意网格位置。从实现角度看画布上组件的大小与位置调整基于网格系统组件尺寸、坐标以网格单元为单位记录相关逻辑集中在 AppCanvas/Grid 目录如 Grid.jsx确保组件在桌面与移动端布局切换时依然保持合理排布。向 Modal 中添加组件除了直接放在画布上组件还可以添加到Modal模态框内部。ToolJet 中 Modal 本身也是一个组件其内容区可以容纳其他组件。操作步骤先添加 Modal 组件从 Widget manager 中将Modal组件拖放到画布上。注意在触发Show modal动作之前必须先确保画布中已存在一个 Modal 组件触发 Show modal 动作通过某个组件例如 Button的事件处理器触发Show modal action详见 Actions 动作文档 中的可用动作列表让 Modal 在预览/运行时显示出来点击画布上的 Modal 区域当 Modal 处于打开/可编辑状态时点击其内容区域使右侧边栏切换为对应的编辑上下文从 Widget manager 拖放组件到 Modal 内部此时右侧 Widget manager 依然可用将需要的组件直接拖入 Modal 内容区即可。在仓库中Modal 相关组件有新旧两套实现Modal旧版位于 Modal.jsx与ModalV2新版位于 ModalV2 目录。Modal 组件配置中同样声明了Show modal/Close modal等动作可在 WidgetManager 的 modal 配置 中查看事件处理器通过 Inspector 的 EventManager 挂接这些动作。推荐在新项目中使用ModalV2。调整表格列宽表格组件放置完成后如果列内容较多可以通过列的缩放手柄resize handle直接调整列宽将鼠标悬停在表头两列之间的分隔线上当光标变为可拖拽的缩放指针时按住并左右拖动即可调整该列宽度松开鼠标完成调整列宽会立即生效并持久化保存到组件定义中。通过检查器面板修改组件属性单击画布上的组件右侧边栏会切换为Inspector检查器面板。检查器面板集中管理该组件的全部可配置项包括Properties属性组件的数据与功能配置例如表格的 Title、Data数据源、Columns列定义、Loading state 等Styles样式外观配置如背景色、边框、圆角、内边距、CSS class 等Events事件组件事件与动作绑定General通用如 Tooltip悬浮提示等通用设置。在检查器面板中你可以直接修改属性值以表格组件为例可以配置要展示的列在Columns列配置中管理列集合列的显示顺序可以通过拖拽列名旁边的拖拽图标来调整每个列还可以独立配置列标题、数据类型、宽度、是否可排序等。从源码看检查器面板对每个属性的渲染基于组件配置中声明的type字段如string、code、toggle、dropdownMenu、array等并配套对应的校验规则validation.schema。例如表格的data属性被声明为type: code其校验 schema 为对象数组{ type: array, element: { type: object } }默认值为[{ id: 1, name: Sarah, email: sarahmail.com }]详见 table.js。这意味着数据字段接受 JSON 数组或任意可解析为对象数组的表达式。将查询数据绑定到组件双花括号表达式现在进入本教程最核心的环节把fetch customers查询返回的data对象连接到表格组件上。绑定步骤单击画布上的表格组件打开右侧检查器面板找到Data数据属性此时它的值是一个空数组[]在数据字段中输入单行 JavaScript 表达式并用双花括号{{ }}包裹{{queries.postgresql1.data}}输入时编辑器会弹出变量建议下拉列表自动补全帮助你选择正确的变量路径由于查询在前面步骤中已经运行过数据会立即渲染到表格中无需重新发布应用。双花括号绑定语法解析ToolJet 中几乎每个属性字段都支持双花括号{{ }}内的单行 JavaScript 表达式这是一种声明式数据绑定机制{{queries.postgresql1.data}}引用名为postgresql1的查询的返回数据查询结果对象中的data数组支持引用组件变量如{{components.table1.selectedRow}}、{{components.textinput1.value}}支持引用全局变量、页面变量、环境变量以及运行任意 JS 表达式的结果。从源码实现看该机制由 CodeBuilder 负责解析编辑器会识别以{{开头、以}}结尾的表达式见 CodeBuilder/utils.js并基于当前应用状态组件值、查询结果、全局变量等生成自动补全建议suggestions在输入时以下拉列表形式呈现。自动补全的具体过滤逻辑见 autocompleteExtensionConfig.js它会在输入满足{{...}}包裹条件时收集组件与查询相关的提示如queries.postgresql1.data、components.table1等并实时展示这正是文档中提到的输入时代码会自动弹出变量建议下拉的底层实现。查询对象queries的层级结构为queries.queryName.field其中引用路径说明queries.queryName.data查询成功返回的数据queries.queryName.isLoading查询是否正在执行布尔值queries.queryName.rawData查询返回的原始响应数据queries.queryName.error查询执行失败时的错误信息在绑定表格数据时务必确认postgresql1查询已成功运行且返回的是对象数组每行一个对象、对象键对应列名这样表格会自动按对象的键生成列。小结完整的建表链路至此本教程完成了 ToolJet 中最经典的一条应用搭建链路连接数据源创建 PostgreSQL 数据源连接创建并运行查询在查询面板中编写fetch customers/postgresql1查询并运行验证返回数据拖放组件从右侧 Widget manager 将 Table 组件拖入画布布局调整在画布上调整组件大小与位置必要时放入 Modal 并调整表格列宽配置属性通过检查器面板修改组件属性、管理列顺序绑定数据在 Data 属性中输入{{queries.postgresql1.data}}将查询结果绑定到表格。表格组件的更多高级用法——如服务端分页server-side pagination、行操作按钮actions、数据编辑editing data、动态列等——可继续查阅 Table 表格组件参考文档该文档详细覆盖了表格组件的全部属性、事件与样式配置如果你需要回顾查询创建步骤可回到 教程目录 查看前置章节。【免费下载链接】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），仅供参考