ToolJet 入门教程：创建你的第一个应用（从仪表盘到可视化应用编辑器）

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导读本文是 ToolJet 官方教程version-3.0.0-LTS的第一课完整讲解如何从零创建一个新应用从仪表盘点击Create new application按钮到进入可视化应用编辑器并创建第一个应用版本。文章将同时梳理 ToolJet 应用的三大核心组成——Widgets组件、Data sources数据源与 Queries查询并串联后续教程中连接 PostgreSQL → 编写查询 → 用表格组件展示数据的完整实战链路让你在读完本文后能够独立搭建出第一个可交互的内部工具应用。:::info ToolJet 中的 App应用将 widgets组件、data sources数据源和 queries查询三者绑定在一起共同构成一个完整的功能页面。 :::一、创建新应用1.1 从仪表盘点击创建登录 ToolJet 后你会进入应用仪表盘dashboard该页面展示了当前工作区workspace下已有的应用列表。要创建新应用点击仪表盘上的Create new application按钮即可从源码结构看该按钮由 HomePage.jsx 中的create-new-app-button组件实现点击后按钮进入btn-loading状态并调用创建接口接口文案取自header.createNewApplication国际化字段见 HomePage.jsx。1.2 进入可视化应用编辑器应用创建成功后你会被重定向到可视化应用编辑器visual app editor。编辑器采用所见即所得的画布式布局左侧为数据源/组件管理器中央是画布canvas右侧为组件库与属性检查面板inspect panel底部则是查询编辑器query editor。首次进入时系统会提示你创建应用的第一个版本version之后才能开始构建。应用名称随时可以修改点击应用构建器app builder左上角的应用名即可重命名。二、理解应用的三大核心组成一个 ToolJet 应用由三类元素构成它们互相配合才能完成取数—处理—展示—交互的完整闭环组成作用关联教程Widgets组件UI 组件如表格table、按钮button、下拉框dropdownadding-widgetData sources数据源ToolJet 可连接的数据库、API 与外部服务用于获取和修改数据adding-a-datasourceQueries查询用于访问已连接数据源的操作是驱动组件数据的发动机building-queries本教程将引导你构建一个简单应用从 PostgreSQL 数据库获取客户信息并用 table 组件展示这些数据。下面按顺序完成这三大环节。三、第一步添加数据源PostgreSQL3.1 打开数据源管理器数据源管理器datasource manager位于应用构建器的左侧边栏。点击Add datasource按钮添加新的数据源。3.2 选择数据源类型并填写凭据系统会弹出数据源选择窗口本文选择PostgreSQL随后填写数据库连接凭据。:::tip 数据源是应用级app level创建的而不是工作区级workspace level——也就是说同一个数据源配置只对当前应用可见其他应用需要各自创建。 :::填写凭据时有几个要点标记为encrypted的字段如密码会在保存前进行加密再写入 ToolJet 的数据库不会明文存储数据源名称在应用内必须唯一点击提示框顶部的数据源名称即可重命名点击Test Connection按钮验证连接是否成功验证可能需要一两分钟验证通过后保存数据源。:::tip 如果你使用的是 ToolJet Cloud且数据源不在公网可直接访问请在创建数据源时按界面提示将 ToolJet 的 IP 地址加入白名单。 :::四、第二步构建查询4.1 在查询编辑器中创建查询查询编辑器Query Editor位于页面底部。按以下步骤为刚连接的 PostgreSQL 数据源创建第一条查询点击查询编辑器中的图标新建查询选择上一步创建的 PostgreSQL 数据源在查询区域粘贴下面的 SQL 并选择SQL modeSELECT * FROM customers;:::tip 点击查询编辑器上的放大图标可以展开编辑面板获得更大的编写空间。 :::4.2 预览查询结果点击preview按钮可以预览查询结果。预览查询不会改变应用的状态你可以放心反复调试 SQL。4.3 高级选项Advanced options查询编辑器中还提供以下高级选项用于控制查询的触发时机与用户反馈选项说明Run query on page load启用后查询会在应用首次加载时自动运行。查询可以有多个触发源同一个查询后续仍可通过按钮点击事件、表格行选中事件或其他事件再次触发Request confirmation before running query启用后查询运行前会弹出确认提示框要求用户确认后再执行适合删除、更新等敏感操作Show notification on success启用后查询成功完成时会显示自定义提示消息并可设置通知的展示时长五、第三步添加组件并绑定数据5.1 拖拽组件到画布导航到右侧边栏的Widget manager组件管理器它会列出内置组件清单可用搜索框快速定位。将table组件拖拽到画布即可添加组件添加后可以自由调整大小与位置。5.2 配置组件属性点击画布中的组件右侧会打开属性检查面板inspect panel在这里修改组件的各项属性。以表格为例列名的显示顺序可以通过拖动列名旁的图标来调整。5.3 将查询数据绑定到组件现在把fetch customers查询返回的data对象绑定到表格上点击 table 组件打开右侧检查器此时其data属性的值是一个空数组[]与编辑器中的绝大多数字段一样data字段支持在双大括号内输入单行 JavaScript 代码输入时编辑器会以下拉框形式给出变量建议选择postgresql查询的data对象输入{{queries.postgresql1.data}}由于上一步已经运行过查询保存绑定后数据会立即显示在表格中无需重新手动触发。至此你已经完成了连接 PostgreSQL → 编写查询 → 用表格组件展示数据的完整链路。:::tip 关于表格组件的更多定制能力如服务端分页、行操作、行内编辑可阅读 widget reference 中 table 组件的完整文档 并参考本目录下的 widget 参考章节。 :::六、版本管理为你的应用创建第一个版本构建应用的过程与版本管理紧密相关。版本管理器App Version Manager位于编辑器右上角工具栏它显示当前正在编辑的版本并允许你在不同版本之间切换。创建版本点击版本下拉框底部的Create new version按钮在弹出的模态框中输入Version Name并从Create version from下拉框中选择作为新版本基础的原版本不选时 ToolJet 会自动选择最近创建的版本最后点击Create new Version确认。重命名/删除版本在版本管理器中找到目标版本点击名称旁的编辑或删除图标即可操作。发布版本选中要发布的版本后点击右上角Release按钮在确认对话框中确认即可将当前版本发布到生产环境。:::caution如果应用在未发布状态下被设为 Public其行为等同于预览应用通过 Public 应用 URL 访问时加载的版本就是当前应用构建器中正在加载的版本。为避免把未完成的应用意外发布ToolJet 会提示你为Released version的编辑操作新建一个版本在创建新版本之前对已发布版本的编辑会被阻止。 :::版本管理相关功能的前端实现集中在 AppBuilder/Header/VersionManager 目录下如 VersionManagerDropdown.jsx、CreateVersionModal.jsx有兴趣的读者可以进一步阅读源码了解其交互细节。七、总结与后续学习路径本文完成了 ToolJet 应用创建的完整闭环从仪表盘创建应用、进入可视化编辑器、添加 PostgreSQL 数据源、构建 SQL 查询、将查询数据绑定到表格组件并介绍了版本管理的基本操作。创建应用只是起点接下来的教程将带你深入每一个环节添加组件adding-widget组件拖拽、缩放、属性配置与数据绑定的更多细节添加数据源adding-a-datasource支持的数据源类型与连接配置构建查询building-queries查询编辑器的高级用法与调试版本管理与发布versioning-and-release多版本协作与生产发布流程分享与部署sharing-and-deploying应用的分享方式与部署配置【免费下载链接】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），仅供参考