Standard: CMS Content Management UI Patterns
Last Updated: 15/07/2026
Type: CMS UI Standard — Content Management UX Patterns
Scope: Articles, Events, Membership Tiers, Banners, Notifications, Vouchers, and all CRUD-based settings lists
References:
- Feedback: Membership Tiers editing inline directly (no list view)
- Feedback: Article list showing full form editing inline
1. Current Issues
The CMS screens use inconsistent design paradigms for managing lists and entity edits:
| Screen | Current Pattern | Issue |
|---|---|---|
| Membership tiers | Form cards expanded by default for all tiers | Verbose, requires lots of vertical scrolling |
| Articles | Inline expandable editing cards | Visual clutter, lacks clean context separation |
| Banner | Expanded cards | Hard to read or view lists at a glance |
| Vouchers | Tables with inline editable inputs | Hard to validation, prone to accidental updates |
2. Standard Pattern UI (Unified Design)
2.1 Core Principle
Standard UX Rule: Every administrative CRUD screen must follow the pattern:
"Compact List View (Table) → Create/Edit opens in Sub-page or Drawer Panel"
- ❌ Do NOT expand full editing forms within list rows.
- ❌ Do NOT perform inline input updates directly inside tables.
- ✅ List View: Keeps overview clean, searchable, and paginated.
- ✅ Editing/Creation: Spawns a dedicated editing sub-page (for complex entities) or a slide-in Drawer panel (for simple configurations).
2.2 Standard List Layout (Table Wireframe)
┌─────────────────────────────────────────────────────────────────┐
│ View Title [🔍 Search...] [+ Add New] │
├──────────┬─────────────┬──────────┬──────────┬──────────────────┤
│ Name │ Created At │ Author │ Status │ Action │
├──────────┼─────────────┼──────────┼──────────┼──────────────────┤
│ Item A │ 15/07/2026 │ Admin │ 🟢 Active│ [👁] [✏️] [🗑] │
│ Item B │ 14/07/2026 │ Admin │ 🔴 Inact.│ [👁] [✏️] [🗑] │
│ Item C │ 10/07/2026 │ Editor │ 🟢 Active│ [👁] [✏️] [🗑] │
├──────────┴─────────────┴──────────┴──────────┴──────────────────┤
│ Showing 1–10 of 24 results [ < 1 2 3 > ] │
└─────────────────────────────────────────────────────────────────┘
Action Column Controls
| Action | Icon | Purpose |
|---|---|---|
| Preview | 👁 | Opens a preview dialog/window |
| Edit | ✏️ | Opens the sub-page or drawer panel for editing |
| Delete | 🗑 | Triggers a confirmation dialog before deletion |
Column Mappings per Screen
| Screen | Column 1 | Column 2 | Column 3 | Column 4 | Actions |
|---|---|---|---|---|---|
| Articles | Title | Created Date | Author | Status (Active/Inactive) | 👁 ✏️ 🗑 |
| Events | Title | Start Date | End Date | Status (Active/Inactive) | 👁 ✏️ 🗑 |
| Banners | Title | Image Thumbnail | Position Slot | Status (Active/Inactive) | 👁 ✏️ 🗑 |
| Membership Tiers | Tier Name (badge) | Min Spend | Max Spend | Status (Active/Inactive) | ✏️ 🗑 |
| Vouchers | Voucher Name | Type | Initial Stock | Expiration Date | 👁 ✏️ 🗑 |
| Notifications | Title | Type | Created Date | Status (Active/Inactive) | 👁 ✏️ 🗑 |
2.3 "Add New" Button Positioning
Position: Top-right corner of the content block, aligned with the view title.
Style: Primary action button color (brand colors) with a leading "+" icon.
Label: "+ Add Article", "+ Add Tier", "+ Add Banner", etc.
2.4 Create / Edit UX Routing
[+ Add New] [✏️ Edit]
│ │
▼ ▼
┌─────────────────────────────────────────────────┐
│ ← Back Add / Edit Entity │
│ [Cancel] [Save] │
├─────────────────────────────────────────────────┤
│ │
│ Full Entity Form Input Controls │
│ │
└─────────────────────────────────────────────────┘
Implementation Options (Pick based on form complexity):
| Option | When to Use | UX Benefits |
|---|---|---|
| Sub-page (Full Page Route) | Form with many fields or containing a Rich Text Editor (e.g., Articles, Events) | Maximum space, clean focus, better editing layout |
| Drawer Panel (Slide-in) | Small forms with < 10 standard inputs (e.g., Membership Tiers, Banners, Notifications) | Fast, keeps context of list view without page reloading |
| Modal Dialog | Confirmations or very simple actions | Fast dialog inputs |
2.5 Deletion Confirmation Modal
Tapping the 🗑 icon must trigger a confirmation check:
┌─────────────────────────────────────────┐
│ ⚠️ Confirm Deletion │
│ │
│ Are you sure you want to delete │
│ "Item Title"? │
│ This action cannot be undone. │
│ │
│ [Cancel] [Delete] │
└─────────────────────────────────────────┘
3. Screen Specifications
3.1 Membership Tiers View
Before: Forms for all tiers are fully expanded on a single screen.
After: A compact 4-row list view.
┌────────────────────────────────────────────────────────┐
│ Membership Tiers [+ Add Tier] │
├───────────┬───────────┬───────────┬──────────┬─────────┤
│ Tier │ Min Spend │ Max Spend │ Multipler│ Actions │
├───────────┼───────────┼───────────┼──────────┼─────────┤
│ 🥈 SILVER │ 0đ │ 5.000.000đ│ 3%/5% │ ✏️ 🗑 │
│ 🥇 GOLD │ 5.000.000đ│40.000.000đ│ 5%/7% │ ✏️ 🗑 │
│ 💎 PLAT │40.000.000đ│80.000.000đ│ 8%/10% │ ✏️ 🗑 │
│ 💎 DIA │80.000.000đ│ ∞ │ 10%/12% │ ✏️ 🗑 │
└───────────┴───────────┴───────────┴──────────┴─────────┘
Tapping ✏️ opens a Slide-in Drawer from the right with the inputs: Tier Name, Code, Min Spend, Max Spend, Card/Bank %, Cash %, and Active Status.
3.2 Articles View
Before: In-line expandable forms.
After: Standard table view + full sub-page editor.
┌─────────────────────────────────────────────────────────────────┐
│ Articles [+ Add Article] │
├──────────────────────┬─────────────┬─────────┬────┬─────────────┤
│ Title │ Created At │ Author │Act │ Actions │
├──────────────────────┼─────────────┼─────────┼────┼─────────────┤
│ Golden Lotus Family │ 06/07/2026 │ Admin │ 🟢 │ 👁 ✏️ 🗑 │
│ Healing World Spa │ 01/07/2026 │ Admin │ 🟢 │ 👁 ✏️ 🗑 │
│ Aqua Golden Summer │ 25/06/2026 │ Editor │ 🔴 │ 👁 ✏️ 🗑 │
└──────────────────────┴─────────────┴─────────┴────┴─────────────┘
Tapping ✏️ navigates to /cms/articles/:id/edit (see cms-article-editor-redesign.md).
3.3 Banners View
┌─────────────────────────────────────────────────────────────────┐
│ Banners [+ Add Banner] │
├──────────────┬──────────────┬───────────┬──────┬────────────────┤
│ Title │ Thumbnail │ Position │ Act │ Actions │
├──────────────┼──────────────┼───────────┼──────┼────────────────┤
│ Healing World│ [thumbnail] │ Home Slide│ 🟢 │ 👁 ✏️ 🗑 │
│ Aqua Golden │ [thumbnail] │ Home Slide│ 🟢 │ 👁 ✏️ 🗑 │
└──────────────┴──────────────┴───────────┴──────┴────────────────┘
4. General UI Requirements
Inline Status Toggle
- Render clear status indicators: 🟢 Active / 🔴 Inactive.
- Directly tapping the toggle changes status inline (trigger confirm popover only if necessary).
Filters & Search
- A search input block above the table filters entries by name.
- Status filters (All / Active / Inactive) and Created Month filter dropdowns should sit next to the search input.
Pagination
- Default density: 10 items/page.
- Selectable range: 10 / 25 / 50 items.
5. Technical Checklist
Pattern Consistency (Applies to all CRUD views):
- Refactor all content management views into compact tables/lists.
- Standardize the "Add New" button position (top-right with icon
+). - Implement standardized actions: 👁 (Preview) + ✏️ (Edit) + 🗑 (Delete).
- Require a modal confirmation on delete actions.
- Bind ✏️ actions to Sub-page routes for complex forms and Drawer panels for simple configuration forms.
Screen-specific Updates:
- Membership Tiers: Build the compact list table and the slide-in Drawer.
- Articles: Build the table view and hook up sub-page navigation.
- Events: Match Article logic.
- Banners: Build list with image thumbnail previews and Drawer panel editing.
- Notifications: Match Banner design.
- Vouchers: Build list and Drawer panel edit.
Integration Review:
- Modify the Saleor app sidebar routing and UI structures in one sweep to maintain layout consistency.
- Ensure all view actions compile correctly and list rows map back to unique database entities.