尧图网页设计 
ToolJet 实战使用 Form 组件构建表单并向 ToolJet Database 写入数据【免费下载链接】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 的Form表单组件为核心带你从零搭建一个可用的「产品录入」应用在 ToolJet Database 中建表、用 Form 组件收集用户输入、通过查询面板将数据写入数据库并在提交后自动刷新 Table 组件。读完本文你将掌握 Form 组件与 ToolJet Database 的完整联动链路、事件处理器Event Handler的配置方法以及{{components.form.data.xxx.value}}这类组件数据绑定表达式的实际用法。本文内容基于当前仓库的 version-2.50.0-LTS 文档并结合作品前端的 Form 组件源码Form.jsx、widgets/form.js做实现层面的印证。1. 前置准备在 ToolJet Database 中创建数据表Form 组件本身只负责「收集输入」真正落库需要依赖数据源。本指南选用ToolJet Database作为数据源它是 ToolJet 内置的托管式数据库无需额外配置连接串创建应用后即可直接使用。进入 ToolJet 的 ToolJet Database 页面新建一张名为products的表为表添加三列name文本、quantity数值、price数值向表内插入几条示例数据方便后续验证 Table 组件的读取效果。更完整的 ToolJet Database 操作说明可参阅 tooljet-database.md 与 querying-tooljet-db.md。从源码上看ToolJet Database 的查询编辑器位于 frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase其中CreateRow.jsx、ListRows.jsx分别对应「新增行」与「列出行」两类操作正是本指南后续会用到的两种操作。2. 搭建界面Table Form 组件布局新建一个应用从左侧组件库中将Table表格组件拖拽到画布上在 Table 旁边再拖入一个Form表单组件由于数据库表只有name、quantity、price三列我们在 Form 内部放置一个Text Input文本输入框对应name两个Number Input数值输入框对应quantity和price为表单内的三个输入框分别命名为nameInput、quantityInput、priceInput并将表单中的提交按钮命名为submitButton。为什么要给组件起名当一个应用中的组件数量较多时规范命名如nameInput、submitButton能让你在编写{{components.xxx.data.yyy}}表达式、配置事件处理器时快速定位目标组件避免混淆。这也是 ToolJet 官方推荐的实践。Form 组件的本质一个容器型组件从源码看Form 被定义为「Wrapper for multiple components」widgets/form.js 中的description字段其默认尺寸为宽 15、高 450。它本质是一个form容器见 Form.jsx 的 JSX 渲染内部可以容纳 Text、Text Input、Dropdown、Button 等组件并负责统一管理它们的校验与提交行为。有两点需要注意Form 内部禁止嵌套的组件Kanban、Calendar、Modal、Container、ListView、Tabs 以及 Form 本身都不能被拖入 Form 内部见 form.md 的 caution 提示Form 组件自带可选的 Header标题区与 Footer按钮区。在 widgets/form.js 的defaultChildren中可以看到Form 拖入画布时默认会附带一个 Header 中的 Text默认文本 Form title和一个 Footer 中的 Button默认文本 Submit默认的showHeader与showFooter均为{{true}}。3. 加载数据让 Table 组件读取数据库内容要让 Table 组件显示products表中的数据需要先创建一个查询Query点击底部Query Panel查询面板中的 Add添加按钮数据源选择ToolJet Database将查询重命名为getProductsTable name 选择productsOperation 选择List rows列出行打开Run this query on application load?应用加载时运行开关这样应用一启动就会自动拉取数据点击Run执行查询确认能取到数据。接下来把查询结果绑定到 Table 组件点击画布上的 Table 组件打开右侧属性面板在Data属性中粘贴以下表达式{{queries.getProducts.data}}这里的queries.getProducts.data是 ToolJet 的数据绑定语法queries是全局查询对象getProducts是查询名.data是该查询执行后返回的结果集。Table 组件的 Data 属性接收该结果集后会自动将其渲染为表格。原理补充在 ToolJet 中查询与组件之间通过「响应式数据绑定」通信。{{ }}内的内容会被当作 JavaScript 表达式实时求值因此当getProducts查询重新执行并返回新数据时Table 组件会自动重渲染无需手动干预。4. 写入数据表单提交 → 数据库落库4.1 创建写入查询再次点击 Query Panel 的 Add数据源选择ToolJet DatabaseTable name 选择productsOperation 选择Create row创建行将查询重命名为addProduct点击Add Column添加三列name、quantity、price为三列分别填入以下表达式分别对应三个输入框的值{{components.form.data.nameInput.value}} {{components.form.data.quantityInput.value}} {{components.form.data.priceInput.value}}4.2 理解components.form.data数据结构components是 ToolJet 的全局组件对象form是 Form 组件的名称data是 Form 组件暴露的核心变量——它保存了 Form 内所有子组件的当前值。访问规则为{{components.form.data.子组件名.value}}。从源码看Form 组件的data变量是在运行时动态计算并暴露的Form.jsx对于非高级模式默认拖拽模式组件会遍历 Form 内每个子组件的「暴露值」exposed values优先取value其次是values、file、selectedDateRange等字段最终把data、isValid、formData等变量暴露出去供其他组件与查询引用。同时在 widgets/form.js 的exposedVariables中可以看到 Form 默认暴露的变量data、isValid、isVisible、isDisabled、isLoading。这意味着除了取值你还可以在表达式中使用{{components.form.isValid}}判断表单整体是否通过校验、用{{components.form.isLoading}}控制加载态。4.3 提交后自动刷新 Table表单提交后如果 Table 不刷新用户看不到新写入的数据。解决方法是每次addProduct查询成功后紧接着触发一次getProducts查询。在addProduct查询的事件处理器Event Handler中配置点击addProduct查询的New event handler添加新事件事件保持默认的Query Success查询成功Action 选择Run QueryQuery 选择getProducts。这样addProduct执行成功后会立即重跑getProductsTable 组件随之更新为数据库中的最新数据。4.4 让提交按钮真正触发写入默认情况下Form 内按钮的点击并不自动触发查询需要通过事件处理器建立关联点击 Form 组件在其属性面板的Button To Submit Form表单提交按钮下拉框中选择submitButton为 Form 组件添加New event handlerEvent 选择On submit提交时、Action 选择Run Query、Query 选择addProduct。配置完成后在表单中输入产品信息并点击submitButton执行链路为点击 submitButton → Form 触发 On submit 事件 → 执行 addProduct 查询 → 写入 products 表 → 查询成功 → 触发 getProducts 查询 → Table 刷新4.5 Form 的事件与校验行为源码级印证从源码看Form 组件的提交逻辑做了「先校验、后提交」的处理Form.jsx若属性validateOnSubmit提交时校验所有字段默认{{true}}开启且表单isValid为false则不会触发onSubmit而是触发onInvalid事件并累加submitAttemptCount驱动子组件显示校验错误校验通过后才触发onSubmit事件事件执行完成后若属性resetOnSubmit提交后重置表单默认{{true}}开启表单会被自动重置。Form 组件官方支持的事件有见 form.md 的 Events 章节事件触发时机On submit点击表单的提交按钮时触发On invalid表单输入不合法校验失败时触发此外Form 组件还提供组件专属动作Component Specific ActionsCSA可通过 RunJS 查询调用form.md 的 CSA 章节await components.form1.submitForm() // 程序化提交表单 await components.form1.resetForm() // 程序化重置表单在 widgets/form.js 的actions中Form 实际暴露了 6 个动作submitForm、resetForm、clearForm、setVisibility、setDisable、setLoading可用于事件处理器或 RunJS 中灵活控制表单。5. 验收运行效果完成以上步骤后预览应用应用加载时getProducts自动执行Table 展示products表中的既有数据在表单的nameInput、quantityInput、priceInput中分别输入产品名、数量与价格点击submitButtonaddProduct查询将三者的值写入products表随后getProducts被再次触发Table 中出现刚刚录入的新行。6. 进阶使用 Custom Schema 快速生成表单除了拖拽组装Form 组件还支持通过 JSON Schema 声明式生成表单。在 Form 属性面板中开启Use custom schema使用自定义 schema即可传入包含title、properties、submitButton三个键的 JSON 对象键说明title表单标题properties定义表单内部各组件的 schema 对象submitButton定义提交按钮的 schema 对象示例事件登记表单{{{ title: Event Registration, properties: { textinput1: { type: textinput, value: John, placeholder: Enter First Name Here, label: First Name, validation: { maxLength: 6 }, styles: { backgroundColor: #f6f5ff, borderRadius: 5, borderColor: black, errorTextColor: #025aa3, disabled: false, visibility: true, textColor: #025aa3 } }, numberInput1: { type: number, styles: { backgroundColor: #f6f5ff, borderRadius: 5, textColor: #025aa3, borderColor: black, disabled: false, visibility: true }, value: 22, maxValue: 100, minValue: 14, placeholder: Enter Your Age, label: Age }, dropdown1: { type: dropdown, displayValues: [Male, Female, Prefer not to Answer], values: [1, 2, 3], loading: false, value: 1, label: Gender, styles: { disabled: false, visibility: true, borderRadius: 5, justifyContent: start } } }, submitButton: { value: Submit, styles: { backgroundColor: #3A433B, borderColor: #595959 } } }}}Custom Schema 支持datepicker、number、password、checkbox、toggle、textarea、daterangepicker、multiselect、starrating、filepicker、textinput、dropdown、button、text、radio等组件类型每种类型都有完整的属性与样式键说明可参阅 form.md 的 Custom Schema Examples 章节逐一查阅。从源码看JSON Schema 模式的渲染由 Form.jsx 中的generateUIComponents与RenderSchema协作完成schema 中的每个properties条目会被动态生成对应的 UI 组件并统一参与表单的校验与数据聚合formData以「组件名 → 值」的形式组织组件名即 schema 中properties下的键名。这一模式特别适合需要从后端动态下发表单结构的场景。7. 小结本指南完成了一个最小可用的「表单 → 数据库」闭环ToolJet Database 建表 → Table 组件读取 → Form 组件收集输入 → Create row 查询写入 → 事件处理器触发刷新。这套模式可以推广到几乎所有需要终端用户输入数据的场景例如客户信息登记文本 邮箱 电话号码订单/工单创建多字段表单 下拉选择反馈收集文本域 评分组件。核心要点回顾用{{queries.名称.data}}把查询结果绑定到 Table 组件用{{components.form.data.子组件名.value}}从表单中取值写入查询参数用「查询成功 → Run Query」的事件链保持界面与数据库同步通过Button To Submit Form与On submit事件将按钮点击与写入查询关联需要动态生成表单时使用Use custom schema以 JSON 声明式构建表单结构。【免费下载链接】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 实战：使用 Form 组件构建表单并向 ToolJet Database 写入数据
ToolJet 实战使用 Form 组件构建表单并向 ToolJet Database 写入数据【免费下载链接】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 的Form表单组件为核心带你从零搭建一个可用的「产品录入」应用在 ToolJet Database 中建表、用 Form 组件收集用户输入、通过查询面板将数据写入数据库并在提交后自动刷新 Table 组件。读完本文你将掌握 Form 组件与 ToolJet Database 的完整联动链路、事件处理器Event Handler的配置方法以及{{components.form.data.xxx.value}}这类组件数据绑定表达式的实际用法。本文内容基于当前仓库的 version-2.50.0-LTS 文档并结合作品前端的 Form 组件源码Form.jsx、widgets/form.js做实现层面的印证。1. 前置准备在 ToolJet Database 中创建数据表Form 组件本身只负责「收集输入」真正落库需要依赖数据源。本指南选用ToolJet Database作为数据源它是 ToolJet 内置的托管式数据库无需额外配置连接串创建应用后即可直接使用。进入 ToolJet 的 ToolJet Database 页面新建一张名为products的表为表添加三列name文本、quantity数值、price数值向表内插入几条示例数据方便后续验证 Table 组件的读取效果。更完整的 ToolJet Database 操作说明可参阅 tooljet-database.md 与 querying-tooljet-db.md。从源码上看ToolJet Database 的查询编辑器位于 frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase其中CreateRow.jsx、ListRows.jsx分别对应「新增行」与「列出行」两类操作正是本指南后续会用到的两种操作。2. 搭建界面Table Form 组件布局新建一个应用从左侧组件库中将Table表格组件拖拽到画布上在 Table 旁边再拖入一个Form表单组件由于数据库表只有name、quantity、price三列我们在 Form 内部放置一个Text Input文本输入框对应name两个Number Input数值输入框对应quantity和price为表单内的三个输入框分别命名为nameInput、quantityInput、priceInput并将表单中的提交按钮命名为submitButton。为什么要给组件起名当一个应用中的组件数量较多时规范命名如nameInput、submitButton能让你在编写{{components.xxx.data.yyy}}表达式、配置事件处理器时快速定位目标组件避免混淆。这也是 ToolJet 官方推荐的实践。Form 组件的本质一个容器型组件从源码看Form 被定义为「Wrapper for multiple components」widgets/form.js 中的description字段其默认尺寸为宽 15、高 450。它本质是一个form容器见 Form.jsx 的 JSX 渲染内部可以容纳 Text、Text Input、Dropdown、Button 等组件并负责统一管理它们的校验与提交行为。有两点需要注意Form 内部禁止嵌套的组件Kanban、Calendar、Modal、Container、ListView、Tabs 以及 Form 本身都不能被拖入 Form 内部见 form.md 的 caution 提示Form 组件自带可选的 Header标题区与 Footer按钮区。在 widgets/form.js 的defaultChildren中可以看到Form 拖入画布时默认会附带一个 Header 中的 Text默认文本 Form title和一个 Footer 中的 Button默认文本 Submit默认的showHeader与showFooter均为{{true}}。3. 加载数据让 Table 组件读取数据库内容要让 Table 组件显示products表中的数据需要先创建一个查询Query点击底部Query Panel查询面板中的 Add添加按钮数据源选择ToolJet Database将查询重命名为getProductsTable name 选择productsOperation 选择List rows列出行打开Run this query on application load?应用加载时运行开关这样应用一启动就会自动拉取数据点击Run执行查询确认能取到数据。接下来把查询结果绑定到 Table 组件点击画布上的 Table 组件打开右侧属性面板在Data属性中粘贴以下表达式{{queries.getProducts.data}}这里的queries.getProducts.data是 ToolJet 的数据绑定语法queries是全局查询对象getProducts是查询名.data是该查询执行后返回的结果集。Table 组件的 Data 属性接收该结果集后会自动将其渲染为表格。原理补充在 ToolJet 中查询与组件之间通过「响应式数据绑定」通信。{{ }}内的内容会被当作 JavaScript 表达式实时求值因此当getProducts查询重新执行并返回新数据时Table 组件会自动重渲染无需手动干预。4. 写入数据表单提交 → 数据库落库4.1 创建写入查询再次点击 Query Panel 的 Add数据源选择ToolJet DatabaseTable name 选择productsOperation 选择Create row创建行将查询重命名为addProduct点击Add Column添加三列name、quantity、price为三列分别填入以下表达式分别对应三个输入框的值{{components.form.data.nameInput.value}} {{components.form.data.quantityInput.value}} {{components.form.data.priceInput.value}}4.2 理解components.form.data数据结构components是 ToolJet 的全局组件对象form是 Form 组件的名称data是 Form 组件暴露的核心变量——它保存了 Form 内所有子组件的当前值。访问规则为{{components.form.data.子组件名.value}}。从源码看Form 组件的data变量是在运行时动态计算并暴露的Form.jsx对于非高级模式默认拖拽模式组件会遍历 Form 内每个子组件的「暴露值」exposed values优先取value其次是values、file、selectedDateRange等字段最终把data、isValid、formData等变量暴露出去供其他组件与查询引用。同时在 widgets/form.js 的exposedVariables中可以看到 Form 默认暴露的变量data、isValid、isVisible、isDisabled、isLoading。这意味着除了取值你还可以在表达式中使用{{components.form.isValid}}判断表单整体是否通过校验、用{{components.form.isLoading}}控制加载态。4.3 提交后自动刷新 Table表单提交后如果 Table 不刷新用户看不到新写入的数据。解决方法是每次addProduct查询成功后紧接着触发一次getProducts查询。在addProduct查询的事件处理器Event Handler中配置点击addProduct查询的New event handler添加新事件事件保持默认的Query Success查询成功Action 选择Run QueryQuery 选择getProducts。这样addProduct执行成功后会立即重跑getProductsTable 组件随之更新为数据库中的最新数据。4.4 让提交按钮真正触发写入默认情况下Form 内按钮的点击并不自动触发查询需要通过事件处理器建立关联点击 Form 组件在其属性面板的Button To Submit Form表单提交按钮下拉框中选择submitButton为 Form 组件添加New event handlerEvent 选择On submit提交时、Action 选择Run Query、Query 选择addProduct。配置完成后在表单中输入产品信息并点击submitButton执行链路为点击 submitButton → Form 触发 On submit 事件 → 执行 addProduct 查询 → 写入 products 表 → 查询成功 → 触发 getProducts 查询 → Table 刷新4.5 Form 的事件与校验行为源码级印证从源码看Form 组件的提交逻辑做了「先校验、后提交」的处理Form.jsx若属性validateOnSubmit提交时校验所有字段默认{{true}}开启且表单isValid为false则不会触发onSubmit而是触发onInvalid事件并累加submitAttemptCount驱动子组件显示校验错误校验通过后才触发onSubmit事件事件执行完成后若属性resetOnSubmit提交后重置表单默认{{true}}开启表单会被自动重置。Form 组件官方支持的事件有见 form.md 的 Events 章节事件触发时机On submit点击表单的提交按钮时触发On invalid表单输入不合法校验失败时触发此外Form 组件还提供组件专属动作Component Specific ActionsCSA可通过 RunJS 查询调用form.md 的 CSA 章节await components.form1.submitForm() // 程序化提交表单 await components.form1.resetForm() // 程序化重置表单在 widgets/form.js 的actions中Form 实际暴露了 6 个动作submitForm、resetForm、clearForm、setVisibility、setDisable、setLoading可用于事件处理器或 RunJS 中灵活控制表单。5. 验收运行效果完成以上步骤后预览应用应用加载时getProducts自动执行Table 展示products表中的既有数据在表单的nameInput、quantityInput、priceInput中分别输入产品名、数量与价格点击submitButtonaddProduct查询将三者的值写入products表随后getProducts被再次触发Table 中出现刚刚录入的新行。6. 进阶使用 Custom Schema 快速生成表单除了拖拽组装Form 组件还支持通过 JSON Schema 声明式生成表单。在 Form 属性面板中开启Use custom schema使用自定义 schema即可传入包含title、properties、submitButton三个键的 JSON 对象键说明title表单标题properties定义表单内部各组件的 schema 对象submitButton定义提交按钮的 schema 对象示例事件登记表单{{{ title: Event Registration, properties: { textinput1: { type: textinput, value: John, placeholder: Enter First Name Here, label: First Name, validation: { maxLength: 6 }, styles: { backgroundColor: #f6f5ff, borderRadius: 5, borderColor: black, errorTextColor: #025aa3, disabled: false, visibility: true, textColor: #025aa3 } }, numberInput1: { type: number, styles: { backgroundColor: #f6f5ff, borderRadius: 5, textColor: #025aa3, borderColor: black, disabled: false, visibility: true }, value: 22, maxValue: 100, minValue: 14, placeholder: Enter Your Age, label: Age }, dropdown1: { type: dropdown, displayValues: [Male, Female, Prefer not to Answer], values: [1, 2, 3], loading: false, value: 1, label: Gender, styles: { disabled: false, visibility: true, borderRadius: 5, justifyContent: start } } }, submitButton: { value: Submit, styles: { backgroundColor: #3A433B, borderColor: #595959 } } }}}Custom Schema 支持datepicker、number、password、checkbox、toggle、textarea、daterangepicker、multiselect、starrating、filepicker、textinput、dropdown、button、text、radio等组件类型每种类型都有完整的属性与样式键说明可参阅 form.md 的 Custom Schema Examples 章节逐一查阅。从源码看JSON Schema 模式的渲染由 Form.jsx 中的generateUIComponents与RenderSchema协作完成schema 中的每个properties条目会被动态生成对应的 UI 组件并统一参与表单的校验与数据聚合formData以「组件名 → 值」的形式组织组件名即 schema 中properties下的键名。这一模式特别适合需要从后端动态下发表单结构的场景。7. 小结本指南完成了一个最小可用的「表单 → 数据库」闭环ToolJet Database 建表 → Table 组件读取 → Form 组件收集输入 → Create row 查询写入 → 事件处理器触发刷新。这套模式可以推广到几乎所有需要终端用户输入数据的场景例如客户信息登记文本 邮箱 电话号码订单/工单创建多字段表单 下拉选择反馈收集文本域 评分组件。核心要点回顾用{{queries.名称.data}}把查询结果绑定到 Table 组件用{{components.form.data.子组件名.value}}从表单中取值写入查询参数用「查询成功 → Run Query」的事件链保持界面与数据库同步通过Button To Submit Form与On submit事件将按钮点击与写入查询关联需要动态生成表单时使用Use custom schema以 JSON 声明式构建表单结构。【免费下载链接】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），仅供参考