ToolJet 应用构建器实战零代码搭建 Support Desk Dashboard 仪表盘 UI【免费下载链接】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的 UI 搭建能力以“Support Desk Dashboard工单支持台仪表盘”为实战案例逐步演示如何通过拖拽 Text、Statistics、Table 等预置组件在几分钟内完成一个内部工具的前端界面并掌握多页面组织与明暗主题切换。读完本文你将能够独立在 ToolJet 中完成组件摆放、属性面板配置、内联数据填充、页面复制复用以及主题模式切换的完整流程为后续接入真实数据源Query与事件交互打下基础。前置认知ToolJet 的组件体系与属性面板ToolJet 提供了一套丰富的预置组件库覆盖按钮、表格、图表、表单、文本输入、选择输入、日期时间、媒体、展示类与自定义组件等类别组件清单集中定义在 widgetConfig.js 中。本文用到的三个组件均在其中Text文本属于 Presentation展示类用于显示文本或 HTMLStatistics统计同样属于展示类用于展示关键指标如本月收入、环比变化Table表格属于 Data数据类用于以表格形式展示结构化数据。所有组件在画布上被选中后右侧会弹出Properties Panel属性面板。面板按功能分组展示组件的能力properties控制数据内容与行为styles控制样式外观events用于绑定交互事件others控制桌面/移动端的显隐。每个属性的类型文本输入、开关、颜色选择器、下拉等与默认值都可以在对应组件的配置文件中直接看到例如 Statistics 组件的完整属性定义见 statistics.js。创建页面 Header页头区域一个仪表盘通常以醒目的标题开头。在 ToolJet 中完成页头只需两步从左侧组件库将Text组件拖拽到画布左上角点击该组件打开右侧属性面板在其Data属性中输入标题文字Support Desk Dashboard。接着调整标题的视觉效果将Font size字号改为24将Font weight字重改为bold加粗将文字颜色改为蓝色hex 色值#408FCC。再添加一个Text组件放在标题下方作为副标题在Data属性中输入Track and manage all your tickets in one place一站式跟踪与管理你的全部工单将字号设为14颜色设为灰色hex 色值#9B9B9B。从源码层面看Text 组件的Data对应其配置中的text属性见 text.js它是一个code类型的字段意味着它支持 ToolJet 的双花括号表达式如{{ variables.name }}可以将静态文字替换为动态数据。此外 Text 组件还提供Text Format切换Plain text / Markdown / HTML见 text.js默认渲染纯文本切换到 Markdown 或 HTML 后即可在组件内渲染富文本内容。构建工单计数卡片Statistics 组件仪表盘的核心是让关键指标一目了然。ToolJet 的Statistics组件正是为展示“主值 副值”的指标卡片而设计其配置文件中对该组件的描述即为 Show key metrics见 statistics.js。操作步骤如下将Statistics组件拖到页头下方在属性面板的Primary value label主值标签中输入Created并在Primary value主值中输入一个数字将Primary label color主标签颜色与Primary text color主文字颜色都改为蓝色#4A90E2关闭Hide secondary value隐藏副值开关使副值区域可见按同样方式再添加两个 Statistics 组件分别展示 Pending待处理与 Closed已关闭的工单数量。关于 Statistics 组件的字段可以结合源码理解其完整能力statistics.js分组属性说明默认值Primary valueprimaryValueLabel主值上方的标签文字This months earningsPrimary valueprimaryValue主值数字支持{{ }}表达式绑定真实数据682.3Primary valueprimaryPrefixText/primarySuffixText主值的前缀/后缀文本如$、%空Secondary valuehideSecondary是否隐藏副值区域开关falseSecondary valuesecondaryValueLabel/secondaryValue副值标签与数值Last month/2.85Secondary valuesecondarySignDisplay副值趋势标识positive / negativepositiveLayoutdataAlignment数据对齐方式Left / Center / RightleftLayoutsecondaryValueAlignment副值排列Vertical / Horizontalhorizontal样式方面主标签字号默认14、主值字号默认34见 statistics.js副值颜色支持正负区分——positiveSecondaryValueColor默认取主题成功色与negativeSecondaryValueColor默认取主题错误色会自动随趋势显示绿色/红色非常适合做同比、环比类指标。更关键的是primaryValue、secondaryValue等属性都是code类型支持直接写入{{ queries.query1.data.count }}这类表达式把卡片数值与后端查询结果实时联动——这正是“先用静态数据搭 UI再接真实数据”这一工作流的衔接点。搭建工单明细表格Table 组件统计卡片展示的是汇总数据明细列表则需要Table组件来承载。步骤将Table组件拖到画布上在右侧属性面板把Border Radius圆角改为10让表格边缘更柔和在Data属性中粘贴以下示例数据使用 ToolJet 表达式语法{{ }}包裹的数组字面量{{ [{ 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让列名更符合业务阅读习惯而不需要改动底层数据字段名。补充说明Data属性是 Table 组件的数据入口源码定义见 table.js其值的核心语法是{{ }}表达式。本例传入的是静态数组实际项目中完全可以把这里的字面量替换为{{ queries.tickets.data }}之类的查询结果表格会自动依据数组对象的字段生成列。当前Data属性的数据校验类型为字符串schema: { type: string }表达式求值后得到数组即可完成渲染。新增 Customers 页面复制与改造一个完整的内部应用往往包含多个页面。ToolJet 的页面管理位于左侧边栏的Pages面板点击左侧边栏Pages默认已存在一个Home页面将其重命名为Dashboard点击图标新建页面并把新页面重命名为Customers。接下来复用 Dashboard 页面的成果在Dashboard页面上点击并拖拽框选所有组件也可用快捷键复制Mac 为CMDCWindows 为CtrlC再切到Customers页面粘贴Mac 为CMDVWindows 为CtrlV把Tickets那个 Text 组件的Data属性改为Customers将 Table 组件的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 } ]}}完成这一步后你会得到一个与 Dashboard 视觉一致、但数据语义完全不同的客户列表页。这种“先复制页面骨架、再局部替换数据与文案”的做法是 ToolJet 中快速扩展多页面应用的典型工作流其背后是组件与页面松耦合的架构同一套组件配置可以跨页面复用只需要更换数据入口与展示文案。切换应用主题App Mode最后一步是让界面与品牌或使用环境匹配。点击左侧边栏的Settings设置按钮找到App mode应用模式属性默认值为Auto此时应用会跟随浏览器/操作系统的配色方案自动切换明暗主题切换为dark应用整体立即变为深色配色。切换后点击预览Preview即可看到应用以深色方案渲染的效果关于 Auto 模式的行为文档明确说明当App mode保持为 auto 时它会跟随浏览器的配色方案即跟随系统prefers-color-scheme偏好。这一模式在 ToolJet 前端代码中有对应的应用模式切换逻辑相关实现位于 AppModeToggle.jsx。值得一提的是ToolJet 的组件样式大量使用 CSS 变量例如 Statistics 组件默认色值中的var(--cc-primary-text)、var(--cc-surface1-surface)等见 statistics.js这正是切换主题模式时界面颜色能整体联动的原因——明暗主题本质上是同一套组件定义在不同主题变量下的重新渲染。小结与下一步本文以 Support Desk Dashboard 为案例走通了 ToolJet UI 搭建的完整链路用Text组件构建页头与小节标题掌握属性面板中数据与样式字号、字重、颜色的配置用Statistics组件搭建工单统计卡片理解主/副值、隐藏开关与趋势色等字段含义用Table组件承载工单与客户明细数据学会内联数据语法与列名自定义通过Pages面板完成页面重命名、新建、整页复制与数据替换通过App Mode在 Auto / dark 之间切换主题并理解其与浏览器配色方案及 CSS 变量的关系。至此你已经拥有一个视觉上完整、结构清晰的仪表盘界面。ToolJet 的 UI 层仅是应用的“骨架”后续可以继续探索将 Table 的Data替换为真实查询结果、为按钮绑定事件与动作、通过{{ }}表达式在组件间传递变量等。建议接着阅读同目录下的 create-queries.md创建查询与 accessing-values.md访问组件值让静态界面“活”起来真正接入业务数据与交互逻辑。【免费下载链接】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 应用构建器实战：零代码搭建 Support Desk Dashboard 仪表盘 UI
ToolJet 应用构建器实战零代码搭建 Support Desk Dashboard 仪表盘 UI【免费下载链接】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的 UI 搭建能力以“Support Desk Dashboard工单支持台仪表盘”为实战案例逐步演示如何通过拖拽 Text、Statistics、Table 等预置组件在几分钟内完成一个内部工具的前端界面并掌握多页面组织与明暗主题切换。读完本文你将能够独立在 ToolJet 中完成组件摆放、属性面板配置、内联数据填充、页面复制复用以及主题模式切换的完整流程为后续接入真实数据源Query与事件交互打下基础。前置认知ToolJet 的组件体系与属性面板ToolJet 提供了一套丰富的预置组件库覆盖按钮、表格、图表、表单、文本输入、选择输入、日期时间、媒体、展示类与自定义组件等类别组件清单集中定义在 widgetConfig.js 中。本文用到的三个组件均在其中Text文本属于 Presentation展示类用于显示文本或 HTMLStatistics统计同样属于展示类用于展示关键指标如本月收入、环比变化Table表格属于 Data数据类用于以表格形式展示结构化数据。所有组件在画布上被选中后右侧会弹出Properties Panel属性面板。面板按功能分组展示组件的能力properties控制数据内容与行为styles控制样式外观events用于绑定交互事件others控制桌面/移动端的显隐。每个属性的类型文本输入、开关、颜色选择器、下拉等与默认值都可以在对应组件的配置文件中直接看到例如 Statistics 组件的完整属性定义见 statistics.js。创建页面 Header页头区域一个仪表盘通常以醒目的标题开头。在 ToolJet 中完成页头只需两步从左侧组件库将Text组件拖拽到画布左上角点击该组件打开右侧属性面板在其Data属性中输入标题文字Support Desk Dashboard。接着调整标题的视觉效果将Font size字号改为24将Font weight字重改为bold加粗将文字颜色改为蓝色hex 色值#408FCC。再添加一个Text组件放在标题下方作为副标题在Data属性中输入Track and manage all your tickets in one place一站式跟踪与管理你的全部工单将字号设为14颜色设为灰色hex 色值#9B9B9B。从源码层面看Text 组件的Data对应其配置中的text属性见 text.js它是一个code类型的字段意味着它支持 ToolJet 的双花括号表达式如{{ variables.name }}可以将静态文字替换为动态数据。此外 Text 组件还提供Text Format切换Plain text / Markdown / HTML见 text.js默认渲染纯文本切换到 Markdown 或 HTML 后即可在组件内渲染富文本内容。构建工单计数卡片Statistics 组件仪表盘的核心是让关键指标一目了然。ToolJet 的Statistics组件正是为展示“主值 副值”的指标卡片而设计其配置文件中对该组件的描述即为 Show key metrics见 statistics.js。操作步骤如下将Statistics组件拖到页头下方在属性面板的Primary value label主值标签中输入Created并在Primary value主值中输入一个数字将Primary label color主标签颜色与Primary text color主文字颜色都改为蓝色#4A90E2关闭Hide secondary value隐藏副值开关使副值区域可见按同样方式再添加两个 Statistics 组件分别展示 Pending待处理与 Closed已关闭的工单数量。关于 Statistics 组件的字段可以结合源码理解其完整能力statistics.js分组属性说明默认值Primary valueprimaryValueLabel主值上方的标签文字This months earningsPrimary valueprimaryValue主值数字支持{{ }}表达式绑定真实数据682.3Primary valueprimaryPrefixText/primarySuffixText主值的前缀/后缀文本如$、%空Secondary valuehideSecondary是否隐藏副值区域开关falseSecondary valuesecondaryValueLabel/secondaryValue副值标签与数值Last month/2.85Secondary valuesecondarySignDisplay副值趋势标识positive / negativepositiveLayoutdataAlignment数据对齐方式Left / Center / RightleftLayoutsecondaryValueAlignment副值排列Vertical / Horizontalhorizontal样式方面主标签字号默认14、主值字号默认34见 statistics.js副值颜色支持正负区分——positiveSecondaryValueColor默认取主题成功色与negativeSecondaryValueColor默认取主题错误色会自动随趋势显示绿色/红色非常适合做同比、环比类指标。更关键的是primaryValue、secondaryValue等属性都是code类型支持直接写入{{ queries.query1.data.count }}这类表达式把卡片数值与后端查询结果实时联动——这正是“先用静态数据搭 UI再接真实数据”这一工作流的衔接点。搭建工单明细表格Table 组件统计卡片展示的是汇总数据明细列表则需要Table组件来承载。步骤将Table组件拖到画布上在右侧属性面板把Border Radius圆角改为10让表格边缘更柔和在Data属性中粘贴以下示例数据使用 ToolJet 表达式语法{{ }}包裹的数组字面量{{ [{ 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让列名更符合业务阅读习惯而不需要改动底层数据字段名。补充说明Data属性是 Table 组件的数据入口源码定义见 table.js其值的核心语法是{{ }}表达式。本例传入的是静态数组实际项目中完全可以把这里的字面量替换为{{ queries.tickets.data }}之类的查询结果表格会自动依据数组对象的字段生成列。当前Data属性的数据校验类型为字符串schema: { type: string }表达式求值后得到数组即可完成渲染。新增 Customers 页面复制与改造一个完整的内部应用往往包含多个页面。ToolJet 的页面管理位于左侧边栏的Pages面板点击左侧边栏Pages默认已存在一个Home页面将其重命名为Dashboard点击图标新建页面并把新页面重命名为Customers。接下来复用 Dashboard 页面的成果在Dashboard页面上点击并拖拽框选所有组件也可用快捷键复制Mac 为CMDCWindows 为CtrlC再切到Customers页面粘贴Mac 为CMDVWindows 为CtrlV把Tickets那个 Text 组件的Data属性改为Customers将 Table 组件的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 } ]}}完成这一步后你会得到一个与 Dashboard 视觉一致、但数据语义完全不同的客户列表页。这种“先复制页面骨架、再局部替换数据与文案”的做法是 ToolJet 中快速扩展多页面应用的典型工作流其背后是组件与页面松耦合的架构同一套组件配置可以跨页面复用只需要更换数据入口与展示文案。切换应用主题App Mode最后一步是让界面与品牌或使用环境匹配。点击左侧边栏的Settings设置按钮找到App mode应用模式属性默认值为Auto此时应用会跟随浏览器/操作系统的配色方案自动切换明暗主题切换为dark应用整体立即变为深色配色。切换后点击预览Preview即可看到应用以深色方案渲染的效果关于 Auto 模式的行为文档明确说明当App mode保持为 auto 时它会跟随浏览器的配色方案即跟随系统prefers-color-scheme偏好。这一模式在 ToolJet 前端代码中有对应的应用模式切换逻辑相关实现位于 AppModeToggle.jsx。值得一提的是ToolJet 的组件样式大量使用 CSS 变量例如 Statistics 组件默认色值中的var(--cc-primary-text)、var(--cc-surface1-surface)等见 statistics.js这正是切换主题模式时界面颜色能整体联动的原因——明暗主题本质上是同一套组件定义在不同主题变量下的重新渲染。小结与下一步本文以 Support Desk Dashboard 为案例走通了 ToolJet UI 搭建的完整链路用Text组件构建页头与小节标题掌握属性面板中数据与样式字号、字重、颜色的配置用Statistics组件搭建工单统计卡片理解主/副值、隐藏开关与趋势色等字段含义用Table组件承载工单与客户明细数据学会内联数据语法与列名自定义通过Pages面板完成页面重命名、新建、整页复制与数据替换通过App Mode在 Auto / dark 之间切换主题并理解其与浏览器配色方案及 CSS 变量的关系。至此你已经拥有一个视觉上完整、结构清晰的仪表盘界面。ToolJet 的 UI 层仅是应用的“骨架”后续可以继续探索将 Table 的Data替换为真实查询结果、为按钮绑定事件与动作、通过{{ }}表达式在组件间传递变量等。建议接着阅读同目录下的 create-queries.md创建查询与 accessing-values.md访问组件值让静态界面“活”起来真正接入业务数据与交互逻辑。【免费下载链接】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），仅供参考