# UI Configuration

> UI blocks, pages, actions, and field components. This skill should be used when the user asks to create a page, add a table or form block, build a dashboard, set up a kanban board, or configure menu structure.

- Skill: `agents-store/ui-configuration` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add agents-store/ui-configuration`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agents-store/ui-configuration/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: agents-store (https://skillmd.com/u/agents-store)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agents-store/ui-configuration

---


# UI Configuration

Expert guidance on NocoBase UI configuration — blocks, pages, actions, field components, and layout design.

## Block Types

| Block | Description | Best For |
|-------|-------------|----------|
| Table | Data grid with columns | Data listing, CRUD |
| Form | Input form | Record creation, editing |
| Details | Read-only record view | Record display |
| Kanban | Board view by status | Pipeline tracking |
| Calendar | Date-based calendar | Scheduling, events |
| Gantt | Timeline chart | Project planning |
| List | Simple list layout | Simple data display |
| Grid Card | Card layout in grid | Visual catalogs |
| Chart | Data visualization | Reports, dashboards |
| Markdown | Static content | Instructions, documentation |
| Iframe | Embedded external content | External tools |

## Table Block

### Configuration
```
Collection: contacts
Fields visible: [name, email, phone, company, status, createdAt]
Default sort: createdAt DESC
Page size: 20
Actions:
  - Create (opens form)
  - Edit (inline or modal)
  - Delete (with confirmation)
  - Filter
  - Export
  - Bulk actions
```

### Column Configuration
```
Column: name
  - Width: 200px
  - Fixed: left
  - Sortable: true
  - Filterable: true

Column: status
  - Component: Tag (colored)
  - Width: 120px
  - Filterable: true

Column: email
  - Component: Link (mailto)
  - Width: 250px

Column: createdAt
  - Format: YYYY-MM-DD HH:mm
  - Width: 180px
  - Sortable: true
```

## Form Block

### Configuration
```
Collection: contacts
Mode: create / edit
Layout: vertical / horizontal
Fields:
  - name (required, text input)
  - email (required, email input)
  - phone (phone input)
  - company (relation picker → companies)
  - status (select dropdown)
  - notes (rich text editor)
  - avatar (image upload)

Actions:
  - Submit
  - Cancel
  - Save as Draft
```

### Field Layout
```
Grid layout example:
Row 1: [name (50%), email (50%)]
Row 2: [phone (50%), company (50%)]
Row 3: [status (30%), birthday (30%), source (40%)]
Row 4: [notes (100%)]
Row 5: [Submit] [Cancel]
```

## Kanban Block

### Configuration
```
Collection: deals
Group by: stage (SingleSelect)
Columns: [Discovery, Proposal, Negotiation, Closed Won, Closed Lost]
Card fields: [title, amount, contact.name, closeDate]
Sort within column: -amount (highest first)
```

### Card Template
```
Card displays:
  - Title: deal title (bold)
  - Subtitle: contact name
  - Badge: amount (formatted as currency)
  - Footer: close date
```

## Calendar Block

### Configuration
```
Collection: events
Date field: startDate
End date field: endDate (optional, for multi-day events)
Title field: title
Color field: category (color by type)
```

## Chart Block

### Configuration
```
Collection: orders
Type: bar / line / pie / doughnut / area
X axis: month (date field, grouped by month)
Y axis: total (sum of amount)
Group by: status
```

## Actions

### Standard CRUD Actions
| Action | Description | Config |
|--------|-------------|--------|
| Create | Open create form | Form block, modal/drawer/page |
| Edit | Open edit form | Form block, modal/drawer/inline |
| View | Open details | Details block, modal/drawer/page |
| Delete | Delete record | Confirmation dialog |
| Duplicate | Copy record | Pre-fill form |
| Print | Print record | Print template |
| Export | Export to Excel/CSV | Field selection |

### Bulk Actions
```
Available for Table block:
  - Bulk delete
  - Bulk update (specific fields)
  - Bulk export
```

### Custom Actions
```
Action: Submit for Approval
Type: Workflow trigger
Workflow: approval_flow
Condition: status == "Draft"
Confirmation: "Are you sure you want to submit?"
```

## Page & Menu Structure

### Page Layout
```
Page: Contacts
  └── Tabs:
      ├── All Contacts (Table block)
      ├── By Company (Table block, grouped)
      └── New Contact (Form block)
```

### Menu Structure
```
Menu:
  ├── Dashboard (Chart blocks)
  ├── CRM
  │   ├── Contacts (Table + Kanban tabs)
  │   ├── Companies (Table)
  │   └── Deals (Kanban + Table tabs)
  ├── Operations
  │   ├── Orders (Table)
  │   └── Products (Grid Card)
  └── Settings
      ├── Users (Table)
      └── Roles (Table)
