企业官网建设流程全解析

ToolJet 右侧边栏完全指南：Components Library 与 Properties Panel 的使用与原理

【免费下载链接】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 右侧边栏承载了应用搭建的两大核心能力：Components Library（组件库）与Properties Panel（属性面板）。本文基于 ToolJet 3.0.0-LTS 文档与前端源码，系统讲解如何从组件库拖拽组件到画布、如何通过属性面板配置组件属性与样式、如何创建事件处理器与数据绑定，并深入源码层面解释其底层实现，帮助你快速掌握可视化搭建内部工具应用的完整工作流。

右侧边栏整体结构

在 ToolJet App Builder 中，右侧边栏并非单一面板，而是一个按当前上下文动态切换的多标签区域。从 RightSideBar.jsx 的源码可以看出，右侧边栏根据activeRightSideBarTab状态渲染三类内容：

对应的标签常量定义在 rightSidebarConstants.js 中：

export const RIGHT_SIDE_BAR_TAB = { COMPONENTS: 'components', CONFIGURATION: 'configuration', PAGES: 'pages', };

其中Components与Configuration是本篇的主角：前者解决"把什么组件放上去"，后者解决"怎么配置这个组件"。

Components Library：组件库

Components Library位于右侧边栏的 Components 标签页中，它收录了 ToolJet 当前版本支持的全部可用组件。使用方式非常直观：从组件库中把组件拖拽到画布（Canvas）上，即可完成一次组件的添加。

组件库不仅是一个平铺的组件列表，还提供了两项关键能力：

1. 按分区组织组件

组件库将全部组件按功能划分到多个分区（Section），并采用折叠（Accordion）形式展示，便于快速定位。分区与组件的对应关系定义在 sectionConfig.js 中，实际分区如下：

从 ComponentsManagerTab.jsx 的源码可以看到，组件列表并非硬编码，而是由componentTypes（组件类型注册表）动态生成，再过滤掉IGNORED_ITEMS中的内部组件；分区归属则由sectionConfig的valueSet决定。这意味着新增一个组件类型后，只要注册进组件注册表，就会自动出现在组件库的对应分区中，扩展性良好。

2. 搜索快速定位组件

组件库顶部内置搜索框。输入关键词即可实时过滤组件列表。值得注意的实现细节是：搜索并非简单的字符串包含匹配，而是基于Fuse.js 模糊搜索库实现的（见 ComponentsManagerTab.jsx 中对Fuse from 'fuse.js'的引入），同时维护了componentList（用于分区展示）与searchList（用于搜索匹配，包含组件名与显示名两个维度）两份数据。这意味着即使你记不清组件的完整名称，输入部分关键词或近似拼写也能快速命中目标组件。

:::tip 想要了解某个具体组件的属性、事件与用法，可以查阅Components Catalog（组件目录），该文档按组件逐个讲解其全部可配置项。 :::

拖放与画布协作

组件库与画布是联动关系：从 canvas.md 可知，画布是 App Builder 的中央区域，组件从右侧组件库拖入画布后即可进行排列、缩放、分组、克隆等操作。画布侧还实现了useCanvasDropHandler等拖放处理 Hook（见 frontend/src/AppBuilder/AppCanvas/Hooks/useCanvasDropHandler.js），负责将拖入的组件实例化到当前页面。

Properties Panel：属性面板

当你在画布上选中某个组件后，右侧边栏会自动切换到Configuration（配置）标签，此时显示的就是Properties Panel（属性面板）。它是配置组件的核心阵地，承担三类职责：

1. 设置组件值（set values）：如 Table 的数据源、Text 的内容、Button 的标签等；
2. 更新组件名称（update component names）：修改组件的唯一标识名，供数据绑定与事件引用；
3. 创建事件处理器（create event handlers）：为组件的交互事件挂接动作。

属性面板同样采用分区化组织，将设置项划分为Properties（属性）与Styles（样式）等不同的折叠分区，避免大量配置项堆叠造成的视觉负担。

如何打开属性面板

属性面板的打开方式有两种：

• 点击组件句柄（Component Handle）：每个组件顶部都有一个句柄，形如⚙️ + 组件名称。点击它即可在右侧打开属性面板。这一交互对应前端源码中的 ConfigHandle 组件；
• 直接选中画布上的组件：在画布中点击组件本身，右侧边栏同样会切到该组件的配置面板。

关于组件句柄的更多操作（如点击并按住句柄来移动组件、通过方向键精确定位），可参考 Canvas 文档的 Arrange Components 一节。

组件专属的属性面板

