mirror of
https://github.com/nocobase/nocobase.git
synced 2026-09-21 13:52:17 +08:00
docs(tutorial-v2): SEO optimization + internal links + sidebar labels
- Add FAQ, tech stack comparison, and related docs to index pages - Add chapter summaries and internal links to handbook docs (ch01-07) - Simplify sidebar labels in _meta.json - Use latest branch for Docker install in ch01 - Unify chapter openings: context first, then chapter scope
This commit is contained in:
@@ -1,10 +1,8 @@
|
||||
# 第 1 章:认识 NocoBase — 5 分钟跑起来
|
||||
|
||||
欢迎来到 NocoBase 2.0 入门教程!
|
||||
在这个系列里,我们会从零开始,用 NocoBase 搭建一个**极简的工单系统(HelpDesk)**。整个系统只需要 **2 张[数据表](/data-sources/main/collection)**,不写一行代码,即可实现工单提交、分类管理、变更追踪、权限控制和数据[仪表盘](/data-visualization)。
|
||||
|
||||
在这个系列里,我们会一起从零开始,用 NocoBase 搭建一个**极简的工单系统(HelpDesk)**。整个系统只需要 **2 张数据表**,不写一行代码,却能实现工单提交、分类管理、变更追踪、权限控制,甚至还有数据仪表盘。
|
||||
|
||||
准备好了吗?我们开始!
|
||||
本章先通过 [Docker](/get-started/installation/docker) 一键部署 NocoBase,完成首次登录,了解[配置模式与使用模式](/get-started/how-nocobase-works)的区别,并预览工单系统的全貌。
|
||||
|
||||
|
||||
## 1.1 NocoBase 是什么
|
||||
@@ -19,16 +17,16 @@
|
||||
|
||||
和其他无代码工具相比,NocoBase 有几个核心理念:
|
||||
|
||||
- **数据模型驱动**:先定义数据结构,再用区块展示数据,最后用操作处理数据——界面与数据彻底解耦
|
||||
- **数据模型驱动**:先定义[数据源](/data-sources)和数据结构,再用[区块](/interface-builder/blocks)展示数据,最后用[操作](/interface-builder/actions)处理数据——界面与数据彻底解耦
|
||||
- **所见即所得**:页面就是画布,点哪改哪,像搭 Notion 页面一样直观
|
||||
- **一切皆插件**:所有功能都是插件,类似 WordPress,按需安装、灵活扩展
|
||||
- **AI 融入业务**:内置 AI 员工,可以执行分析、翻译、录入等任务,真正融入你的工作流
|
||||
- **一切皆插件**:所有功能都是[插件](/development/plugin),类似 WordPress,按需安装、灵活扩展
|
||||
- **AI 融入业务**:内置 [AI 员工](/ai-employees/quick-start),可以执行分析、翻译、录入等任务,真正融入你的工作流
|
||||
- **开源 + 私有部署**:核心代码完全开源,数据完全在你自己的服务器上
|
||||
|
||||
|
||||
## 1.2 安装 NocoBase
|
||||
|
||||
NocoBase 支持多种安装方式,我们选择最简单的 **Docker 安装**。
|
||||
NocoBase 支持多种安装方式,我们选择最简单的 **[Docker 安装](/get-started/installation/docker)**。
|
||||
|
||||
### 前提条件
|
||||
|
||||
@@ -43,7 +41,7 @@ NocoBase 支持多种安装方式,我们选择最简单的 **Docker 安装**
|
||||
mkdir my-project && cd my-project
|
||||
|
||||
# 下载 docker-compose.yml(默认使用 PostgreSQL)
|
||||
curl -fsSL https://static-docs.nocobase.com/docker-compose/cn/beta-postgres.yml -o docker-compose.yml
|
||||
curl -fsSL https://static-docs.nocobase.com/docker-compose/cn/latest-postgres.yml -o docker-compose.yml
|
||||
```
|
||||
|
||||
> **其他数据库?** 把上面链接中的 `postgres` 替换为 `mysql` 或 `mariadb` 即可。
|
||||
@@ -51,9 +49,9 @@ curl -fsSL https://static-docs.nocobase.com/docker-compose/cn/beta-postgres.yml
|
||||
>
|
||||
> | 数据库 | 下载链接 |
|
||||
> |--------|---------|
|
||||
> | PostgreSQL(推荐) | `https://static-docs.nocobase.com/docker-compose/cn/beta-postgres.yml` |
|
||||
> | MySQL | `https://static-docs.nocobase.com/docker-compose/cn/beta-mysql.yml` |
|
||||
> | MariaDB | `https://static-docs.nocobase.com/docker-compose/cn/beta-mariadb.yml` |
|
||||
> | PostgreSQL(推荐) | `https://static-docs.nocobase.com/docker-compose/cn/latest-postgres.yml` |
|
||||
> | MySQL | `https://static-docs.nocobase.com/docker-compose/cn/latest-mysql.yml` |
|
||||
> | MariaDB | `https://static-docs.nocobase.com/docker-compose/cn/latest-mariadb.yml` |
|
||||
|
||||
### 第二步:启动
|
||||
|
||||
@@ -99,7 +97,7 @@ NocoBase 的界面有两种模式:
|
||||
| **使用模式** | 普通用户日常使用的界面 | 所有人 |
|
||||
| **配置模式** | 搭建和调整界面的设计模式 | 管理员 |
|
||||
|
||||
切换方式:点击右上角的 **「界面配置(UI Editor)」** 按钮(一个荧光笔图标)。
|
||||
切换方式:点击右上角的 **「[界面配置](/get-started/how-nocobase-works)(UI Editor)」** 按钮(一个荧光笔图标)。
|
||||
|
||||

|
||||
|
||||
@@ -109,7 +107,7 @@ NocoBase 的界面有两种模式:
|
||||
|
||||

|
||||
|
||||
如上图所示:菜单、表格操作栏、页面下方都出现了橙色的提示,点击可以进行下一步的创建选项。
|
||||
如上图所示:[菜单](/interface-builder/menus)、表格操作栏、[页面](/interface-builder/pages)下方都出现了橙色的提示,点击可以进行下一步的创建选项。
|
||||
|
||||
> **记住这个规律**:在 NocoBase 里,想修改画面,就进入配置模式,找到它右上角的小图标,点击即可。
|
||||
|
||||
@@ -142,9 +140,9 @@ NocoBase 的界面由三个区域组成:
|
||||
|
||||
在接下来的教程中,我们会一步步搭建一个 **IT 工单系统**,它可以做到:
|
||||
|
||||
- ✅ 提交工单:用户填写标题、描述、选择分类和优先级
|
||||
- ✅ 提交工单:[用户](/users-permissions/user)填写标题、描述、选择分类和优先级
|
||||
- ✅ 工单列表:按状态、分类筛选,一目了然
|
||||
- ✅ 权限控制:普通用户只看自己的工单,管理员看全部
|
||||
- ✅ [权限](/users-permissions/role)控制:普通用户只看自己的工单,管理员看全部
|
||||
- ✅ 数据看板:实时统计工单分布和趋势
|
||||
- ✅ 数据操作日志(内置)
|
||||
|
||||
@@ -170,3 +168,9 @@ NocoBase 的界面由三个区域组成:
|
||||
**下一章**,我们就要动手了——进入数据源管理,创建我们的第一张数据表。这是整个系统的骨架,也是 NocoBase 最核心的能力。
|
||||
|
||||
我们下章见!
|
||||
|
||||
## 相关资源
|
||||
|
||||
- [Docker 安装详解](/get-started/installation/docker) — 完整安装选项与环境变量说明
|
||||
- [系统要求](/get-started/system-requirements) — 硬件和软件环境要求
|
||||
- [NocoBase 是如何工作的](/get-started/how-nocobase-works) — 数据源、区块、操作等核心概念
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
上一章我们装好了 NocoBase 并认识了界面。现在,我们要给工单系统搭骨架——定义**数据模型**。
|
||||
|
||||
数据模型就是系统的地基:先想清楚要存哪些数据、数据之间有什么关系,后面搭界面、配权限才能水到渠成。
|
||||
本章将创建工单和分类两张[数据表](/data-sources/main/collection),配置[字段类型](/data-sources/field)(单行文本、下拉选择、[多对一](/data-sources/field/associations/m2o)关联等),并建立表间关联关系。数据模型是系统的地基:先想清楚要存哪些数据、数据之间有什么关系,后面搭界面、配权限才能水到渠成。
|
||||
|
||||
|
||||
## 2.1 什么是数据表和字段
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
今天我们会用到**普通表**和**树表**,其他类型以后用到再学。
|
||||
|
||||
**进入数据源管理**:点击左下角 **「数据源管理」** 图标(齿轮旁边的数据库图标),你会看到「主数据源」——我们所有的表都建在这里。
|
||||
**进入数据源管理**:点击左下角 **「数据源管理」** 图标(齿轮旁边的数据库图标),你会看到「[主数据源](/data-sources)」——我们所有的表都建在这里。
|
||||
|
||||

|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
|
||||
**1. 标题(单行文本)**
|
||||
|
||||
每条工单都需要一个简短的标题来概括问题。点击 **「添加字段」** → 选择 **「单行文本」**:
|
||||
每条工单都需要一个简短的标题来概括问题。点击 **「添加字段」** → 选择 **[「单行文本」](/data-sources/field/basic/input)**:
|
||||
|
||||

|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
|
||||
> 首次创建时还没有选项数据,所以默认值选不了——需要保存后再回来设置。
|
||||
|
||||
> 为什么用下拉单选?因为状态是固定的几个值,下拉菜单可以防止用户随意填写,保证数据规范。
|
||||
> 为什么用下拉单选?因为状态是固定的几个值,[下拉菜单](/data-sources/field/choices/select)可以防止用户随意填写,保证数据规范。
|
||||
|
||||
**4. 优先级(下拉菜单 - 单选)**
|
||||
|
||||
@@ -225,7 +225,7 @@
|
||||
|
||||