```

## Field Components

| Field Type | Available Components |
|------------|---------------------|
| string | Input, TextArea, Tag |
| select | Select, Radio, Tag |
| boolean | Switch, Checkbox |
| date | DatePicker, RangePicker |
| number | InputNumber, Slider, Progress |
| relation | RecordPicker, SubForm, SubTable |
| attachment | Upload, ImageUpload |
| richText | RichText editor |
| json | JSON editor, Code editor |

## Tools for UI Configuration

| Tool | Purpose |
|------|---------|
| `page_create` | Create a new page |
| `page_list` | List all pages |
| `page_inspect` | Inspect page structure (blocks, columns, actions) |
| `page_delete` | Delete a page |
| `table_add` | Add a block (table, form, etc.) to a page |
| `column_add` | Add a column/field to a block |
| `action_add` | Add an action button to a block |
| `menu_create_group` | Create a menu group |
| `collection_get` | Get collection fields (to know what columns to add) |

## Executable Workflows

### Workflow: Create a Page with Table Block

```
Step 1: collection_get("contacts")
  → Understand available fields: name, email, phone, company, status, createdAt

Step 2: page_create("Contacts")
  → Page created with ID

Step 3: table_add(page, { collection: "contacts", type: "table" })
  → Table block added

Step 4: column_add(block, "name")
         column_add(block, "email")
         column_add(block, "phone")
         column_add(block, "status")
         column_add(block, "createdAt")
  → Columns added to table

Step 5: action_add(block, "create")
         action_add(block, "edit")
         action_add(block, "delete")
         action_add(block, "filter")
  → Actions added
```

### Workflow: Create a Page with Form Block

```
Step 1: collection_get("orders")
  → Fields: customer, product, quantity, total, status, notes

Step 2: page_create("New Order")
  → Page created

Step 3: table_add(page, { collection: "orders", type: "form" })
  → Form block added

Step 4: column_add(block, "customer")    // relation picker
         column_add(block, "product")     // relation picker
         column_add(block, "quantity")    // number input
         column_add(block, "notes")      // text area
  → Form fields added

Step 5: action_add(block, "submit")
         action_add(block, "cancel")
  → Form actions added
```

### Workflow: Create a Kanban Board Page

```
Step 1: collection_get("deals")
  → Fields: title, amount, stage, contact, closeDate

Step 2: page_create("Deal Pipeline")
  → Page created

Step 3: table_add(page, { collection: "deals", type: "kanban", groupField: "stage" })
  → Kanban block added, grouped by stage field

Step 4: column_add(block, "title")
         column_add(block, "amount")
         column_add(block, "contact")
         column_add(block, "closeDate")
  → Card fields configured
```

### Workflow: Inspect and Extend Existing Page

```
Step 1: page_list()
  → Find target page

Step 2: page_inspect(pageId)
  → See current blocks, columns, actions

Step 3: column_add(block, "newField")
  → Add missing columns

Step 4: action_add(block, "export")
  → Add missing actions

Step 5: page_inspect(pageId)
  → Verify changes
```

### Workflow: Build Complete Application UI

```
Step 1: collection_list()
  → Understand all available collections

Step 2: menu_create_group("CRM")
         menu_create_group("Operations")
  → Create navigation groups

Step 3: For each collection, create a page with appropriate block type:
  page_create("Contacts", { parent: "CRM" })  → table_add → column_add → action_add
  page_create("Deals", { parent: "CRM" })     → table_add (kanban) → column_add
  page_create("Orders", { parent: "Operations" }) → table_add → column_add → action_add

Step 4: page_create("Dashboard")
  → Add chart blocks for overview

Step 5: page_list() → Verify complete navigation
```

## Best Practices

1. **Design for the user** — different blocks for different roles
2. **Inspect before building** — always run `collection_get` to know available fields before adding columns
3. **Use tabs** — group related views in tabs on the same page
4. **Configure filters** — add commonly-used filters to table blocks
5. **Hide system fields** — don't show createdAt/updatedBy in forms
6. **Use modal for quick edits** — drawer for detailed forms, page for complex ones
7. **Default sort matters** — newest first (-createdAt) is usually best
8. **Show related data** — use sub-tables for hasMany relations
9. **Use Kanban for pipelines** — status-based workflows are perfect for boards
10. **Dashboard first** — create a dashboard page with chart blocks for overview
11. **Verify with page_inspect** — always inspect the page after modifications to confirm structure