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/ToolJetToolJet 的 App Builder 右侧边栏承载了应用搭建的两大核心能力Components Library组件库与Properties Panel属性面板。本文基于 ToolJet 3.0.0-LTS 文档与前端源码系统讲解如何从组件库拖拽组件到画布、如何通过属性面板配置组件属性与样式、如何创建事件处理器与数据绑定并深入源码层面解释其底层实现帮助你快速掌握可视化搭建内部工具应用的完整工作流。右侧边栏整体结构在 ToolJet App Builder 中右侧边栏并非单一面板而是一个按当前上下文动态切换的多标签区域。从 RightSideBar.jsx 的源码可以看出右侧边栏根据activeRightSideBarTab状态渲染三类内容标签常量值渲染内容触发场景ComponentscomponentsComponentsManagerTab即组件库默认显示用于向画布拖放组件ConfigurationconfigurationComponentConfigurationTab即属性面板Inspector选中画布上的组件后显示PagespagesPageSettings页面管理点击画布页面相关入口时显示对应的标签常量定义在 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 中实际分区如下分区包含组件Commonly used常用组件Table、Button、Text、TextInput、DatetimePickerV2、FormButtons按钮Button、ButtonGroupV2、PopoverMenu、FileButtonData数据展示Table、Chart、KeyValuePairLayouts布局Form、ModalV2、Container、Accordion、Tabs、Listview、Kanban、CalendarText inputs文本输入TextInput、TextArea、EmailInput、PasswordInput、RichTextEditorNumber inputs数字输入NumberInput、PhoneInput、CurrencyInput、RangeSliderV2、StarRatingSelect inputs选择输入TagsInput、DropdownV2、MultiselectV2、ToggleSwitchV2、RadioButtonV2、Checkbox、TreeSelect、CascaderDate and time inputs日期时间输入DaterangePicker、DatePickerV2、TimePicker、DatetimePickerV2Navigation导航Navigation、Link、Pagination、StepsMedia媒体Icon、Image、SvgImage、PDF、Map、AudioRecorder、CameraPresentation展示装饰Text、Tags、CircularProgressBar、ProgressBar、Timeline、Divider、VerticalDivider 等从 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属性面板。它是配置组件的核心阵地承担三类职责设置组件值set values如 Table 的数据源、Text 的内容、Button 的标签等更新组件名称update component names修改组件的唯一标识名供数据绑定与事件引用创建事件处理器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、设置变量等。事件处理器包含三个核心配置项配置项说明Event事件每个组件拥有自己专属的事件集合由用户交互或应用内动作触发。例如 Button 的OnClick、Table 的Row clicked等。具体事件请查阅对应组件的参考文档Action动作事件触发后执行的操作涵盖运行查询、导航、设置变量、调用组件专属动作CSA等完整的动作清单见Actions ReferenceRun Only If条件执行定义一个前置条件只有该条件满足时动作才会执行用于精细控制动作触发的时机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 事件机制概念文档 与 组件事件处理器概览。数据绑定BindingsToolJet 的属性面板中几乎所有字段都支持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 中右侧边栏串起了搭建应用的完整闭环在Components Library中按分区浏览或搜索组件拖拽到画布点击组件或组件句柄在Properties Panel中配置属性、样式、组件名称通过Bindings{{}} 表达式将查询数据、其他组件状态、全局变量动态注入组件通过Event Handlers为交互事件挂接动作并用Run Only If精确控制触发条件配合画布的排列、缩放、分组、克隆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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ToolJet 右侧边栏完全指南：Components Library 与 Properties Panel 的使用与原理
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/ToolJetToolJet 的 App Builder 右侧边栏承载了应用搭建的两大核心能力Components Library组件库与Properties Panel属性面板。本文基于 ToolJet 3.0.0-LTS 文档与前端源码系统讲解如何从组件库拖拽组件到画布、如何通过属性面板配置组件属性与样式、如何创建事件处理器与数据绑定并深入源码层面解释其底层实现帮助你快速掌握可视化搭建内部工具应用的完整工作流。右侧边栏整体结构在 ToolJet App Builder 中右侧边栏并非单一面板而是一个按当前上下文动态切换的多标签区域。从 RightSideBar.jsx 的源码可以看出右侧边栏根据activeRightSideBarTab状态渲染三类内容标签常量值渲染内容触发场景ComponentscomponentsComponentsManagerTab即组件库默认显示用于向画布拖放组件ConfigurationconfigurationComponentConfigurationTab即属性面板Inspector选中画布上的组件后显示PagespagesPageSettings页面管理点击画布页面相关入口时显示对应的标签常量定义在 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 中实际分区如下分区包含组件Commonly used常用组件Table、Button、Text、TextInput、DatetimePickerV2、FormButtons按钮Button、ButtonGroupV2、PopoverMenu、FileButtonData数据展示Table、Chart、KeyValuePairLayouts布局Form、ModalV2、Container、Accordion、Tabs、Listview、Kanban、CalendarText inputs文本输入TextInput、TextArea、EmailInput、PasswordInput、RichTextEditorNumber inputs数字输入NumberInput、PhoneInput、CurrencyInput、RangeSliderV2、StarRatingSelect inputs选择输入TagsInput、DropdownV2、MultiselectV2、ToggleSwitchV2、RadioButtonV2、Checkbox、TreeSelect、CascaderDate and time inputs日期时间输入DaterangePicker、DatePickerV2、TimePicker、DatetimePickerV2Navigation导航Navigation、Link、Pagination、StepsMedia媒体Icon、Image、SvgImage、PDF、Map、AudioRecorder、CameraPresentation展示装饰Text、Tags、CircularProgressBar、ProgressBar、Timeline、Divider、VerticalDivider 等从 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属性面板。它是配置组件的核心阵地承担三类职责设置组件值set values如 Table 的数据源、Text 的内容、Button 的标签等更新组件名称update component names修改组件的唯一标识名供数据绑定与事件引用创建事件处理器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、设置变量等。事件处理器包含三个核心配置项配置项说明Event事件每个组件拥有自己专属的事件集合由用户交互或应用内动作触发。例如 Button 的OnClick、Table 的Row clicked等。具体事件请查阅对应组件的参考文档Action动作事件触发后执行的操作涵盖运行查询、导航、设置变量、调用组件专属动作CSA等完整的动作清单见Actions ReferenceRun Only If条件执行定义一个前置条件只有该条件满足时动作才会执行用于精细控制动作触发的时机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 事件机制概念文档 与 组件事件处理器概览。数据绑定BindingsToolJet 的属性面板中几乎所有字段都支持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 中右侧边栏串起了搭建应用的完整闭环在Components Library中按分区浏览或搜索组件拖拽到画布点击组件或组件句柄在Properties Panel中配置属性、样式、组件名称通过Bindings{{}} 表达式将查询数据、其他组件状态、全局变量动态注入组件通过Event Handlers为交互事件挂接动作并用Run Only If精确控制触发条件配合画布的排列、缩放、分组、克隆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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
` 与 `Time` 对象完全指南)
