ToolJet 快速上手指南零代码构建员工通讯录应用Employee Directory完整实战【免费下载链接】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 官方 Quickstart Guidequickstart-guide.md的深度实战解读。ToolJet 是一个开源的低代码应用构建平台用于快速搭建内部工具、数据看板与业务应用本指南将带你从零开始创建一个可用的员工通讯录Employee Directory应用——它可以从内置数据库中读取员工记录、在表格中展示、通过自动生成的表单新增员工并在保存后自动刷新列表。读完本文你将掌握 ToolJet 的核心链路创建应用 → 建表 → 写查询 → 绑定数据 → 事件驱动 → 发布共享并了解这些操作背后对应的源码实现与配置原理。准备工作注册账号并了解 App-Builder首先需要一个 ToolJet 账号。登录后进入应用构建器App-Builder这是整个开发过程的主战场左侧是组件面板与页面导航中间是可视化画布底部是 Query Panel 查询面板右侧是当前选中组件的属性检查器。在 ToolJet 中组件Components负责界面呈现查询Queries负责与数据源交互事件Events负责把两者串联起来这三者正是本教程反复出现的核心概念。第 1 步创建你的第一个应用在 Dashboard仪表盘上点击Create new app创建新应用按钮将应用命名为Employee Directory员工通讯录从左侧组件面板中将Table表格组件拖拽到画布上可选再拖入 Text文本、Image图片等组件设计一个应用头部让界面更完整。此时画布上已经有一个空的 Table 组件。它还没有任何数据接下来我们为它准备数据来源。第 2 步在 ToolJet Database 中创建数据表ToolJet 内置了开箱即用的ToolJet Database——一个由平台托管的数据库无需任何额外设置即可在组织内安全使用并且自带类似电子表格的图形化管理界面。在仪表盘左侧边栏进入ToolJet Database然后创建一张新表命名为employees添加以下列firstname、lastname、email、phone、department、position、joining、status在表中录入几条示例员工数据作为占位内容便于后续验证查询结果。补充ToolJet Database 的底层原理自托管部署从源码结构看ToolJet Database 在自托管场景下由PostgREST提供支撑——PostgREST 是一个独立的 Web 服务器它把 PostgreSQL 数据库直接暴露为可查询的 RESTful API且只与 ToolJet 服务端通信无需对外公开。相关的环境变量定义在 tooljet-database.md 中PGRST_HOSTlocalhost:3001 PGRST_LOG_LEVELinfo PGRST_DB_PRE_CONFIGpostgrest.pre_config PGRST_SERVER_PORT3001 PGRST_DB_URIpostgres://TOOLJET_DB_USER:TOOLJET_DB_PASSTOOLJET_DB_HOST:5432/TOOLJET_DB PGRST_JWT_SECRET其中PGRST_DB_URI为必填项用于把数据库暴露为 REST APIPGRST_JWT_SECRET用于认证未指定时 PostgREST 会拒绝认证请求可用openssl rand -hex 32生成。另有几个实用上限参数TOOLJET_DB_BULK_UPLOAD_MAX_ROWS批量上传最大行数默认 1000和TOOLJET_DB_BULK_UPLOAD_MAX_CSV_FILE_SIZE_MBCSV 批量上传最大体积默认 5 MB。理解这一点有助于你在自托管时排查数据库相关的部署问题。第 3 步创建查询以拉取数据要让应用显示员工数据必须先通过查询Query从数据库取数。ToolJet 的 Query Panel 位于构建器底部左侧是 Query Manager查询管理器列出所有查询并支持按数据源过滤、按名称/类型/修改时间排序以及搜索右侧是 Query Editor查询编辑器。按照以下步骤创建查询点击查询面板中的Add添加按钮新建查询选择数据源ToolJet Database将查询重命名为getEmployeesTable name选择employeesOperation操作选择List rows列出所有行打开Run this query on application load?应用加载时运行此查询开关——这样每次应用启动都会自动执行该查询点击Run按钮立即取数验证返回结果。这里有两个 Query Editor 的实用细节值得记住详见 query-panel.mdPreview预览在不触发整个应用的前提下查看查询返回的数据支持 Raw 与 JSON 两种展示格式适合调试Custom Parameters自定义参数通过parameters.identifier语法在单个查询内传递变量例如把搜索关键字作为参数传给 List rows 的过滤条件。第 4 步将查询数据绑定到 UI现在把getEmployees查询的返回结果绑定到第 1 步放置的 Table 组件上点击画布上的 Table 组件打开右侧属性面板找到Data数据属性输入以下代码{{queries.getEmployees.data}}在 ToolJet 中{{ }}双花括号是表达式语法用于引用运行时对象。queries.getEmployees.data表示名为 getEmployees 的查询返回的数据。保存后Table 组件会自动根据数据结构生成对应列并填满查询结果。关于queries对象的更多信息如组件暴露变量components、全局变量等可查阅构建器左侧的 Inspector 面板与 Table 组件文档——文档中提到Table 组件会自动为传入的数据生成全部所需列并且支持加载一层嵌套数据如{ id, name, contact: { number, address } }中的contact对象。第 5 步创建写入数据的查询Table 组件自带一个(Add new row)添加新行按钮位于组件右下角。点击它会弹出自动生成的表单用于向表格新增数据。我们需要创建一个addEmployees查询并在用户点击表单的Save按钮时执行它在查询面板点击Add选择数据源ToolJet DatabaseTable name选择employeesOperation选择Create row创建行将查询重命名为addEmployees点击Add Column添加所需列为email、firstname等列键输入如下格式的代码{{components.table1.newRows[0].email}} {{components.table1.newRows[0].firstname}} ...其余列键按相同格式编写例如{{components.table1.newRows[0].lastname}}、{{components.table1.newRows[0].department}}。补充newRows变量的源码实现components.table1.newRows是 Table 组件暴露的运行时变量。在 TableExposedVariables.jsx 中可以看到它的暴露逻辑useEffect(() { if (addNewRowDetails) { setExposedVariables({ newRows: [...addNewRowDetails.values()], }); } }, [addNewRowDetails, setExposedVariables]);即当用户在添加新行弹窗中输入数据时这些待提交的行会以数组形式存入newRows每个元素是一个包含各列键值对的对象当用户点击弹窗中的Save或Discard按钮后该数据会被清空。因此{{components.table1.newRows[0].email}}精确指向当前正在新增的第一行数据的 email 字段正好作为 Create row 操作的入参。Table 暴露变量官方文档 对此变量的说明是newRows存储通过 Add new row 按钮添加到表格的行数据对象数组。第 6 步使用事件Events驱动查询联动现在配置两处事件实现保存新员工 → 自动刷新表格的完整闭环第一处在addEmployees查询上添加成功事件打开addEmployees查询的配置向下滚动点击New event handler新事件处理器添加事件Event选择Query Success查询成功Action选择Run Query运行查询Query选择getEmployees。这样每当addEmployees写入成功就会自动重新运行getEmployees刷新数据。第二处在 Table 组件上添加新增行事件点击 Table 组件在其属性面板中点击New event handlerEvent选择Add new rows添加新行Action选择Run QueryQuery选择addEmployees。这样当用户在弹窗中填写员工信息并点击Save时Table 会触发Add new rows事件进而执行addEmployees写入数据库写入成功后由第一条事件链自动刷新表格——最终效果是新增的数据立即显示在 UI 上。补充事件处理器Event Handler机制事件处理器是 ToolJet 组件与查询之间联动的基本机制详见 query-panel.md。查询层支持Query Success查询成功与Query Failure查询失败两类事件组件层如 Table则支持行点击、行悬停、页面切换、排序、过滤、单元格变更、保存变更、添加新行等事件见 Table 属性文档 的 Events 小节。本例正是典型的组合用法查询事件驱动刷新、组件事件驱动写入二者串成一条数据闭环。此外Table 组件还提供组件级方法CSA例如可在 RunJS 查询中用await components.table1.setPage(2)、await components.table1.discardChanges()等对表格进行编程控制感兴趣可阅读 CSA 与暴露变量文档。第 7 步预览、发布与共享构建器右上角有三个关键按钮Preview预览开发过程中随时预览应用的实际运行效果而不影响正式版本Release发布/部署开发完成后点击即可将当前版本部署为可用的正式应用Share共享通过生成的链接将应用分享给最终用户使用。到此一个完整的员工通讯录应用就构建完成了用户可以在 Table 中浏览所有员工点击(Add new row)新增员工并保存数据写入 ToolJet Database 后表格自动刷新展示最新结果。总结本教程覆盖的核心能力能力本教程中的应用对应文档应用创建与画布操作创建 Employee Directory、拖入 Table 组件quickstart-guide.md内置数据库建表创建 employees 表并录入示例数据tooljet-database.md查询创建与配置getEmployeesList rows、addEmployeesCreate rowquery-panel.md表达式绑定数据{{queries.getEmployees.data}}Table 属性文档组件暴露变量{{components.table1.newRows[0].email}}CSA 与暴露变量文档事件驱动联动Query Success → Run Query、Add new rows → Run Queryquery-panel.md发布与共享Preview / Release / Sharequickstart-guide.md在构建过程中你已经接触了 ToolJet 最重要的三大抽象组件、查询、事件。想进一步理解平台的整体运作机制可以继续探索 ToolJet Concepts 概念文档如果需要在自有服务器上部署 ToolJet可参考仓库中的 docker-compose.yaml 与 setup 部署文档若想深入 Table 组件在真实代码中的行为可直接阅读前端实现 NewTable 组件目录。掌握了这条建表—取数—绑定—写入—联动—发布的标准链路你就可以在此基础上扩展出更复杂的业务应用。【免费下载链接】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），仅供参考