属性面板并非一套通用表单，而是按组件类型动态渲染的。从 Inspector.jsx 的导入列表可以看出，Inspector 为每种组件维护了专属配置面板，例如：

• Table：列管理（ColumnManager）、列类型（字符串/数字/布尔/选择/日期等）、操作按钮、样式分区等；
• Form：数据区（DataSection）、字段映射（ColumnMapping）、字段列表管理；
• Chart / Tabs / Modal / FilePicker / CurrencyInput / Navigation / TreeSelect / Cascader等均有各自专属面板。

此外，属性面板中还内置了通用配置元素（Elements），如 Color.jsx、Toggle.jsx、Select.jsx、Json.jsx 等，用于渲染颜色选择、开关、下拉选择、JSON 编辑等常见配置控件。这种"通用元素 + 组件专属面板"的组合，既保证了配置体验的统一性，又保留了各组件配置的灵活性。

隐藏与禁用组件

属性面板中最常用的一组配置是Visibility（可见性）与Disabled（禁用）：

• 将Visibility属性设置为true时组件显示，false时隐藏；
• 将Disabled属性设置为true时组件不可交互。

这两个属性不仅支持布尔值，还支持写入可求值为真/假（truthy/falsy）的表达式，从而实现组件间的动态联动。例如，希望"复选框勾选时禁用按钮"，只需在按钮的Disabled属性中写入绑定表达式：

{{components.checkbox1.value}}

当checkbox1被勾选时该表达式求值为true，按钮即被禁用；取消勾选时求值为false，按钮恢复可用。这种写法在 canvas.md 中有完整示例。

事件处理器（Event Handlers）

事件处理器可以在组件的Properties Panel中创建（也可以在查询的Advanced区域配置），用于在组件事件触发时执行预定义的动作，例如运行查询、执行组件专属动作（CSA）、设置变量等。事件处理器包含三个核心配置项：

Run Only If 使用示例

以 Button 组件为例，为其OnClick事件添加一个runQuery()动作，并设置Run Only If条件：

Button Component └─ OnClick Event Handler: runQuery() │ ├─ Run Only If: expression/condition

只有当条件表达式求值为true/真值时，runQuery()才会执行。条件表达式可以动态引用应用中的其他状态，例如：

{{globals.currentUser.groups[1] === 'admin'}} // 当前用户为 admin 时返回 true {{components.form1.isValid}} // form1 校验通过（isValid 为 true）时才执行

在源码层面，事件处理器的管理由 Inspector 目录下的 EventManager.jsx、ManageEventButton.jsx 与 ActionTypes.js 共同承担，其中ActionTypes定义了动作的类型映射。而事件与动作的完整概念说明，可参考 ToolJet 事件机制概念文档 与 组件事件处理器概览。

数据绑定（Bindings）

ToolJet 的属性面板中几乎所有字段都支持Bindings（数据绑定）：凡是写在{{}}双花括号内的内容，都会被当作 JavaScript 表达式求值，从而把动态数据注入组件。

{{(function () { <your_javascript_code_here> })() }} // 或直接引用组件、查询结果、全局变量 {{components.table1.selectedRow.id}} {{queries.getUsers.data}} {{globals.currentUser.email}}

典型应用场景包括：

• 将查询结果（queries.xxx.data）绑定到 Table 的数据属性；
• 引用其他组件的值（components.xxx.value）实现组件联动；
• 基于globals.currentUser等全局变量做条件渲染。

这些绑定表达式与事件处理器中的Run Only If条件共用同一套求值引擎，都是属性面板"配置即代码"能力的基础。更详细的绑定语法与示例，可参考 组件绑定（Bindings） 一节。

总结：右侧边栏驱动的可视化开发工作流

在 ToolJet 中，右侧边栏串起了"搭建应用"的完整闭环：

1. 在Components Library中按分区浏览或搜索组件，拖拽到画布；
2. 点击组件或组件句柄，在Properties Panel中配置属性、样式、组件名称；
3. 通过Bindings（{{}} 表达式）将查询数据、其他组件状态、全局变量动态注入组件；
4. 通过Event Handlers为交互事件挂接动作，并用Run Only If精确控制触发条件；
5. 配合画布的排列、缩放、分组、克隆（cmd/ctrl + d）能力，快速迭代界面。

整个流程无需编写传统意义上的前端代码，即可构建出数据驱动的内部工具、仪表盘与业务应用。若想进一步深入，推荐阅读仓库中的 组件目录、画布操作指南 以及右侧边栏的前端实现源码（RightSideBar.jsx、ComponentsManagerTab.jsx、Inspector.jsx），以理解组件库与属性面板背后的完整设计。

【免费下载链接】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