Skip to content

🧩 Frontend Plugins

🎯 Overview

Frontend Plugins are specialized UI components and extensions built primarily on NocoBase framework that provide intuitive user interfaces for interacting with backend services across the Continuum platform. These plugins bridge the gap between complex backend operations and user-friendly frontend experiences, enabling efficient workflows for content creation, campaign management, and system operations.

🏗️ Architecture Role

Frontend Plugins operate as presentation layer components that: - Connect to backend services through APIs - Provide specialized UI/UX for specific workflows - Validate and prepare data for backend processing - Enable real-time interaction with system components - Support multi-module functionality across containers

🔗 Plugin-Module Relationships

Frontend plugins are designed to support one or more backend modules across different containers:

Plugin Primary Module(s) Container(s) Purpose
Email Inbox Email Marketing Production & Distribution Campaign message management
Advanced File Uploader Multi-Engine Render Farm, Montagist, Animation Designer Bot Production & Distribution Asset validation & ingestion
Render Submit Action Multi-Engine Render Farm, Render Orchestrator Production & Distribution Job submission workflow
Realtime Tables Multiple (System-wide) Core Operations, Analytics Live data synchronization
Advanced Cards Multiple (Content Display) Core Operations, Production Enhanced data visualization
Custom Login v2 Authentication System Core Operations Branded authentication
Picnic Indicator Billing System, Resource Optimizer Core Operations Account status & credits

📚 Plugin Documentation Index

📧 Email Inbox Plugin

Status: ✅ Documented

Advanced email management interface for marketing campaigns.

📤 Advanced File Uploader Plugin

Status: ✅ Documented

Professional file upload widget with image cropping and format validation.

⚡ Render Submit Action Plugin

Status: ✅ Documented

Custom submit button for render job queue submission.

🔄 Realtime Tables Plugin

Status: ✅ Documented

WebSocket-based live table updates for system-wide data synchronization.

🎴 Advanced Cards Plugin

Status: ✅ Documented

Enhanced card components for rich content display.

🔐 Custom Login v2 Plugin

Status: ✅ Documented

Branded authentication interface with custom backgrounds.

⚡ Picnic Indicator Plugin

Status: ✅ Documented

Account status and credit monitoring in application header.

🛠️ Technology Stack

Core Technologies

  • React 18+: UI component framework
  • Ant Design v5: Professional UI component library
  • NocoBase 1.6.33+: Low-code platform foundation
  • TypeScript: Type-safe development
  • Formily: Advanced form management
  • WebSockets: Real-time communication
  • Canvas API: Image processing (File Uploader)

Integration Patterns

  • REST APIs: Backend service communication
  • WebSocket Events: Real-time updates
  • Schema-based Configuration: NocoBase settings system
  • Plugin System: Modular architecture

🔧 Common Features

Shared Capabilities

  • ✅ NocoBase Integration: Native platform compatibility
  • ✅ Theme Support: Light/Dark mode adaptation
  • ✅ Responsive Design: Mobile and desktop optimization
  • ✅ Multi-language Support: i18n implementation
  • ✅ Schema Configuration: Visual settings management
  • ✅ Access Control: Permission-based UI elements

Design Patterns

  • Schema Settings: Declarative UI configuration
  • Custom Hooks: Reusable logic components
  • Provider Pattern: Context-based state management
  • Component Composition: Modular UI architecture

📈 Benefits to Backend Modules

For Email Marketing

  • Email Inbox Plugin provides:
  • Intuitive message browsing and filtering
  • HTML/plain text email visualization
  • Thread management interface
  • Campaign message organization

For Render Pipeline

  • Advanced File Uploader Plugin provides:
  • Pre-upload image validation
  • Format standardization (aspect ratios, quality)
  • Asset metadata preparation

  • Reduced pipeline errors

  • Render Submit Action Plugin provides:

  • Simplified job submission workflow
  • Collection data inspection
  • Custom server-side processing hooks
  • Error-free queue integration

For System Operations

  • Realtime Tables Plugin provides:
  • Live data synchronization across clients
  • Reduced polling overhead
  • Instant update notifications
  • Improved user experience

For Content Management

  • Advanced Cards Plugin provides:
  • Rich visual content display
  • Customizable action buttons
  • Empty state handling
  • Professional layout templates

🚀 Deployment & Usage

Installation Pattern

All plugins follow NocoBase standard installation:

# Copy plugin to NocoBase plugins directory
cp -r packages/plugins/@picnic/plugin-name /path/to/nocobase/packages/plugins/@picnic/

# Enable plugin via NocoBase admin interface
# Navigate to: Settings → Plugin Manager → Enable Plugin

Configuration Pattern

Plugins are configured through: 1. Admin Settings: System-level configuration 2. Schema Settings: Block/component-level options 3. User Preferences: Individual customization

Core Platform

Backend Modules

Reference Materials

📝 Documentation Standards

Each plugin documentation includes: 1. Overview: Purpose and key features 2. Backend Integration: Related modules and benefits 3. Technical Details: Architecture and implementation 4. Usage Guide: Installation and configuration 5. Cross-references: Bidirectional links to related modules

🎯 Future Enhancements

Planned Plugins

  • Advanced Analytics Dashboard
  • Workflow Visual Builder
  • Real-time Collaboration Tools
  • Advanced Media Gallery
  • Interactive Report Builder

Integration Expansions

  • GraphQL API support
  • Advanced WebSocket features
  • AI-powered UI suggestions
  • Cross-platform mobile support