Kanban Board Widget

# Kanban CRM Sales Deals This example demonstrates a sophisticated Kanban board for CRM sales pipeline management with drag-and-drop functionality, keyboard navigation, and real-time updates. ## Key Features * **Drag-and-drop deal management** between pipeline stages * **Keyboard navigation** with arrow keys and tab support * **Real-time search and filtering** across deals * **Stage-based organization** with visual indicators * **Deal detail navigation** with click-to-view functionality * **Responsive design** that works on mobile and desktop * **Accessibility features** with ARIA labels and screen reader support * **Dynamic metadata resolution** for flexible table structures ## Use Cases Perfect for applications requiring: * Sales pipeline management and CRM systems * Project management with workflow stages * Task management and Kanban boards * Lead tracking and conversion funnels * Support ticket management systems * Any workflow requiring stage-based organization ## Implementation Overview This widget uses the **Other Tables Data** pattern with dynamic metadata resolution to work with any "Deals" datatable structure. Key features include: * Advanced drag-and-drop with visual feedback * Comprehensive keyboard navigation for accessibility * Real-time search across deal titles and customers * Responsive design with mobile optimization * Professional styling with stage-specific colors and icons ## Code Example ```html Kanban Board Widget

``` ## Key Concepts ### Advanced Drag-and-Drop * **Visual Feedback**: Cards and columns provide clear visual feedback during drag operations * **Stage Updates**: Automatic database updates when deals are moved between stages * **Keyboard Support**: Full keyboard navigation with arrow keys for accessibility * **Touch Support**: Works seamlessly on mobile devices with touch interactions ### Dynamic Metadata Resolution * **Flexible Structure**: Automatically discovers table and field IDs by name * **Error Handling**: Graceful handling when expected tables or fields are missing * **Field Mapping**: Maps business field names to actual database field IDs * **Validation**: Warns when expected fields are not found ### Professional CRM Features * **Search Functionality**: Real-time search across deal titles and customers * **Currency Formatting**: Professional currency display with locale formatting * **Date Formatting**: User-friendly date display for deadlines * **Stage Management**: Visual stage indicators with colors and icons ### Accessibility & UX * **ARIA Labels**: Comprehensive accessibility support for screen readers * **Keyboard Navigation**: Full keyboard support for all interactions * **Responsive Design**: Optimized for desktop, tablet, and mobile devices * **Loading States**: Clear feedback during data loading and updates This Kanban board example demonstrates how code widgets can create sophisticated business applications with professional-grade user interfaces and full accessibility support. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.buzzy.buzz/the-building-blocks/code-widget-custom-code/examples/kanban-crm-sales-deals.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.