|
||||
|
||||
你在界面上看到的是名称("网络问题""张三"),背后就是通过 ID 关联的。**多条工单可以指向同一个分类或同一个用户**——这种关系叫做**多对一**。
|
||||
你在界面上看到的是名称("网络问题""张三"),背后就是通过 ID 关联的。**多条工单可以指向同一个分类或同一个用户**——这种关系叫做[**多对一**](/data-sources/field/associations/m2o)。
|
||||
|
||||
### 添加关系字段
|
||||
|
||||
@@ -306,3 +306,9 @@
|
||||
骨架搭好了,但现在只有空表。下一章,我们要搭建页面,让数据真正能展示出来。
|
||||
|
||||
我们下章见!
|
||||
|
||||
## 相关资源
|
||||
|
||||
- [数据源概述](/data-sources) — NocoBase 数据建模核心概念
|
||||
- [数据表字段](/data-sources/field) — 所有字段类型详解
|
||||
- [多对一关联](/data-sources/field/associations/m2o) — 关联关系配置说明
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
# 第 3 章:搭建页面 — 从空白到可用
|
||||
|
||||
上一章我们把数据表的骨架搭好了,但现在数据只存在于"后台"——用户根本看不到。这一章,我们要把数据**摆上台面**,让它变成一张真正能用的工单列表。
|
||||
上一章我们把数据表的骨架搭好了,但现在数据只存在于"后台"——用户根本看不到。这一章,我们要把数据**摆上台面**:创建[表格区块](/interface-builder/blocks/data-blocks/table)展示工单数据,配置字段显示、排序、[筛选](/interface-builder/blocks/filter-blocks/form)和分页,让它变成一张真正能用的工单列表。
|
||||
|
||||
## 3.1 什么是区块(Block)
|
||||
|
||||
在 NocoBase 中,**区块**就是页面上的"积木"。想展示一张表格?放一个表格区块。想展示一个表单?放一个表单区块。一个页面可以自由组合多个区块,还能拖拽调整布局。
|
||||
在 NocoBase 中,**区块**就是页面上的"积木"。想展示一张表格?放一个[表格区块](/interface-builder/blocks/data-blocks/table)。想展示一个表单?放一个表单区块。一个页面可以自由组合多个区块,还能拖拽调整布局。
|
||||
|
||||
常见的区块类型:
|
||||
|
||||
@@ -23,14 +23,14 @@
|
||||
|
||||
首先,我们需要在系统里创建"工单管理"的入口。
|
||||
|
||||
1. 点击右上角 **UI 编辑器** 开关,进入界面配置模式(整个页面会出现橙色的可编辑边框)。
|
||||
1. 点击右上角 **UI 编辑器** 开关,进入界面[配置模式](/get-started/how-nocobase-works)(整个页面会出现橙色的可编辑边框)。
|
||||
2. 鼠标移到顶部导航栏的 **「添加菜单项(Add menu item)」** 按钮,选择 **「添加分组(Add group)」**,命名为 **「工单管理」**。
|
||||
|
||||

|
||||
|
||||
|
||||
3. 顶部导航栏会立即出现「工单管理」菜单。**点击它**,左侧会展开分组菜单栏。
|
||||
4. 在左侧菜单栏,点击橙色的 **「添加菜单项(Add menu item)」** 按钮,选择 **「新版页面(v2)(Modern page (v2))」**,依次添加两个子页面:
|
||||
3. 顶部导航栏会立即出现「工单管理」[菜单](/interface-builder/menus)。**点击它**,左侧会展开分组菜单栏。
|
||||
4. 在左侧菜单栏,点击橙色的 **「添加菜单项(Add menu item)」** 按钮,选择 **「新版页面(v2)(Modern page (v2))」**,依次添加两个子[页面](/interface-builder/pages):
|
||||
- **工单列表** — 展示所有工单
|
||||
- **工单分类** — 管理分类数据
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
默认情况下表格不会自动显示所有字段,我们需要手动选择要展示的列:
|
||||
|
||||
1. 在表格区块表头右侧,点击 **「字段(Fields)」**。
|
||||
1. 在表格区块表头右侧,点击 **「[字段](/data-sources/field)(Fields)」**。
|
||||
2. 勾选需要展示的字段:
|
||||
- **标题** — 工单主题,一眼就能看到
|
||||
- **状态** — 当前处理进度
|
||||
@@ -84,7 +84,7 @@
|
||||
|
||||
**方式二:在数据源中修改(全局生效,推荐)**
|
||||
|
||||
进入 **设置 → 数据源 → 数据表 → 分类表**,将 **「标题字段」** 改为 **名称**。这样所有引用分类表的地方都会默认显示名称,一劳永逸。修改后需要回到页面重新添加该字段才能生效。
|
||||
进入 **设置 → [数据源](/data-sources) → [数据表](/data-sources/main/collection) → 分类表**,将 **「标题字段」** 改为 **名称**。这样所有引用分类表的地方都会默认显示名称,一劳永逸。修改后需要回到页面重新添加该字段才能生效。
|
||||

|
||||
|
||||
## 3.5 添加筛选和排序
|
||||
@@ -125,7 +125,7 @@
|
||||
|
||||
### 不想自动筛选?
|
||||
|
||||
如果希望用户点击按钮后才触发筛选,可以在筛选表单右下角点击 **「操作(Actions)」**,勾选 **「筛选(Filter)」** 和 **「重置(Reset)」** 按钮。这样用户填好条件后需要手动点击才会执行筛选。
|
||||
如果希望用户点击按钮后才触发筛选,可以在筛选表单右下角点击 **「[操作](/interface-builder/actions)(Actions)」**,勾选 **「筛选(Filter)」** 和 **「重置(Reset)」** 按钮。这样用户填好条件后需要手动点击才会执行筛选。
|
||||

|
||||
|
||||
### 另一种筛选方式:表格自带的筛选操作
|
||||
@@ -144,7 +144,7 @@
|
||||
我们希望最新的工单排在最前面:
|
||||
|
||||
1. 点击表格区块右上角的 **区块设置**(三横线图标)。
|
||||
2. 找到 **「设置排序规则」**。
|
||||
2. 找到 **「设置[排序](/interface-builder/blocks/data-blocks/table)规则」**。
|
||||
3. 添加排序字段:选择 **创建时间**,排序方式选 **降序**。
|
||||
|
||||

|
||||
@@ -156,7 +156,7 @@
|
||||
光看列表还不够,我们还需要能点进去查看工单详情,以及编辑工单。
|
||||
|
||||
1. 在操作列上方,点击第二个 ”+“ 号。
|
||||
2. 点击操作:**查看**、**编辑**、**删除**。
|
||||
2. 点击操作:**查看**、**[编辑](/interface-builder/actions/edit)**、**[删除](/interface-builder/actions/delete)**。
|
||||
3. 每行数据操作栏位会出现「查看」、「编辑」和「删除」按钮。
|
||||
|
||||

|
||||
@@ -214,3 +214,9 @@
|
||||
|
||||
光能"看"还不够——用户还得能**提交新工单**。下一章,我们来搭建表单区块,配置字段联动规则,还会启用记录历史来追踪工单的每一次变更。
|
||||
|
||||
## 相关资源
|
||||
|
||||
- [区块概述](/interface-builder/blocks) — 所有区块类型说明
|
||||
- [表格区块](/interface-builder/blocks/data-blocks/table) — 表格区块详细配置
|
||||
- [筛选区块](/interface-builder/blocks/filter-blocks/form) — 筛选表单配置
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 第 4 章:表单与详情 — 录入、展示、一步到位
|
||||
|
||||
上一章我们搭好了工单列表,数据看得见了。但用户怎么**提交新工单**呢?这一章,我们来解决"数据填得进"的问题——搭建表单区块、配置字段联动,最后还能追踪工单的每一次变更。
|
||||
上一章我们搭好了工单列表,数据看得见了。但用户怎么**提交新工单**呢?这一章,我们来解决"数据填得进"的问题——搭建[表单区块](/interface-builder/blocks/data-blocks/form)和[详情区块](/interface-builder/blocks/data-blocks/details),配置字段布局和[联动规则](/interface-builder/linkage-rules),还能用[变更历史](/collection-templates/audit-log)追踪工单的每一次修改。
|
||||
|
||||
## 4.1 新建工单表单
|
||||
|
||||
@@ -9,20 +9,20 @@
|
||||
### 添加"新建"操作按钮
|
||||
|
||||
1. 确保处于 UI 编辑器模式(右上角开关打开)。
|
||||
2. 进入「工单列表」页面,点击表格区块上方的 **「操作(Actions)」**。
|
||||
2. 进入「工单列表」页面,点击表格区块上方的 **「[操作](/interface-builder/actions)(Actions)」**。
|
||||
3. 勾选 **「添加」** 操作按钮。
|
||||
4. 表格上方会出现一个「添加」按钮,点击它会打开一个弹窗。
|
||||
4. 表格上方会出现一个「添加」按钮,点击它会打开一个[弹窗](/interface-builder/actions/pop-up)。
|
||||
|
||||

|
||||
|
||||
### 配置弹窗中的表单
|
||||
|
||||
1. 点击「添加」按钮,打开弹窗。
|
||||
2. 在弹窗中点击 **「创建区块(Add block)」→ 数据区块 → 表单(添加)**。
|
||||
3. 选择 **「当前数据表(Current collection)」**。弹窗已经关联了对应的数据表上下文,无需手动指定。
|
||||
2. 在弹窗中点击 **「创建[区块](/interface-builder/blocks)(Add block)」→ 数据区块 → 表单(添加)**。
|
||||
3. 选择 **「当前[数据表](/data-sources/main/collection)(Current collection)」**。弹窗已经关联了对应的数据表上下文,无需手动指定。
|
||||
|
||||

