尧图网站建设 
ToolJet App Builder UI 实战零代码搭建 Support Desk Dashboard 界面【免费下载链接】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 前端 App Builder版本 3.0.0-LTS 文档体系讲解如何完全通过可视化拖拽、属性面板配置与内嵌 JavaScript 表达式从零搭建一个可复用的 Support Desk Dashboard客服工单看板用户界面。你将掌握 Text、Statistics、Table 三大核心组件的配置方法、多页面组织与复制粘贴技巧以及 App 级主题App mode的切换方式最终产出一套「Dashboard Customers」双页面的完整业务界面骨架为后续接入真实数据查询与事件交互做好准备。写在前面本指南面向的组件与使用场景ToolJet 内置了大量开箱即用的预构建组件用于加速内部工具、看板与业务应用的快速原型和交付。本指南聚焦于搭建「Support Desk Dashboard」的基础 UI全程只依赖画布拖拽、右侧 Properties Panel 属性配置和少量{{ }}表达式不编写任何自定义前端代码。整个 Demo 会用到以下三类组件它们的配置定义都可以在仓库中找到对应源码组件说明配置定义源码Text展示文本/HTML用作标题、副标题与分组标签widgets/text.jsStatistics展示关键指标主值 可选副值与趋势widgets/statistics.jsTable展示分页表格数据支持列 schema 配置widgets/table.js提示以下所有操作均在 App Builder 画布中进行。左侧为组件库与页面Pages侧边栏右侧为 Properties Panel属性面板选中组件后即可在其中修改其功能属性Properties与样式属性Styles。创建页面头部Header主标题从左侧组件库中将Text组件拖拽到画布左上角点击该组件在右侧 Properties Panel 中将其Data属性值改为Support Desk Dashboard。所有组件在 Properties Panel 中都会列出其全部可用属性功能相关属性如文本内容、数据源在 Properties 区外观相关属性在 Styles 区二者均可随时调整。在 Styles 区进行如下排版设置字号Size改为24字重Font weight改为bold颜色Color改为蓝色#408FCC。从源码看Text 组件的样式默认值定义在 widgets/text.jstextSize字号默认14fontWeight通过选择器切换同时支持textFormatPlain text / Markdown / HTML与dynamicHeight等附加属性——这意味着即使是静态标题也可以随时升级为支持 Markdown 或 HTML 渲染的动态内容。副标题在主标题下方再放置一个Text组件在其Data属性中输入Track and manage all your tickets in one place样式调整字号改为14颜色改为灰色#9B9B9B。工单计数卡片Statistics第一个计数卡片Created在标题区域旁边拖入Statistics组件在其Primary value label中输入Created并在Primary value中输入一个数字工单创建总数将Primary label color与Primary text color改为蓝色#4A90E2关闭取消勾选Hide secondary value以显示副值区域。复制出 Pending 与 Closed 卡片按照同样方式再添加 2 个 Statistics 组件分别表示Pending待处理与Closed已关闭工单数。可以复制CMDC/CtrlC已配置好的卡片再粘贴CMDV/CtrlV仅修改 Label 与 Value 即可快速生成同风格卡片。Statistics 组件的能力边界源码视角Statistics 组件并非一个简单的静态数字展示其完整的属性/样式/行为定义位于 widgets/statistics.js可以从底层确认以下几点主值区primaryValueLabel、primaryValue、primaryPrefixText前缀文本如货币符号$与primarySuffixText后缀文本如%源码在渲染时将三者拼接为派生主值见 Statistics.jsx副值区secondaryValueLabel、secondaryValue、hideSecondary默认false以及secondarySignDisplaypositive/negative——源码中会根据该值选择上升/下降趋势图标并将副值渲染为胶囊样式正负值可分别配置颜色positiveSecondaryValueColor默认取成功色negativeSecondaryValueColor默认取错误色布局与容器dataAlignment左/中/右、secondaryValueAlignment垂直/水平、backgroundColor、borderColor、borderRadius默认6、boxShadow、padding动态能力组件暴露primaryLabel、primaryValue、secondaryValue、isLoading、isVisible等 exposed variables并提供setPrimaryValue、setSecondaryValue、setLoading、setVisibility四个动作actions供事件处理器或 JS 代码动态更新指标——这正是把静态看板升级为「查询真实数据后刷新计数」的关键切入点。工单表格Table在画布中添加Table组件在右侧 Properties Panel 中将其Border Radius边框圆角改为10在Data属性中粘贴以下示例数据注意使用{{ }}包裹的 JS 表达式语法{{ [{ ticketId: TCK1001, customerName: Jane Doe, issueType: Login Issue, priority: High, status: Open, lastUpdated: 2024-04-12 }, { ticketId: TCK1002, customerName: John Smith, issueType: Payment Failure, priority: Medium, status: Pending, lastUpdated: 2024-04-11 }, { ticketId: TCK1003, customerName: Alice Johnson, issueType: Feature Request, priority: Low, status: Closed, lastUpdated: 2024-04-10 }, { ticketId: TCK1004, customerName: Sarah Dunsworth, issueType: Feature Request, priority: High, status: Closed, lastUpdated: 2024-04-10 }, ] }}在表格上方添加一个Text组件Data设为Tickets字号14、颜色#9B9B9B作为表格标题在属性面板的Columns区点击各列修改其Column name为更友好的显示名。例如把ticketId改为ticket ID、customerName改为customer name等列名只影响表头显示不影响底层数据字段。从 widgets/table.js 的源码定义可以看到 Table 组件的数据模型data属性校验 schema 为「对象数组」并默认开启autogenerateColumnsLock column schema根据数据自动生成列 schema配合columnData可对每列的name、key、isEditable等做细粒度配置同时支持rowsPerPage默认 10、useDynamicColumn动态列等能力。这意味着本指南中手工粘贴的静态数据后续可以直接替换为查询返回的结果数组列结构会自动适配。新增页面并复制组件ToolJet 的 App 支持多页面组织适合把看板拆分为「总览 明细」等结构点击左侧边栏的Pages默认存在一个Home页面将其重命名为Dashboard点击图标新建页面并将新页面重命名为Customers。回到Dashboard页面框选或逐一点选所有组件复制CMDC/ MacCtrlC/ Windows切换到Customers页面后粘贴CMDV/ MacCtrlV/ Windows在Customers页面上把「Tickets」那个Text组件的Data改为Customers将表格的Data替换为客户维度的示例数据{{[ { id: 1, name: John Doe, email: john.doeexample.com, phone: 1234567890, status: Active, issuesResolved: 0 }, { id: 2, name: John Smith, email: jane.smithexample.com, phone: 1234567891, status: Inactive, issuesResolved: 0 }, { id: 3, name: Alice Johnson, email: emily.johnsonexample.com, phone: 1234567892, status: Active, issuesResolved: 1 }, { id: 4, name: Michael Brown, email: michael.brownexample.com, phone: 1234567893, status: Inactive, issuesResolved: 4 }, { id: 5, name: Sarah Dunsworth, email: michael.brownexample.com, phone: 1234567893, status: Active, issuesResolved: 1 } ]}}由此两个页面共享同一套视觉组件结构只是数据口径不同——这也是内部工具中「总览看板 明细列表」最常见的信息架构模式。切换应用主题App mode点击左侧边栏的Settings设置按钮可以看到App mode属性默认值为Auto。将其切换为dark后预览应用整个 App 会切换为深色配色。当App mode保持为auto时应用会跟随浏览器自身的配色方案浅色/深色自动适配。该设置为 App 级全局设置作用于所有页面与组件。下一步为界面注入功能至此你已经完成了一个 Support Desk Dashboard 的完整 UI 骨架由 Text 组件构成的主/副标题层级三个 Statistics 卡片呈现 Created / Pending / Closed 三类工单计数一张支持列名自定义、圆角样式与分页展示的工单表格通过多页面机制复用的 Dashboard 与 Customers 两个视图可跟随浏览器或手动强制切换的深色主题。当前界面中的数据均为静态示例。要继续让这个看板真正可用可以沿着本仓库的 walkthrough 系列继续深入create-queries.md为界面创建数据查询Data Query将表格Data与统计卡片的Primary value替换为查询结果accessing-values.md理解如何在组件间通过 exposed variables 引用彼此的值using-code.md掌握{{ }}表达式与 JavaScript 在属性、事件中的运用variables.md定义全局变量让多页面共享同一份状态。借助 Statistics 组件暴露的setPrimaryValue/setLoading动作与 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），仅供参考 ToolJet App Builder UI 实战：零代码搭建 Support Desk Dashboard 界面
ToolJet App Builder UI 实战零代码搭建 Support Desk Dashboard 界面【免费下载链接】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 前端 App Builder版本 3.0.0-LTS 文档体系讲解如何完全通过可视化拖拽、属性面板配置与内嵌 JavaScript 表达式从零搭建一个可复用的 Support Desk Dashboard客服工单看板用户界面。你将掌握 Text、Statistics、Table 三大核心组件的配置方法、多页面组织与复制粘贴技巧以及 App 级主题App mode的切换方式最终产出一套「Dashboard Customers」双页面的完整业务界面骨架为后续接入真实数据查询与事件交互做好准备。写在前面本指南面向的组件与使用场景ToolJet 内置了大量开箱即用的预构建组件用于加速内部工具、看板与业务应用的快速原型和交付。本指南聚焦于搭建「Support Desk Dashboard」的基础 UI全程只依赖画布拖拽、右侧 Properties Panel 属性配置和少量{{ }}表达式不编写任何自定义前端代码。整个 Demo 会用到以下三类组件它们的配置定义都可以在仓库中找到对应源码组件说明配置定义源码Text展示文本/HTML用作标题、副标题与分组标签widgets/text.jsStatistics展示关键指标主值 可选副值与趋势widgets/statistics.jsTable展示分页表格数据支持列 schema 配置widgets/table.js提示以下所有操作均在 App Builder 画布中进行。左侧为组件库与页面Pages侧边栏右侧为 Properties Panel属性面板选中组件后即可在其中修改其功能属性Properties与样式属性Styles。创建页面头部Header主标题从左侧组件库中将Text组件拖拽到画布左上角点击该组件在右侧 Properties Panel 中将其Data属性值改为Support Desk Dashboard。所有组件在 Properties Panel 中都会列出其全部可用属性功能相关属性如文本内容、数据源在 Properties 区外观相关属性在 Styles 区二者均可随时调整。在 Styles 区进行如下排版设置字号Size改为24字重Font weight改为bold颜色Color改为蓝色#408FCC。从源码看Text 组件的样式默认值定义在 widgets/text.jstextSize字号默认14fontWeight通过选择器切换同时支持textFormatPlain text / Markdown / HTML与dynamicHeight等附加属性——这意味着即使是静态标题也可以随时升级为支持 Markdown 或 HTML 渲染的动态内容。副标题在主标题下方再放置一个Text组件在其Data属性中输入Track and manage all your tickets in one place样式调整字号改为14颜色改为灰色#9B9B9B。工单计数卡片Statistics第一个计数卡片Created在标题区域旁边拖入Statistics组件在其Primary value label中输入Created并在Primary value中输入一个数字工单创建总数将Primary label color与Primary text color改为蓝色#4A90E2关闭取消勾选Hide secondary value以显示副值区域。复制出 Pending 与 Closed 卡片按照同样方式再添加 2 个 Statistics 组件分别表示Pending待处理与Closed已关闭工单数。可以复制CMDC/CtrlC已配置好的卡片再粘贴CMDV/CtrlV仅修改 Label 与 Value 即可快速生成同风格卡片。Statistics 组件的能力边界源码视角Statistics 组件并非一个简单的静态数字展示其完整的属性/样式/行为定义位于 widgets/statistics.js可以从底层确认以下几点主值区primaryValueLabel、primaryValue、primaryPrefixText前缀文本如货币符号$与primarySuffixText后缀文本如%源码在渲染时将三者拼接为派生主值见 Statistics.jsx副值区secondaryValueLabel、secondaryValue、hideSecondary默认false以及secondarySignDisplaypositive/negative——源码中会根据该值选择上升/下降趋势图标并将副值渲染为胶囊样式正负值可分别配置颜色positiveSecondaryValueColor默认取成功色negativeSecondaryValueColor默认取错误色布局与容器dataAlignment左/中/右、secondaryValueAlignment垂直/水平、backgroundColor、borderColor、borderRadius默认6、boxShadow、padding动态能力组件暴露primaryLabel、primaryValue、secondaryValue、isLoading、isVisible等 exposed variables并提供setPrimaryValue、setSecondaryValue、setLoading、setVisibility四个动作actions供事件处理器或 JS 代码动态更新指标——这正是把静态看板升级为「查询真实数据后刷新计数」的关键切入点。工单表格Table在画布中添加Table组件在右侧 Properties Panel 中将其Border Radius边框圆角改为10在Data属性中粘贴以下示例数据注意使用{{ }}包裹的 JS 表达式语法{{ [{ ticketId: TCK1001, customerName: Jane Doe, issueType: Login Issue, priority: High, status: Open, lastUpdated: 2024-04-12 }, { ticketId: TCK1002, customerName: John Smith, issueType: Payment Failure, priority: Medium, status: Pending, lastUpdated: 2024-04-11 }, { ticketId: TCK1003, customerName: Alice Johnson, issueType: Feature Request, priority: Low, status: Closed, lastUpdated: 2024-04-10 }, { ticketId: TCK1004, customerName: Sarah Dunsworth, issueType: Feature Request, priority: High, status: Closed, lastUpdated: 2024-04-10 }, ] }}在表格上方添加一个Text组件Data设为Tickets字号14、颜色#9B9B9B作为表格标题在属性面板的Columns区点击各列修改其Column name为更友好的显示名。例如把ticketId改为ticket ID、customerName改为customer name等列名只影响表头显示不影响底层数据字段。从 widgets/table.js 的源码定义可以看到 Table 组件的数据模型data属性校验 schema 为「对象数组」并默认开启autogenerateColumnsLock column schema根据数据自动生成列 schema配合columnData可对每列的name、key、isEditable等做细粒度配置同时支持rowsPerPage默认 10、useDynamicColumn动态列等能力。这意味着本指南中手工粘贴的静态数据后续可以直接替换为查询返回的结果数组列结构会自动适配。新增页面并复制组件ToolJet 的 App 支持多页面组织适合把看板拆分为「总览 明细」等结构点击左侧边栏的Pages默认存在一个Home页面将其重命名为Dashboard点击图标新建页面并将新页面重命名为Customers。回到Dashboard页面框选或逐一点选所有组件复制CMDC/ MacCtrlC/ Windows切换到Customers页面后粘贴CMDV/ MacCtrlV/ Windows在Customers页面上把「Tickets」那个Text组件的Data改为Customers将表格的Data替换为客户维度的示例数据{{[ { id: 1, name: John Doe, email: john.doeexample.com, phone: 1234567890, status: Active, issuesResolved: 0 }, { id: 2, name: John Smith, email: jane.smithexample.com, phone: 1234567891, status: Inactive, issuesResolved: 0 }, { id: 3, name: Alice Johnson, email: emily.johnsonexample.com, phone: 1234567892, status: Active, issuesResolved: 1 }, { id: 4, name: Michael Brown, email: michael.brownexample.com, phone: 1234567893, status: Inactive, issuesResolved: 4 }, { id: 5, name: Sarah Dunsworth, email: michael.brownexample.com, phone: 1234567893, status: Active, issuesResolved: 1 } ]}}由此两个页面共享同一套视觉组件结构只是数据口径不同——这也是内部工具中「总览看板 明细列表」最常见的信息架构模式。切换应用主题App mode点击左侧边栏的Settings设置按钮可以看到App mode属性默认值为Auto。将其切换为dark后预览应用整个 App 会切换为深色配色。当App mode保持为auto时应用会跟随浏览器自身的配色方案浅色/深色自动适配。该设置为 App 级全局设置作用于所有页面与组件。下一步为界面注入功能至此你已经完成了一个 Support Desk Dashboard 的完整 UI 骨架由 Text 组件构成的主/副标题层级三个 Statistics 卡片呈现 Created / Pending / Closed 三类工单计数一张支持列名自定义、圆角样式与分页展示的工单表格通过多页面机制复用的 Dashboard 与 Customers 两个视图可跟随浏览器或手动强制切换的深色主题。当前界面中的数据均为静态示例。要继续让这个看板真正可用可以沿着本仓库的 walkthrough 系列继续深入create-queries.md为界面创建数据查询Data Query将表格Data与统计卡片的Primary value替换为查询结果accessing-values.md理解如何在组件间通过 exposed variables 引用彼此的值using-code.md掌握{{ }}表达式与 JavaScript 在属性、事件中的运用variables.md定义全局变量让多页面共享同一份状态。借助 Statistics 组件暴露的setPrimaryValue/setLoading动作与 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），仅供参考