Codewidget Examples
This section provides comprehensive examples demonstrating the power and flexibility of Buzzy code widgets. These examples showcase real-world patterns that prospective customers can leverage for similar use cases.
Table of Contents
Data Visualization & Analytics
Fruit Distribution Chart - Real-time pie chart with automatic updates
Chart Configuration Manager - Dynamic Chart.js integration with persistence
Ratings Average and Distribution - Statistical data visualization
File & Media Management
Advanced Image Gallery - Drag-and-drop upload with S3 integration
File Manager - Universal file upload, download, and organization
Image Gallery Slideshow - Current row image presentation
Interactive User Interfaces
Kanban CRM Sales Deals - Sophisticated drag-and-drop pipeline management
Service Locations Map - Interactive Leaflet.js map with popups
Event Locations Map - Location-based event mapping
Data Operations & Filtering
Contact Age Filter - Custom filtering with MongoDB query syntax
Deep Copy Action - Complex multi-table data operations and template duplication
Data Usage Patterns
Code widgets can interact with Buzzy data in several sophisticated ways:
Pattern 1: Current Row Data
Access and display data from the current record, perfect for custom presentations and specialized input controls.
Example: Image Gallery Slideshow - Presents images from the current row's gallery field in a custom slideshow format.
Pattern 2: Child Table Data
Retrieve and process child records to create summaries, visualizations, or management interfaces.
Examples:
Advanced Image Gallery - Manages file uploads as child records
File Manager - Organizes files stored as child data
Chart Configuration Manager - Stores chart settings as child records
Pattern 3: Other Tables Data
Access data from separate tables to create dashboards, analytics, or cross-table functionality.
Examples:
Fruit Distribution Chart - Visualizes data from a separate "Fruit Counters" table
Kanban CRM Sales Deals - Manages deals from a dedicated "Deals" table
Service Locations Map - Maps services from a "Service Locations" table
Pattern 4: Advanced Data Operations
Perform complex operations across multiple tables with sophisticated business logic.
Examples:
Deep Copy Action - Copies hierarchical data structures across multiple related tables with file duplication
Multi-step user lookup - Look up User's "People" record, get rowID, then update linked table field in single button action
Course enrollment automation - Copy course templates, questionnaires, questions, and options for individual user assignments
Key Technologies Demonstrated
External Library Integration
Chart.js for professional data visualizations
Leaflet.js for interactive mapping
React for modern component-based development
Bulma CSS for responsive styling
BuzzyFrameAPI Capabilities
Real-time data updates with microapp listeners
File upload/download with S3 integration
Cross-table data operations and complex lookups
Screen navigation and automated user workflows
Dynamic metadata resolution
Advanced filtering with MongoDB syntax
Template duplication with hierarchical data copying
Multi-step button operations combining multiple API calls
Advanced Features
Drag-and-drop interfaces
Keyboard navigation and accessibility
Responsive design for mobile and desktop
Error handling and user feedback
Progress tracking for long operations
Real-time synchronization
Development Approach
AI-Assisted Development
All examples can be generated or enhanced using Buzzy's AI assistant. Start with a prompt describing your desired functionality, then customize the generated code to meet your specific requirements.
Code Customization
The generated code uses modern JavaScript, React, HTML, and CSS patterns that can be easily modified by developers with basic web development knowledge. Each example includes detailed explanations of key concepts and implementation patterns.
Best Practices
Initialize BuzzyFrameAPI outside React components for proper async handling
Use microapp listeners for real-time data updates
Implement proper error handling and user feedback
Follow responsive design principles
Include accessibility features where appropriate
These examples demonstrate how code widgets can create enterprise-grade functionality that rivals dedicated applications, all within the Buzzy platform.
Last updated