|
||||
4. 在表单中点击 **「字段(Fields)」**,勾选以下字段:
|
||||
4. 在表单中点击 **「[字段](/data-sources/field)(Fields)」**,勾选以下字段:
|
||||
|
||||
| 字段 | 配置要点 |
|
||||
|------|---------|
|
||||
@@ -124,7 +124,7 @@
|
||||
|
||||
> **联动规则还能做什么?** 除了设置默认值和控制必填,还可以控制字段的显示/隐藏、动态赋值。例如:当状态为「已关闭」时,隐藏处理人字段。后续章节遇到时我们再展开。
|
||||
|
||||
## 4.3 详情区块
|
||||
## 4.3 [详情区块](/interface-builder/blocks/data-blocks/details)
|
||||
|
||||
上一章我们给表格行加了「查看」按钮,点击会打开抽屉。现在来配置抽屉里的内容。
|
||||
|
||||
@@ -270,3 +270,9 @@
|
||||
- **历史记录** — 自动追踪每一次变更,审计无忧
|
||||
|
||||
从「看得见」到「填得进」再到「查得到」——我们的工单系统已经具备了基本的可用性。
|
||||
|
||||
## 相关资源
|
||||
|
||||
- [表单区块](/interface-builder/blocks/data-blocks/form) — 表单区块详细配置
|
||||
- [详情区块](/interface-builder/blocks/data-blocks/details) — 详情区块配置
|
||||
- [联动规则](/interface-builder/linkage-rules) — 字段联动规则说明
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
# 第 5 章:用户与权限 — 谁能看什么
|
||||
|
||||
上一章我们把表单和详情页做好了,工单系统已经能正常录入和查看数据。但现在有个问题——所有人登录后看到的东西都一样。提交工单的普通员工能看到管理页面,技术员能删除分类……这可不行。
|
||||
上一章我们把表单和详情页做好了,工单系统已经能正常录入和查看数据。但现在有个问题——所有人登录后看到的东西都一样。提交工单的普通员工能看到管理[页面](/interface-builder/pages),技术员能删除分类……这可不行。
|
||||
|
||||
这一章,我们来给系统加上"门禁":**不同的人,看到不同的菜单,操作不同的数据**。
|
||||
这一章,我们来给系统加上"门禁":创建[角色](/users-permissions/role)、配置[菜单权限](/users-permissions/role/menu-permissions)和[数据范围](/users-permissions/role/data-scope),实现**不同的人,看到不同的[菜单](/interface-builder/menus),操作不同的数据**。
|
||||
|
||||
## 5.1 理解角色(Role)
|
||||
## 5.1 理解[角色](/users-permissions/role)(Role)
|
||||
|
||||
在 NocoBase 里,**角色就是一组权限的集合**。你不需要给每个用户单独配权限,而是先定义好几个角色,再把用户丢进对应的角色里。
|
||||
在 NocoBase 里,**角色就是一组[权限](/users-permissions/role)的集合**。你不需要给每个用户单独配权限,而是先定义好几个角色,再把用户丢进对应的角色里。
|
||||
|
||||
NocoBase 安装后自带三个角色:
|
||||
|
||||
@@ -64,9 +64,9 @@ NocoBase 安装后自带三个角色:
|
||||
|
||||
菜单权限管的是"能不能进这个页面",数据权限管的是"进了页面后能看到哪些数据"。
|
||||
|
||||
关键概念:**数据范围(Data Scope)**。
|
||||
关键概念:**[数据范围](/users-permissions/role/data-scope)(Data Scope)**。
|
||||
|
||||
在角色的权限配置中,切换到 **数据表操作权限** 选项卡。找到我们的"工单"表,点击进入单独配置。
|
||||
在角色的权限配置中,切换到 **[数据表](/data-sources/main/collection)操作权限** 选项卡。找到我们的"工单"表,点击进入单独配置。
|
||||
|
||||

|
||||
|
||||
@@ -90,7 +90,7 @@ NocoBase 安装后自带三个角色:
|
||||
|
||||
1. 找到"工单"表的 **查看** 权限
|
||||
2. 数据范围选择 → **自己的数据**
|
||||
3. 但这里有个细节——NocoBase 的"自己的数据"默认是按创建人过滤的。如果我们希望按"处理人"过滤,可以在全局操作权限里进一步调整,或者在前端页面用 **数据区块的筛选条件** 配合实现
|
||||
3. 但这里有个细节——NocoBase 的"自己的数据"默认是按创建人过滤的。如果我们希望按"处理人"过滤,可以在全局[操作权限](/users-permissions/role/action-permissions)里进一步调整,或者在前端页面用 **数据[区块](/interface-builder/blocks)的筛选条件** 配合实现
|
||||
|
||||

|
||||
|
||||
@@ -194,3 +194,8 @@ NocoBase 安装后自带三个角色:
|
||||
|
||||
下一章我们来学 **工作流(Workflow)**——让系统自动帮我们干活。比如工单提交后自动通知处理人,状态变更时自动记录日志。
|
||||
|
||||
## 相关资源
|
||||
|
||||
- [用户管理](/users-permissions/user) — 用户管理详解
|
||||
- [角色与权限](/users-permissions/role) — 角色配置说明
|
||||
- [数据范围](/users-permissions/role/data-scope) — 数据级权限控制
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
上一章我们给系统加上了权限,不同角色看到不同的内容。但所有操作还是靠人手动完成——新工单来了要自己去看,状态改了没人知道。
|
||||
|
||||
这一章,我们让系统**自动干活**。
|
||||
这一章,我们用 NocoBase 的[工作流](/workflow)让系统**自动干活**——配置[条件判断](/workflow/nodes/condition)和[自动更新](/workflow/nodes/update)节点,实现工单状态自动流转和创建时间自动记录。
|
||||
|
||||
## 6.1 什么是工作流(Workflow)
|
||||
## 6.1 什么是[工作流](/workflow)(Workflow)
|
||||
|
||||
工作流就是一套自动化的"如果……那么……"规则。
|
||||
|
||||
@@ -22,7 +22,7 @@ flowchart LR
|
||||
C -. 否 .-> E["⏹ 结束"]
|
||||
```
|
||||
|
||||
- **触发器**:工作流的入口。比如"有人创建了一条新工单"或"某条数据被更新了"
|
||||
- **[触发器](/workflow/triggers/collection)**:工作流的入口。比如"有人创建了一条新工单"或"某条数据被更新了"
|
||||
- **条件判断**:可选的过滤步骤。比如"只有处理人不为空时才继续"
|
||||
- **执行动作**:真正干活的步骤。比如"发送通知"或"更新某个字段"
|
||||
|
||||
@@ -40,9 +40,9 @@ NocoBase 提供了多种触发器类型,在创建工作流时选择:
|
||||
|
||||
| 触发器 | 说明 | 典型场景 |
|
||||
|-------|------|---------|
|
||||
| **数据表事件** | 数据新增、更新或删除时触发 | 新工单通知、状态变更记录 |
|
||||
| **定时任务** | 按 Cron 表达式或固定时间触发 | 每天生成日报、定期清理过期数据 |
|
||||
| **操作后事件** | 用户在界面执行操作后触发 | 表单提交后发送通知 |
|
||||
| [**数据表事件**](/workflow/triggers/collection) | 数据新增、更新或删除时触发 | 新工单通知、状态变更记录 |
|
||||
| [**定时任务**](/workflow/triggers/schedule) | 按 Cron 表达式或固定时间触发 | 每天生成日报、定期清理过期数据 |
|
||||
| [**操作后事件**](/workflow/triggers/action) | 用户在界面执行操作后触发 | 表单提交后发送通知 |
|
||||
| **审批** | 发起审批流程,支持多级审批 | 请假审批、采购审批 |
|
||||
| **自定义操作** | 绑定到自定义按钮,点击触发 | 一键归档、批量操作 |
|
||||
| **操作前事件** | 拦截用户操作,同步执行后再放行 | 提交前校验、自动补全字段 |
|
||||
@@ -77,9 +77,9 @@ NocoBase 的工作流是内置插件,不需要额外安装,开箱即用。
|
||||
|
||||
点击顶部的触发器卡片,打开配置抽屉:
|
||||
|
||||
- **数据表**:选择 主数据源 / 「工单」
|
||||
- **[数据表](/data-sources/main/collection)**:选择 主数据源 / 「工单」
|
||||
- **触发时机**:选择「新增或更新数据后」
|
||||
- **发生变动的字段**:勾选「处理人(Assignee)」——只有处理人字段变了才触发,避免其他字段的修改产生不必要的通知(新增数据时,所有字段都被视为发生变动,所以新建工单也会触发)
|
||||
- **发生变动的[字段](/data-sources/field)**:勾选「处理人(Assignee)」——只有处理人字段变了才触发,避免其他字段的修改产生不必要的通知(新增数据时,所有字段都被视为发生变动,所以新建工单也会触发)
|
||||
- **满足以下条件才触发**:模式选「满足组内**任意**条件」,添加两个条件:
|
||||
- `assignee_id` 不为空
|
||||
- `Assignee / ID` 不为空
|
||||
@@ -312,4 +312,10 @@ NocoBase 支持多种通知渠道类型:
|
||||
|
||||
## 下一章预告
|
||||
|
||||
系统能自动干活了,但我们还缺一个"全局视角"——一共多少工单?哪个分类最多?每天新增多少?下一章我们用图表区块搭一个 **数据仪表盘**,一眼看全局。
|
||||
系统能自动干活了,但我们还缺一个"全局视角"——一共多少工单?哪个分类最多?每天新增多少?下一章我们用图表[区块](/interface-builder/blocks)搭一个 **数据仪表盘**,一眼看全局。
|
||||
|
||||
## 相关资源
|
||||
|
||||
- [工作流概述](/workflow) — 工作流核心概念与使用场景
|
||||
- [数据表事件触发器](/workflow/triggers/collection) — 数据变更触发配置
|
||||
- [更新数据节点](/workflow/nodes/update) — 自动更新数据配置
|
||||
|
||||
@@ -2,30 +2,30 @@
|
||||
|
||||
上一章我们用工作流让系统自动通知、自动记录时间。系统越来越智能了,但还缺一样东西——**全局视角**。
|
||||
|
||||
工单有多少?处理了多少?哪类问题最多?每天新增几条?这些问题靠翻列表是回答不了的。我们需要一个 **数据看板**,用图表把数据变成一眼就能看懂的画面。
|
||||
工单有多少?处理了多少?哪类问题最多?每天新增几条?这些问题靠翻列表是回答不了的。这一章,我们用[图表区块](/data-visualization)(饼图、折线图、柱状图)和 [Markdown 区块](/interface-builder/blocks/other/markdown)搭建一个**数据看板**,把数据变成一眼就能看懂的画面。
|
||||
|
||||
## 7.1 添加仪表盘页面
|
||||
|
||||
首先,我们在顶部导航栏添加一个新菜单项。
|
||||
首先,我们在顶部导航栏添加一个新[菜单](/interface-builder/menus)项。
|
||||
|
||||
进入配置模式,在顶部菜单栏点击 **「添加菜单项」**(`+` 图标),选择 **「新版页面(v2)」**,命名为「数据看板」。
|
||||
进入[配置模式](/get-started/how-nocobase-works),在顶部菜单栏点击 **「添加菜单项」**(`+` 图标),选择 **「新版页面(v2)」**,命名为「数据看板」。
|
||||
|
||||

|
||||
|
||||
这个页面专门用来放图表,就是我们的仪表盘主场。
|
||||
这个[页面](/interface-builder/pages)专门用来放图表,就是我们的仪表盘主场。
|
||||
|
||||
## 7.2 饼图:工单状态分布
|
||||
|
||||
第一个图表,我们用饼图来展示"待处理、处理中、已完成"各有多少。
|
||||
|
||||
在数据看板页面,点击 **创建区块(Add block) → 图表**。
|
||||
在数据看板页面,点击 **创建[区块](/interface-builder/blocks)(Add block) → [图表](/data-visualization)**。
|
||||
|
||||
添加后,点击区块右上角的 **配置** 按钮,右侧会打开图表配置面板。
|
||||
|
||||
### 配置数据查询
|
||||
|
||||
- **数据表**:选择「工单」
|
||||
- **度量(Measures)**:选择任意不重复的字段(比如 ID ),聚合方式选 **计数(Count)**
|
||||
- **[数据表](/data-sources/main/collection)**:选择「工单」
|
||||
- **度量(Measures)**:选择任意不重复的[字段](/data-sources/field)(比如 ID ),聚合方式选 **计数(Count)**
|
||||
- **维度(Dimensions)**:选择「状态」字段
|
||||
|
||||

|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
### 配置筛选条件
|
||||
|
||||
点击表格区块右上角的配置项,找到 **设置数据范围**,添加一条筛选条件:
|
||||
点击表格区块右上角的配置项,找到 **设置数据范围**,添加一条[筛选](/interface-builder/blocks/filter-blocks/form)条件:
|
||||
|
||||
- **状态** 不等于 **已完成**
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
|
||||
图表之外,我们还可以在仪表盘上放一些文字信息。
|
||||
|
||||
添加一个 **Markdown 区块**,写入系统公告或使用说明:
|
||||
添加一个 **[Markdown 区块](/interface-builder/blocks/other/markdown)**,写入系统公告或使用说明:
|
||||
|
||||
```markdown
|
||||
## IT 工单系统
|
||||
@@ -173,7 +173,7 @@ ctx.element.innerHTML = `
|
||||
|
||||
仪表盘不仅是看数据的地方,也应该是操作的起点。我们加一个 **操作面板(Action Panel)**,让用户直接从首页提交工单、跳转到工单列表。
|
||||
|
||||
在页面中添加一个 **操作面板** 区块(创建区块 → 其他区块 → 操作面板),然后在操作面板中添加两个操作:
|
||||
在页面中添加一个 **操作面板** 区块(创建区块 → 其他区块 → 操作面板),然后在操作面板中添加两个[操作](/interface-builder/actions):
|
||||
|
||||

|
||||
|
||||
@@ -265,3 +265,9 @@ ctx.element.innerHTML = `
|
||||
## 下一章预告
|
||||
|
||||
到这里,我们的工单系统功能已经很完整了:数据建模、页面搭建、表单录入、权限控制、自动化工作流、数据仪表盘,全都有了。最后一章,我们来做一些 **收尾优化**,然后聊聊 **部署上线** 的事儿。
|
||||
|
||||
## 相关资源
|
||||
|
||||
- [数据可视化](/data-visualization) — 图表配置详解
|
||||
- [Markdown 区块](/interface-builder/blocks/other/markdown) — Markdown 区块用法
|
||||
- [区块布局](/interface-builder/blocks) — 页面布局与区块配置
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
[
|
||||
{"type":"file","name":"index","label":"教程简介"},
|
||||
{"type":"file","name":"01-getting-started","label":"第 1 章:认识 NocoBase — 5 分钟跑起来"},
|
||||
{"type":"file","name":"02-data-modeling","label":"第 2 章:数据建模 — 两张表搞定工单系统"},
|
||||
{"type":"file","name":"03-building-pages","label":"第 3 章:搭建页面 — 从空白到可用"},
|
||||
{"type":"file","name":"04-forms-and-details","label":"第 4 章:表单与详情 — 录入、展示、一步到位"},
|
||||
{"type":"file","name":"05-roles-and-permissions","label":"第 5 章:用户与权限 — 谁能看什么"},
|
||||
{"type":"file","name":"06-workflows","label":"第 6 章:工作流 — 让系统自动干活"},
|
||||
{"type":"file","name":"07-dashboard","label":"第 7 章:仪表盘 — 一眼看全局"}
|
||||
{"type":"file","name":"01-getting-started","label":"第 1 章:认识 NocoBase"},
|
||||
{"type":"file","name":"02-data-modeling","label":"第 2 章:数据建模"},
|
||||
{"type":"file","name":"03-building-pages","label":"第 3 章:搭建页面"},
|
||||
{"type":"file","name":"04-forms-and-details","label":"第 4 章:表单与详情"},
|
||||
{"type":"file","name":"05-roles-and-permissions","label":"第 5 章:用户与权限"},
|
||||
{"type":"file","name":"06-workflows","label":"第 6 章:工作流"},
|
||||
{"type":"file","name":"07-dashboard","label":"第 7 章:仪表盘"}
|
||||
]
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
# NocoBase 2.0 入门教程
|
||||
|
||||
欢迎来到 **NocoBase 2.0 入门教程**!
|
||||
|
||||
本教程将带你从零开始,用 NocoBase 2.0 搭建一个**极简的 IT 工单系统(HelpDesk)**。整个系统只需要 **2 张数据表**,不写一行代码,却能实现工单提交、分类管理、变更追踪、权限控制,甚至还有数据仪表盘。
|
||||
本教程将带你从零开始,用 NocoBase 2.0 搭建一个**极简的 IT 工单系统(HelpDesk)**。整个系统只需要 **2 张数据表**,不写一行代码,即可实现工单提交、分类管理、变更追踪、权限控制和数据仪表盘。
|
||||
|
||||
## 教程定位
|
||||
|
||||
- **目标读者**:业务人员或非程序员,不需要编程知识
|
||||
- **目标读者**:业务人员、技术人员或任何对 NocoBase 感兴趣的人(建议具备一定计算机背景知识)
|
||||
- **案例项目**:极简 IT 工单系统(HelpDesk),仅 2 张表
|
||||
- **预计耗时**:2-3 小时(非技术人员),1-1.5 小时(技术人员)
|
||||
- **前置要求**:Docker 环境或[在线 Demo](https://demo-cn.nocobase.com/new)(有效期 24 小时,无需安装)
|
||||
- **版本**:NocoBase 2.0
|
||||
- **风格**:轻松友好,多图少字,每章 15-20 分钟
|
||||
|
||||
## 你将学到什么
|
||||
|
||||
@@ -34,6 +33,61 @@
|
||||
| 工单(tickets) | 标题、描述、状态、优先级 |
|
||||
| 工单分类(categories) | 分类名称、颜色 |
|
||||
|
||||
准备好了吗?让我们从 [第 1 章:认识 NocoBase](./01-getting-started/) 开始吧!
|
||||
## 常见问题
|
||||
|
||||
> 完成本教程后,可以继续探索 [AI 员工](/ai-employees/quick-start),为你的系统接入 AI 能力。
|
||||
### NocoBase 适合什么场景?
|
||||
|
||||
适合企业内部工具、数据管理系统、审批流程、CRM、ERP 等需要灵活定制的场景,支持私有化部署。
|
||||
|
||||
### 完成本教程需要什么基础?
|
||||
|
||||
不需要编程,但建议具备一定的计算机基础知识。教程会逐步讲解数据表、字段、关联关系等概念,有数据库或 Excel 使用经验会更容易上手。
|
||||
|
||||
### 教程中的系统可以扩展吗?
|
||||
|
||||
可以。本教程只用了 2 张表,但 NocoBase 支持复杂的多表关联、外部 API 集成、自定义插件等。
|
||||
|
||||
### 需要什么部署环境?
|
||||
|
||||
推荐 Docker(Docker Desktop 或 Linux 服务器),最低 2 核 4GB 内存。也支持 Git 源码运行。如果只是学习体验,可以直接申请[在线 Demo](https://demo-cn.nocobase.com/new),无需安装,有效期 24 小时。
|
||||
|
||||
### 免费版有什么限制?
|
||||
|
||||
核心功能完全免费开源。商业版提供额外高级插件和技术支持,详见[商业版定价](https://www.nocobase.com/cn/commercial)。
|
||||
|
||||
## 相关技术栈
|
||||
|
||||
NocoBase 2.0 基于以下技术构建:
|
||||
|
||||
- **前端框架**: React + [Ant Design](https://ant.design/) 5.0
|
||||
- **后端**: Node.js + Koa
|
||||
- **数据库**: PostgreSQL(也支持 [MySQL](/get-started/installation/docker)、MariaDB)
|
||||
- **部署方式**: [Docker](/get-started/installation/docker)、Kubernetes
|
||||
|
||||
## 类似平台参考
|
||||
|
||||
如果你正在评估无代码/低代码平台,以下是一些对比参考:
|
||||
|
||||
| 平台 | 特点 | 与 NocoBase 的差异 |
|
||||
|------|------|-------------------|
|
||||
| [Appsmith](https://www.appsmith.com/) | 开源无代码,前端定制能力强 | NocoBase 更侧重数据模型驱动 |
|
||||
| [Retool](https://retool.com/) | 内部工具平台 | NocoBase 完全开源,无使用限制 |
|
||||
| [Airtable](https://airtable.com/) | 在线协作数据库 | NocoBase 支持私有化部署,数据自主 |
|
||||
| [Budibase](https://budibase.com/) | 开源低代码,支持自托管 | NocoBase 插件化架构,扩展性更强 |
|
||||
|
||||
## 相关文档
|
||||
|
||||
### 入门指南
|
||||
- [NocoBase 是如何工作的](/get-started/how-nocobase-works) — 核心概念介绍
|
||||
- [快速开始](/get-started/quickstart) — 安装与初始配置
|
||||
- [系统要求](/get-started/system-requirements) — 环境配置要求
|
||||
|
||||
### 更多教程
|
||||
- [NocoBase 1.x 教程](/tutorials/v1/) — 以任务管理系统为案例的进阶教程
|
||||
|
||||
### 方案参考
|
||||
- [工单系统方案](/solution/ticket-system/) — AI 驱动的智能工单管理方案
|
||||
- [CRM 系统方案](/solution/crm/) — 客户关系管理基座
|
||||
- [AI 员工](/ai-employees/quick-start) — 为系统接入 AI 能力
|
||||
|
||||
准备好了吗?从 [第 1 章:认识 NocoBase](./01-getting-started/) 开始吧!
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
# Chapter 1: Getting Started — Build a Working System in 5 Minutes
|
||||
|
||||
Welcome to the NocoBase 2.0 beginner tutorial!
|
||||
In this series, we'll build a **minimal IT HelpDesk system** from scratch using NocoBase. The entire system needs only **2 [data tables](/data-sources/main/collection)** and zero lines of code — yet it will support ticket submission, category management, change tracking, access control, and even a [dashboard](/data-visualization).
|
||||
|
||||
In this series, we'll build a **minimal IT HelpDesk system** from scratch using NocoBase. The entire system needs only **2 data tables** and zero lines of code — yet it will support ticket submission, category management, change tracking, access control, and even a data dashboard.
|
||||
|
||||
Ready? Let's go!
|
||||
This chapter walks you through deploying NocoBase with [Docker](/get-started/installation/docker), completing your first login, and understanding the difference between [UI Editor mode and Usage mode](/get-started/how-nocobase-works).
|
||||
|
||||
|
||||
## 1.1 What Is NocoBase
|
||||
@@ -19,10 +17,10 @@ Have you ever been in one of these situations?
|
||||
|
||||
Compared to other no-code tools, NocoBase has a few core principles:
|
||||
|
||||
- **Data model driven**: Define your data structure first, then use blocks to display data, then actions to process it — UI and data are fully decoupled
|
||||
- **WYSIWYG**: Pages are your canvas. Click anywhere to edit, as intuitive as building a Notion page
|
||||
- **Everything is a plugin**: All features are plugins, similar to WordPress — install what you need
|
||||
- **AI built into your workflow**: Built-in AI employees that can perform analysis, translation, data entry, and more
|
||||
- **Data model driven**: Define your data structure first, then use [blocks](/interface-builder/blocks) to display data, then [actions](/interface-builder/actions) to process it — UI and data are fully decoupled
|
||||
- **WYSIWYG**: [Pages](/interface-builder/pages) are your canvas. Click anywhere to edit, as intuitive as building a Notion page
|
||||
- **Everything is a plugin**: All features are [plugins](/development/plugin), similar to WordPress — install what you need
|
||||
- **AI built into your workflow**: Built-in [AI employees](/ai-employees/quick-start) that can perform analysis, translation, data entry, and more
|
||||
- **Open source + self-hosted**: Core code is fully open source, all data stays on your own server
|
||||
|
||||
|
||||
@@ -43,7 +41,7 @@ Open your terminal (PowerShell on Windows, Terminal on Mac) and run:
|
||||
mkdir my-project && cd my-project
|
||||
|
||||
# Download docker-compose.yml (defaults to PostgreSQL)
|
||||
curl -fsSL https://static-docs.nocobase.com/docker-compose/en/beta-postgres.yml -o docker-compose.yml
|
||||
curl -fsSL https://static-docs.nocobase.com/docker-compose/en/latest-postgres.yml -o docker-compose.yml
|
||||
```
|
||||
|
||||
> **Other databases?** Replace `postgres` in the URL with `mysql` or `mariadb`.
|
||||
@@ -51,9 +49,9 @@ curl -fsSL https://static-docs.nocobase.com/docker-compose/en/beta-postgres.yml
|
||||
>
|
||||
> | Database | Download URL |
|
||||
> |----------|-------------|
|
||||
> | PostgreSQL (recommended) | `https://static-docs.nocobase.com/docker-compose/en/beta-postgres.yml` |
|
||||
> | MySQL | `https://static-docs.nocobase.com/docker-compose/en/beta-mysql.yml` |
|
||||
> | MariaDB | `https://static-docs.nocobase.com/docker-compose/en/beta-mariadb.yml` |
|
||||
> | PostgreSQL (recommended) | `https://static-docs.nocobase.com/docker-compose/en/latest-postgres.yml` |
|
||||
> | MySQL | `https://static-docs.nocobase.com/docker-compose/en/latest-mysql.yml` |
|
||||
> | MariaDB | `https://static-docs.nocobase.com/docker-compose/en/latest-mariadb.yml` |
|
||||
|
||||
### Step 2: Start It Up
|
||||
|
||||
@@ -109,7 +107,7 @@ Here's what it looks like on a demo system:
|
||||
|
||||

|
||||
|
||||
As shown above: menus, table action bars, and the bottom of the page all show orange indicators. Click them to create or configure elements.
|
||||
As shown above: [menus](/interface-builder/menus), table action bars, and the bottom of the page all show orange indicators. Click them to create or configure elements.
|
||||
|
||||
> **Remember this pattern**: In NocoBase, whenever you want to modify something on the page, enter UI Editor mode, find the small icon in its top-right corner, and click it.
|
||||
|
||||
@@ -144,7 +142,7 @@ Over the course of this tutorial, we'll build an **IT HelpDesk system** step by
|
||||
|
||||
- ✅ Ticket submission: Users fill in title, description, category, and priority
|
||||
- ✅ Ticket list: Filter by status or category at a glance
|
||||
- ✅ Access control: Regular users see only their own tickets; admins see everything
|
||||
- ✅ Access control: Regular [users](/users-permissions/user) see only their own tickets; admins see everything
|
||||
- ✅ Dashboard: Real-time statistics on ticket distribution and trends
|
||||
- ✅ Audit log (built-in)
|
||||
|
||||
@@ -155,7 +153,7 @@ The entire system needs just **2 data tables**:
|
||||
| Categories | Ticket categories (e.g., Network Issue, Software Bug) | 2 |
|
||||
| Tickets | The core table — each row is one ticket | 7-8 |
|
||||
|
||||
That's right, just 2 tables. Common capabilities like users, permissions, file management, departments, email, and audit logs are all provided by built-in NocoBase plugins — no need to reinvent the wheel. We only need to focus on our business data.
|
||||
That's right, just 2 tables. Common capabilities like users, [permissions](/users-permissions/role), file management, departments, email, and audit logs are all provided by built-in NocoBase plugins — no need to reinvent the wheel. We only need to focus on our business data.
|
||||
|
||||
|
||||
## Summary
|
||||
@@ -167,6 +165,12 @@ In this chapter we:
|
||||
3. Understood the two interface modes (UI Editor / Usage) and the basic layout
|
||||
4. Previewed the HelpDesk system we're going to build
|
||||
|
||||
**Next chapter**: We'll get hands-on — enter the Data Source Manager and create our first data table. This is the skeleton of the entire system and NocoBase's most fundamental capability.
|
||||
**Next chapter**: We'll get hands-on — enter the [Data Source Manager](/data-sources) and create our first data table. This is the skeleton of the entire system and NocoBase's most fundamental capability.
|
||||
|
||||
See you in Chapter 2!
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [Docker Installation Guide](/get-started/installation/docker) — Full installation options and environment variables
|
||||
- [System Requirements](/get-started/system-requirements) — Hardware and software requirements
|
||||
- [How NocoBase Works](/get-started/how-nocobase-works) — Core concepts: data sources, blocks, actions
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
In the last chapter, we installed NocoBase and got familiar with the interface. Now it's time to build the skeleton of our HelpDesk system — the **data model**.
|
||||
|
||||
The data model is the foundation: figure out what data you need to store and how it's related, then building pages and setting permissions becomes straightforward.
|
||||
This chapter creates two [collections](/data-sources/main/collection) — Tickets and Categories — and configures [field types](/data-sources/field) ([single-line text](/data-sources/field/basic/input), [dropdown](/data-sources/field/choices/select), [many-to-one](/data-sources/field/associations/m2o) relations). The data model is the foundation: figure out what data you need and how it's related, then building pages and setting permissions becomes straightforward.
|
||||
|
||||
|
||||
## 2.1 What Are Collections and Fields
|
||||
@@ -30,7 +30,7 @@ But NocoBase is much more powerful than Excel. It supports multiple **collection
|
||||
|
||||
Today we'll use **General** and **Tree** collections. We'll cover the others when needed.
|
||||
|
||||
**Enter Data Source Manager**: Click the **"Data Source Manager"** icon in the bottom-left corner (the database icon next to the gear). You'll see the "Main data source" — this is where all our tables live.
|
||||
**Enter Data Source Manager**: Click the **"Data Source Manager"** icon in the bottom-left corner (the database icon next to the gear). You'll see the "Main [data source](/data-sources)" — this is where all our tables live.
|
||||
|
||||

|
||||
|
||||
@@ -227,7 +227,7 @@ Let's look at a specific ticket — on the left are the ticket's attributes. "Ca
|
||||
|
||||

|
||||
|
||||
On the interface, you see names like "Network" and "Alice", but behind the scenes it's all connected by IDs. **Multiple tickets can point to the same category or the same user** — this relationship is called **Many-to-one**.
|
||||
On the interface, you see names like "Network" and "Alice", but behind the scenes it's all connected by IDs. **Multiple tickets can point to the same category or the same user** — this relationship is called **[Many-to-one](/data-sources/field/associations/m2o)**.
|
||||
|
||||
### Adding Relation Fields
|
||||
|
||||
@@ -310,3 +310,10 @@ Key concepts we learned:
|
||||
The skeleton is ready, but the tables are still empty. In the next chapter, we'll build pages to make the data visible.
|
||||
|
||||
See you in Chapter 3!
|
||||
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [Data Sources Overview](/data-sources) — Core data modeling concepts in NocoBase
|
||||
- [Field Types](/data-sources/field) — Complete field type reference
|
||||
- [Many-to-One Relations](/data-sources/field/associations/m2o) — Relationship configuration guide
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Chapter 3: Building Pages — From Blank to Functional
|
||||
|
||||
In the last chapter, we built the skeleton of our data tables — but right now the data only lives in the "backend." Users can't see it at all. In this chapter, we'll bring our data **front and center**, turning it into a real, usable ticket list.
|
||||
In the last chapter, we built the skeleton of our data tables — but right now the data only lives in the "backend." Users can't see it at all. In this chapter, we'll bring our data **front and center**: create a [Table block](/interface-builder/blocks/data-blocks/table) to display ticket data, configure field visibility, sorting, [filtering](/interface-builder/blocks/filter-blocks/form), and pagination, turning it into a real, usable ticket list.
|
||||
|
||||
## 3.1 What Is a Block
|
||||
|
||||
@@ -23,10 +23,10 @@ Remember this analogy: **Blocks = building bricks**. We're about to use them to
|
||||
|
||||
First, we need to create an entry point for "Tickets" in the system.
|
||||
|
||||
1. Click the **UI Editor** toggle in the top-right corner to enter design mode (the entire page will show orange editable borders).
|
||||
1. Click the **[UI Editor](/get-started/how-nocobase-works)** toggle in the top-right corner to enter design mode (the entire page will show orange editable borders).
|
||||
2. Click the **"Add menu item"** button (`+` icon) in the top navigation bar, select **"Add group"**, and name it **"Tickets"**.
|
||||
3. The "Tickets" menu appears immediately in the top navigation bar. **Click on it** — a sidebar menu will expand on the left.
|
||||
4. In the sidebar, click the orange **"Add menu item"** button, select **"Modern page (v2)"**, and add two sub-pages one by one:
|
||||
3. The "Tickets" [menu](/interface-builder/menus) appears immediately in the top navigation bar. **Click on it** — a sidebar menu will expand on the left.
|
||||
4. In the sidebar, click the orange **"Add menu item"** button, select **"Modern page (v2)"**, and add two sub-[pages](/interface-builder/pages) one by one:
|
||||
- **All Tickets** — displays all tickets
|
||||
- **Categories** — manages category data
|
||||
|
||||
@@ -42,7 +42,7 @@ Now go to the "All Tickets" page and add a Table block:
|
||||
|
||||
1. On the blank page, click **"Add block"**.
|
||||
2. Select **Data blocks -> Table**.
|
||||
3. In the collection list that pops up, select **"Tickets"** (the table we created in the last chapter).
|
||||
3. In the [collection](/data-sources/main/collection) list that pops up, select **"Tickets"** (the table we created in the last chapter).
|
||||
|
||||

|
||||
|
||||
@@ -52,7 +52,7 @@ Once the Table block is added, you'll see an empty table on the page. Don't worr
|
||||
|
||||
## 3.4 Configuring Display Columns
|
||||
|
||||
By default, a table won't automatically show all fields. We need to manually choose which columns to display:
|
||||
By default, a table won't automatically show all [fields](/data-sources/field). We need to manually choose which columns to display:
|
||||
|
||||
1. On the right side of the Table block header, click **"Fields"**.
|
||||
2. Check the fields you want to show:
|
||||
@@ -82,7 +82,7 @@ Click the column settings for the "Category" column and find **"Title field"**.
|
||||
|
||||
**Option B: Change it in the data source (global, recommended)**
|
||||
|
||||
Go to **Settings -> Data sources -> Collections -> Categories**, and change the **"Title field"** to **Name**. All blocks referencing the Categories collection will then display names by default. After the change, you'll need to re-add the field on the page for it to take effect.
|
||||
Go to **Settings -> [Data sources](/data-sources) -> Collections -> Categories**, and change the **"Title field"** to **Name**. All blocks referencing the Categories collection will then display names by default. After the change, you'll need to re-add the field on the page for it to take effect.
|
||||
|
||||

|
||||
|
||||
@@ -125,7 +125,7 @@ You can even search through relation fields — click "Category," then in the ne
|
||||
|
||||
### Don't Want Auto-Filtering?
|
||||
|
||||
If you'd prefer users to click a button before filtering takes effect, click **"Actions"** at the bottom-right of the Filter form and enable the **"Filter"** and **"Reset"** buttons. Users will then need to click "Filter" to apply their criteria.
|
||||
If you'd prefer users to click a button before filtering takes effect, click **"[Actions](/interface-builder/actions)"** at the bottom-right of the Filter form and enable the **"Filter"** and **"Reset"** buttons. Users will then need to click "Filter" to apply their criteria.
|
||||
|
||||

|
||||
|
||||
@@ -159,7 +159,7 @@ This way, newly submitted tickets always appear at the top, making them easier t
|
||||
Viewing a list isn't enough — we also need to click into tickets to see details and make edits.
|
||||
|
||||
1. In the actions column, click the second "+" icon.
|
||||
2. Click to add actions: **View**, **Edit**, **Delete**.
|
||||
2. Click to add actions: **View**, **[Edit](/interface-builder/actions/edit)**, **[Delete](/interface-builder/actions/delete)**.
|
||||
3. Each row will now have "View", "Edit", and "Delete" buttons in the actions column.
|
||||
|
||||

|
||||
@@ -189,7 +189,7 @@ Remember the "Categories" collection we created in Chapter 2? It's a **tree tabl
|
||||
|
||||
Once enabled, the table will display categories in an indented hierarchy showing parent-child relationships, instead of listing all records flat.
|
||||
|
||||
3. Check the fields you want to display (e.g., Name, Description), and configure row actions (Add new, Edit, Delete).
|
||||
3. Check the fields you want to display (e.g., Name, Description), and configure row actions ([Add new](/interface-builder/actions/add-new), Edit, Delete).
|
||||
4. **Layout tip**: Put "Name" in the first column and "Actions" in the second. The categories table doesn't have many fields, so a two-column layout is more compact and user-friendly.
|
||||
|
||||
[Screenshot: Categories tree table configured]
|
||||
@@ -211,3 +211,9 @@ Easier than you expected, right? The entire process required zero lines of code
|
||||
|
||||
Being able to "see" data isn't enough — users also need to **submit new tickets**. In the next chapter, we'll build Form blocks, configure field linkage rules, and enable change history to track every modification to a ticket.
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [Blocks Overview](/interface-builder/blocks) — All block types explained
|
||||
- [Table Block](/interface-builder/blocks/data-blocks/table) — Table block configuration guide
|
||||
- [Filter Block](/interface-builder/blocks/filter-blocks/form) — Filter form setup
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Chapter 4: Forms & Details — Input, Display, All in One
|
||||
|
||||
In the last chapter, we built the ticket list — data is now visible. But how do users **submit new tickets**? In this chapter, we'll solve the "entering data" problem — building Form blocks, configuring field linkage, and even tracking every change made to a ticket.
|
||||
In the last chapter, we built the ticket list — data is now visible. But how do users **submit new tickets**? In this chapter, we'll solve the "entering data" problem — building [Form blocks](/interface-builder/blocks/data-blocks/form) and [Details blocks](/interface-builder/blocks/data-blocks/details), configuring field layouts and [linkage rules](/interface-builder/linkage-rules), and using [change history](/collection-templates/audit-log) to track every modification.
|
||||
|
||||
## 4.1 Creating a New Ticket Form
|
||||
|
||||
@@ -8,21 +8,21 @@ We want to add a "New" button to the ticket list page. Clicking it will pop up a
|
||||
|
||||
### Adding the "Add new" Action Button
|
||||
|
||||
1. Make sure you're in UI Editor mode (top-right toggle is on).
|
||||
2. Go to the "All Tickets" page, and click **"Actions"** above the Table block.
|
||||
1. Make sure you're in [UI Editor](/get-started/how-nocobase-works) mode (top-right toggle is on).
|
||||
2. Go to the "All Tickets" page, and click **"[Actions](/interface-builder/actions)"** above the Table block.
|
||||
3. Check the **"Add new"** action button.
|
||||
4. An "Add new" button will appear above the table. Clicking it opens a popup.
|
||||
4. An "Add new" button will appear above the table. Clicking it opens a [popup](/interface-builder/actions/pop-up).
|
||||
|
||||

|
||||
|
||||
### Configuring the Form in the Popup
|
||||
|
||||
1. Click the "Add new" button to open the popup.
|
||||
2. In the popup, click **"Add block" -> Data blocks -> Form (Add new)**.
|
||||
2. In the popup, click **"Add block" -> Data blocks -> [Form (Add new)](/interface-builder/blocks/data-blocks/form)**.
|
||||
3. Select **"Current collection"**. The popup already knows which collection it's associated with — no need to specify manually.
|
||||
|
||||

|
||||
4. In the form, click **"Fields"** and check the following fields:
|
||||
4. In the form, click **"[Fields](/data-sources/field)"** and check the following fields:
|
||||
|
||||
| Field | Configuration Notes |
|
||||
|-------|-------------------|
|
||||
@@ -36,7 +36,7 @@ We want to add a "New" button to the ticket list page. Clicking it will pop up a
|
||||
|
||||

|
||||
|
||||
You'll notice a red asterisk `*` next to "Title" automatically — because we set it as required when creating the field in Chapter 2. Forms automatically inherit required rules from the collection's field settings; no extra configuration needed.
|
||||
You'll notice a red asterisk `*` next to "Title" automatically — because we set it as required when creating the field in Chapter 2. Forms automatically inherit required rules from the [collection](/data-sources/main/collection)'s field settings; no extra configuration needed.
|
||||
|
||||

|
||||
|
||||
@@ -128,7 +128,7 @@ Finally, apply what we've learned and adjust the layout a bit.
|
||||
In the last chapter, we added a "View" button to table rows that opens a Drawer. Now let's configure what goes inside the Drawer.
|
||||
|
||||
1. In the table, click the **"View"** button on any row to open the Drawer.
|
||||
2. In the Drawer, click **"Add block" -> Data blocks -> Details**.
|
||||
2. In the Drawer, click **"Add block" -> Data blocks -> [Details](/interface-builder/blocks/data-blocks/details)**.
|
||||
3. Select **"Current collection"**.
|
||||
|
||||

|
||||
@@ -260,6 +260,12 @@ In this chapter, we completed the full data lifecycle:
|
||||
- **Form** — Users can submit new tickets with default values and validation
|
||||
- **Linkage rules** — Urgent tickets automatically require a description
|
||||
- **Details block** — Clearly displays a ticket's complete information
|
||||
- **Change history** — Automatically tracks every modification for worry-free auditing
|
||||
- **[Change history](/collection-templates/audit-log)** — Automatically tracks every modification for worry-free auditing
|
||||
|
||||
From "visible" to "enterable" to "traceable" — our ticket system now has basic usability.
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [Form Block](/interface-builder/blocks/data-blocks/form) — Form block configuration guide
|
||||
- [Details Block](/interface-builder/blocks/data-blocks/details) — Details block setup
|
||||
- [Linkage Rules](/interface-builder/linkage-rules) — Field linkage configuration
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
# Chapter 5: Users & Permissions — Who Sees What
|
||||
|
||||
In the last chapter, we built forms and detail pages — our ticket system can now handle data entry and viewing. But there's a problem: everyone sees the same thing after logging in. Regular employees who submit tickets can access the admin pages, technicians can delete categories... that's not going to work.
|
||||
In the last chapter, we built forms and detail [pages](/interface-builder/pages) — our ticket system can now handle data entry and viewing. But there's a problem: everyone sees the same thing after logging in. Regular employees who submit tickets can access the admin pages, technicians can delete categories... that's not going to work.
|
||||
|
||||
In this chapter, we'll add "access control" to the system: **different people see different menus and operate on different data**.
|
||||
In this chapter, we'll add "access control": create [roles](/users-permissions/role), configure [menu permissions](/users-permissions/role/menu-permissions) and [data scope](/users-permissions/role/data-scope) restrictions — **different people see different [menus](/interface-builder/menus) and operate on different data**.
|
||||
|
||||
## 5.1 Understanding Roles
|
||||
|
||||
In NocoBase, **a role is a collection of permissions**. You don't need to configure permissions for each user individually — instead, you define a few roles first, then assign users to the appropriate roles.
|
||||
In NocoBase, **a [role](/users-permissions/role) is a collection of [permissions](/users-permissions/role)**. You don't need to configure permissions for each user individually — instead, you define a few roles first, then assign users to the appropriate roles.
|
||||
|
||||
NocoBase comes with three built-in roles after installation:
|
||||
|
||||
@@ -64,9 +64,9 @@ Click on a role to enter its permission configuration page, and find the **Menu
|
||||
|
||||
Menu permissions control "can I access this page?" while data permissions control "what data can I see once I'm on the page?"
|
||||
|
||||
Key concept: **Data Scope**.
|
||||
Key concept: **[Data Scope](/users-permissions/role/data-scope)**.
|
||||
|
||||
In the role's permission settings, switch to the **Action permissions** tab. Find our "Tickets" collection and click to configure it individually.
|
||||
In the role's permission settings, switch to the **[Action permissions](/users-permissions/role/action-permissions)** tab. Find our "Tickets" [collection](/data-sources/main/collection) and click to configure it individually.
|
||||
|
||||

|
||||
|
||||
@@ -88,7 +88,7 @@ About global configuration: if you only configure the Tickets collection, other
|
||||
|
||||
1. Find the **View** permission for the "Tickets" collection
|
||||
2. Set the data scope to **Own records**
|
||||
3. There's a nuance here — NocoBase's "Own records" filters by creator by default. If we want to filter by "Assignee" instead, we can further adjust this in the global operation permissions, or achieve it on the frontend by setting **filter conditions on the data block**
|
||||
3. There's a nuance here — NocoBase's "Own records" filters by creator by default. If we want to filter by "Assignee" instead, we can further adjust this in the global operation permissions, or achieve it on the frontend by setting **filter conditions on the data [block](/interface-builder/blocks)**
|
||||
|
||||

|
||||
|
||||
@@ -108,7 +108,7 @@ Before testing permissions, let's add a handy feature to the ticket list: **assi
|
||||
|
||||
The implementation is simple — add a custom popup button to the table row actions:
|
||||
|
||||
1. Enter UI Editor mode. In the ticket list table's actions column, click **"+"** to add a **"Popup"** action button.
|
||||
1. Enter [UI Editor](/get-started/how-nocobase-works) mode. In the ticket list table's actions column, click **"+"** to add a **"Popup"** action button.
|
||||
|
||||

|
||||
|
||||
@@ -190,3 +190,9 @@ At this point, our ticket system is shaping up nicely — it can handle data ent
|
||||
## Next Chapter Preview
|
||||
|
||||
In the next chapter, we'll learn about **Workflows** — letting the system do work for us automatically. For example, automatically notifying the assignee when a ticket is submitted, or logging a timestamp when the status changes.
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [User Management](/users-permissions/user) — User administration guide
|
||||
- [Roles & Permissions](/users-permissions/role) — Role configuration reference
|
||||
- [Data Scope](/users-permissions/role/data-scope) — Row-level permission control
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
In the last chapter, we added permissions so different roles see different content. But all operations are still done manually — when a new ticket comes in, someone has to go check; when a status changes, nobody gets notified.
|
||||
|
||||
In this chapter, we'll make the system **do things automatically**.
|
||||
In this chapter, we'll use NocoBase's [Workflow](/workflow) engine to make the system **do things automatically** — configure [condition](/workflow/nodes/condition) checks and [update](/workflow/nodes/update) nodes for automatic ticket status transitions and timestamp recording.
|
||||
|
||||
## 6.1 What Is a Workflow?
|
||||
|
||||
@@ -22,14 +22,14 @@ flowchart LR
|
||||
C -. No .-> E["⏹ End"]
|
||||
```
|
||||
|
||||
- **Trigger**: The entry point for the workflow. For example, "someone created a new ticket" or "a record was updated"
|
||||
- **[Trigger](/workflow/triggers/collection)**: The entry point for the workflow. For example, "someone created a new ticket" or "a record was updated"
|
||||
- **Condition**: An optional filtering step. For example, "only continue if the assignee is not empty"
|
||||
- **Action**: The step that does the actual work. For example, "send a notification" or "update a field"
|
||||
- **Action**: The step that does the actual work. For example, "send a notification" or "update a [field](/data-sources/field)"
|
||||
|
||||
Actions can be chained with multiple nodes. Common node types include:
|
||||
|
||||
- **Flow control**: Condition, Parallel branch, Loop, Delay
|
||||
- **Data operations**: Create record, Update record, Query record, Delete record
|
||||
- **Flow control**: Condition, Parallel [branch](/workflow/nodes/condition), Loop, Delay
|
||||
- **Data operations**: [Create record](/workflow/nodes/create), Update record, Query record, Delete record
|
||||
- **Notifications & external**: Notification, HTTP request, Calculation
|
||||
|
||||
This tutorial only covers a few of the most common ones — once you learn to combine them, you'll be able to handle most scenarios.
|
||||
@@ -40,9 +40,9 @@ NocoBase offers several trigger types, which you select when creating a workflow
|
||||
|
||||
| Trigger | Description | Typical Use Case |
|
||||
|---------|-------------|-----------------|
|
||||
| **Collection event** | Fires when a record is created, updated, or deleted | New ticket notification, status change logging |
|
||||
| **Schedule** | Fires on a Cron expression or fixed time | Daily reports, periodic data cleanup |
|
||||
| **Post-action event** | Fires after a user performs a UI action | Send notification after form submission |
|
||||
| **[Collection event](/workflow/triggers/collection)** | Fires when a record is created, updated, or deleted | New ticket notification, status change logging |
|
||||
| **[Schedule](/workflow/triggers/schedule)** | Fires on a Cron expression or fixed time | Daily reports, periodic data cleanup |
|
||||
| **[Post-action event](/workflow/triggers/action)** | Fires after a user performs a UI action | Send notification after form submission |
|
||||
| **Approval** | Initiates an approval flow with multi-level support | Leave requests, purchase approvals |
|
||||
| **Custom action** | Bound to a custom button, fires on click | One-click archiving, batch operations |
|
||||
| **Pre-action event** | Intercepts a user action synchronously before it completes | Pre-submit validation, auto-fill fields |
|
||||
@@ -75,7 +75,7 @@ After submitting, click the **Configure** link in the list to enter the flow edi
|
||||
|
||||
Click the trigger card at the top to open its configuration drawer:
|
||||
|
||||
- **Collection**: Select Main datasource / "Tickets"
|
||||
- **[Collection](/data-sources/main/collection)**: Select Main datasource / "Tickets"
|
||||
- **Trigger on**: Select "After record created or updated"
|
||||
- **Changed fields**: Check "Assignee" — the workflow only triggers when the Assignee field changes, avoiding unnecessary notifications from other field updates (when creating a record, all fields are considered changed, so new tickets will also trigger)
|
||||
- **Only triggers when conditions are met**: Set the mode to "Match **any** condition in the group," then add two conditions:
|
||||
@@ -308,4 +308,10 @@ These two workflows demonstrate two different trigger types, and together took l
|
||||
|
||||
## Next Chapter Preview
|
||||
|
||||
The system can do things automatically now, but we're still missing a "big picture view" — how many tickets are there in total? Which category has the most? How many new tickets per day? In the next chapter, we'll use chart blocks to build a **data dashboard** to see everything at a glance.
|
||||
The system can do things automatically now, but we're still missing a "big picture view" — how many tickets are there in total? Which category has the most? How many new tickets per day? In the next chapter, we'll use chart [blocks](/interface-builder/blocks) to build a **data dashboard** to see everything at a glance.
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [Workflow Overview](/workflow) — Core workflow concepts and use cases
|
||||
- [Collection Event Trigger](/workflow/triggers/collection) — Data change trigger configuration
|
||||
- [Update Record Node](/workflow/nodes/update) — Automatic data update setup
|
||||
|
||||
@@ -2,30 +2,30 @@
|
||||
|
||||
In the last chapter, we used workflows to make the system send notifications and record timestamps automatically. The system is getting smarter, but we're still missing one thing — **a bird's-eye view**.
|
||||
|
||||
How many tickets are there? How many have been resolved? Which category has the most issues? How many new tickets come in each day? You can't answer these questions by scrolling through a list. We need a **data dashboard** — charts that turn raw data into something you can understand at a glance.
|
||||
How many tickets are there? How many have been resolved? Which category has the most issues? How many new tickets come in each day? You can't answer these questions by scrolling through a list. In this chapter, we'll use [chart blocks](/data-visualization) (pie, line, bar charts) and [Markdown blocks](/interface-builder/blocks/other/markdown) to build a **data dashboard** that turns raw data into something you can understand at a glance.
|
||||
|
||||
## 7.1 Adding a Dashboard Page
|
||||
|
||||
First, let's add a new menu item to the top navigation bar.
|
||||
First, let's add a new [menu](/interface-builder/menus) item to the top navigation bar.
|
||||
|
||||
Enter configuration mode, click **"Add menu item"** (`+` icon) on the top menu bar, select **"Modern page (v2)"**, and name it "Dashboard."
|
||||
Enter [configuration mode](/get-started/how-nocobase-works), click **"Add menu item"** (`+` icon) on the top menu bar, select **"Modern page (v2)"**, and name it "Dashboard."
|
||||
|
||||

|
||||
|
||||
This page is dedicated to charts — it's our dashboard home base.
|
||||
This [page](/interface-builder/pages) is dedicated to charts — it's our dashboard home base.
|
||||
|
||||
## 7.2 Pie Chart: Ticket Status Distribution
|
||||
|
||||
For our first chart, we'll use a pie chart to show how many tickets are "Pending," "In Progress," and "Completed."
|
||||
|
||||
On the Dashboard page, click **Add block → Chart**.
|
||||
On the Dashboard page, click **Add block → [Chart](/data-visualization)**.
|
||||
|
||||
After adding it, click the **Configure** button in the top-right corner of the block. A chart configuration panel will open on the right side.
|
||||
After adding it, click the **Configure** button in the top-right corner of the [block](/interface-builder/blocks). A chart configuration panel will open on the right side.
|
||||
|
||||
### Configuring the Data Query
|
||||
|
||||
- **Collection**: Select "Tickets"
|
||||
- **Measures**: Select any unique field (e.g., ID), set the aggregation to **Count**
|
||||
- **[Collection](/data-sources/main/collection)**: Select "Tickets"
|
||||
- **Measures**: Select any unique [field](/data-sources/field) (e.g., ID), set the aggregation to **Count**
|
||||
- **Dimensions**: Select the "Status" field
|
||||
|
||||

|
||||
@@ -96,7 +96,7 @@ Add a **Table block** to the page, selecting the "Tickets" collection.
|
||||
|
||||
### Configure Filter Conditions
|
||||
|
||||
Click the table block's settings and find **Set data scope**. Add a filter condition:
|
||||
Click the table block's settings and find **Set data scope**. Add a [filter](/interface-builder/blocks/filter-blocks/form) condition:
|
||||
|
||||
- **Status** is not equal to **Completed**
|
||||
|
||||
@@ -114,7 +114,7 @@ Select the columns to display: Title, Status, Priority, Assignee, Created at.
|
||||
|
||||
Beyond charts, we can also put some text information on the dashboard.
|
||||
|
||||
Add a **Markdown block** and write a system announcement or usage instructions:
|
||||
Add a **[Markdown block](/interface-builder/blocks/other/markdown)** and write a system announcement or usage instructions:
|
||||
|
||||
```markdown
|
||||
## IT HelpDesk System
|
||||
@@ -171,7 +171,7 @@ The result is a light gray card with the greeting on the left and date on the ri
|
||||
|
||||
A dashboard isn't just for viewing data — it should also be a starting point for actions. Let's add an **Action Panel** so users can submit tickets and jump to the ticket list directly from the homepage.
|
||||
|
||||
Add an **Action Panel** block (Add block → Other blocks → Action Panel), then add two actions inside it:
|
||||
Add an **Action Panel** block (Add block → Other blocks → Action Panel), then add two [actions](/interface-builder/actions) inside it:
|
||||
|
||||

|
||||
|
||||
@@ -261,3 +261,9 @@ Data visualization is a built-in NocoBase plugin — no additional installation
|
||||
## Next Chapter Preview
|
||||
|
||||
At this point, our ticket system is quite feature-complete: data modeling, page building, form entry, access control, automated workflows, and a data dashboard — we've got it all. In the final chapter, we'll do some **finishing touches** and talk about **deploying to production**.
|
||||
|
||||
## Related Resources
|
||||
|
||||
- [Data Visualization](/data-visualization) — Chart configuration guide
|
||||
- [Markdown Block](/interface-builder/blocks/other/markdown) — Markdown block usage
|
||||
- [Block Layout](/interface-builder/blocks) — Page layout and block configuration
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
[
|
||||
{"type":"file","name":"index","label":"Tutorial Overview"},
|
||||
{"type":"file","name":"01-getting-started","label":"Chapter 1: Getting Started — Build a Working System in 5 Minutes"},
|
||||
{"type":"file","name":"02-data-modeling","label":"Chapter 2: Data Modeling — Two Tables for a Complete Ticket System"},
|
||||
{"type":"file","name":"03-building-pages","label":"Chapter 3: Building Pages — From Blank to Functional"},
|
||||
{"type":"file","name":"04-forms-and-details","label":"Chapter 4: Forms & Details — Input, Display, All in One"},
|
||||
{"type":"file","name":"05-roles-and-permissions","label":"Chapter 5: Users & Permissions — Who Sees What"},
|
||||
{"type":"file","name":"06-workflows","label":"Chapter 6: Workflows — Let the System Do the Work"},
|
||||
{"type":"file","name":"07-dashboard","label":"Chapter 7: Dashboard — The Big Picture at a Glance"}
|
||||
{"type":"file","name":"01-getting-started","label":"Chapter 1: Getting Started"},
|
||||
{"type":"file","name":"02-data-modeling","label":"Chapter 2: Data Modeling"},
|
||||
{"type":"file","name":"03-building-pages","label":"Chapter 3: Building Pages"},
|
||||
{"type":"file","name":"04-forms-and-details","label":"Chapter 4: Forms & Details"},
|
||||
{"type":"file","name":"05-roles-and-permissions","label":"Chapter 5: Users & Permissions"},
|
||||
{"type":"file","name":"06-workflows","label":"Chapter 6: Workflows"},
|
||||
{"type":"file","name":"07-dashboard","label":"Chapter 7: Dashboard"}
|
||||
]
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
# NocoBase 2.0 Beginner Tutorial
|
||||
|
||||
Welcome to the **NocoBase 2.0 Beginner Tutorial**!
|
||||
|
||||
In this series, we'll build a **minimal IT HelpDesk system** from scratch using NocoBase 2.0. The entire system requires only **2 data tables** and zero code, yet delivers ticket submission, category management, change tracking, access control, and even a data dashboard.
|
||||
This tutorial walks you through building a **minimal IT HelpDesk system** from scratch using NocoBase 2.0. The entire system requires only **2 data tables** and zero code, yet delivers ticket submission, category management, change tracking, access control, and a data dashboard.
|
||||
|
||||
## About This Tutorial
|
||||
|
||||
- **Target audience**: Business users or non-programmers — no coding knowledge required
|
||||
- **Target audience**: Business users, technical users, or anyone interested in NocoBase (some computer background is recommended)
|
||||
- **Case project**: A minimal IT HelpDesk system with only 2 tables
|
||||
- **Estimated time**: 2-3 hours (non-technical), 1-1.5 hours (technical users)
|
||||
- **Prerequisites**: Docker environment or [Online Demo](https://demo.nocobase.com/new) (24-hour trial, no installation needed)
|
||||
- **Version**: NocoBase 2.0
|
||||
- **Style**: Friendly and approachable, screenshot-heavy, 15-20 minutes per chapter
|
||||
|
||||
## What You'll Learn
|
||||
|
||||
@@ -34,6 +33,61 @@ This tutorial is built around a minimal data model — just **2 tables**, but en
|
||||
| Tickets | Title, Description, Status, Priority |
|
||||
| Categories | Name, Color |
|
||||
|
||||
Ready? Let's start with [Chapter 1: Getting Started](./01-getting-started/)!
|
||||
## FAQ
|
||||
|
||||
> After completing this tutorial, explore [AI Employees](/ai-employees/quick-start) to add AI capabilities to your system.
|
||||
### What is NocoBase best suited for?
|
||||
|
||||
Internal business tools, data management systems, approval workflows, CRM, ERP, and other scenarios requiring flexible customization with self-hosted deployment.
|
||||
|
||||
### What prerequisites do I need?
|
||||
|
||||
No programming required, but some basic computer knowledge is recommended. The tutorial explains concepts like tables, fields, and relationships step by step. Experience with databases or spreadsheets is a plus.
|
||||
|
||||
### Can the tutorial system be extended?
|
||||
|
||||
Yes. This tutorial uses only 2 tables, but NocoBase supports complex multi-table relationships, external API integrations, and custom plugins.
|
||||
|
||||
### What deployment environment is needed?
|
||||
|
||||
Docker is recommended (Docker Desktop or Linux server), minimum 2 cores and 4GB RAM. Git source installation is also supported. For learning purposes, you can also request an [Online Demo](https://demo.nocobase.com/new) — no installation needed, valid for 24 hours.
|
||||
|
||||
### Are there limitations in the free version?
|
||||
|
||||
Core features are fully free and open-source. The commercial edition offers additional premium plugins and technical support. See [commercial pricing](https://www.nocobase.com/en/commercial) for details.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
NocoBase 2.0 is built on:
|
||||
|
||||
- **Frontend**: React + [Ant Design](https://ant.design/) 5.0
|
||||
- **Backend**: Node.js + Koa
|
||||
- **Database**: PostgreSQL (also supports [MySQL](/get-started/installation/docker), MariaDB)
|
||||
- **Deployment**: [Docker](/get-started/installation/docker), Kubernetes
|
||||
|
||||
## Platform Comparison
|
||||
|
||||
If you're evaluating no-code/low-code platforms:
|
||||
|
||||
| Platform | Highlights | Difference from NocoBase |
|
||||
|----------|-----------|--------------------------|
|
||||
| [Appsmith](https://www.appsmith.com/) | Open-source, strong frontend customization | NocoBase is more data-model driven |
|
||||
| [Retool](https://retool.com/) | Internal tool platform | NocoBase is fully open-source, no usage limits |
|
||||
| [Airtable](https://airtable.com/) | Online collaborative database | NocoBase supports self-hosted deployment |
|
||||
| [Budibase](https://budibase.com/) | Open-source low-code, self-hostable | NocoBase has stronger plugin architecture |
|
||||
|
||||
## Related Docs
|
||||
|
||||
### Getting Started
|
||||
- [How NocoBase Works](/get-started/how-nocobase-works) — Core concepts overview
|
||||
- [Quick Start](/get-started/quickstart) — Installation and initial setup
|
||||
- [System Requirements](/get-started/system-requirements) — Hardware and software requirements
|
||||
|
||||
### More Tutorials
|
||||
- [NocoBase 1.x Tutorials](/tutorials/v1/) — Task management system tutorial with advanced topics
|
||||
|
||||
### Solutions
|
||||
- [Ticket System Solution](/solution/ticket-system/) — AI-powered intelligent ticket management
|
||||
- [CRM Solution](/solution/crm/) — Customer relationship management
|
||||
- [AI Employees](/ai-employees/quick-start) — Add AI capabilities to your system
|
||||
|
||||
Ready? Let's start with [Chapter 1: Getting Started](./01-getting-started/)!
|
||||
|
||||
Reference in New Issue
Block a user