All Apps
Menu

Architecture

Download drag and drop

Architecture

The Drag & Drop extension for Business Central implements a sophisticated client-server architecture that seamlessly integrates modern web technologies with Business Central's AL framework. This document provides a comprehensive overview of the technical architecture, component relationships, and data flow.

High-Level Architecture

The extension follows a three-tier architecture pattern:

  1. Presentation Layer - Client-side JavaScript and CSS components
  2. Application Layer - AL codeunits and page extensions
  3. Data Layer - Business Central database with Document Attachment integration

Component Overview

Client-Side Components

Control Add-in Framework - Defines the bridge between web technologies and Business Central AL - Manages event communication between client and server - Handles resource loading for JavaScript and CSS files

JavaScript Components - DropArea.js - Core drag-and-drop functionality implementation - startup.js - Control initialization and readiness signaling

CSS Components - DropArea.css - Visual styling and user interface feedback

Server-Side Components

AL Objects

Pages: - QTEAMDropArea.page.al - CardPart page hosting the control add-in

Page Extensions: - Multiple page extensions adding FactBox integration to: - Customer Cards - Contact Cards<br> - Item Cards - Sales documents (Orders, Quotes) - Purchase documents (Orders, Quotes)

Codeunits: - QTEAMDropAreaManagement.codeunit.al - Core business logic - QTEAMDaDInstallation.codeunit.al - Installation management - QTEAMDaDUpgrade.codeunit.al - Version upgrade handling

Permission Sets: - QTEAMDragAndDrop.permissionset.al - Access control management

Data Flow Architecture

File Upload Process

  1. Client Initiation
    • User drags file over the designated drop area
    • JavaScript detects drag events and provides visual feedback
    • File drop triggers JavaScript file reading process
  2. File Processing
    • JavaScript reads file content using FileReader API
    • File data converted to Base64 encoding for transmission
    • File metadata (name, size, type) captured
  3. Server Communication
    • JavaScript triggers AL extensibility method
    • File data and metadata transmitted to AL codeunit
    • Base64 data converted back to binary format
  4. Business Central Integration
    • File stored in Document Attachment table
    • Record linkage established to source entity
    • Activity logging with Q-Team Authenticator
  5. User Feedback
    • Success/error status returned to client
    • Visual feedback updated in user interface

Integration Patterns

Page Extension Architecture

Each supported Business Central page receives a consistent extension pattern:

FactBox Integration: - Adds "QTEAM DropArea" FactBox to page layout - Positions FactBox for optimal user experience - Maintains consistent visual appearance across pages

Context Management: - OnAfterGetCurrRecord trigger sets current record context - Document type identification for proper categorization<br> - Record relationship establishment for attachment linking

Event Handling: - Page events trigger FactBox context updates - Ensures drag-and-drop always targets correct record - Maintains state consistency during record navigation

Control Add-in Communication

Extensibility Methods: - SetRecordData() - Establishes current record context - FileDropBegin() - Signals start of file drop operation - FileDrop() - Handles actual file data transmission - OnControlReady() - Indicates client readiness for operations

Event Lifecycle:

  1. Control initialization and readiness signaling
  2. Record context establishment
  3. File drop event processing
  4. Server-side business logic execution
  5. Status feedback to client interface

Storage Architecture

Document Attachment Integration

Drag & Drop leverages Business Central's native Document Attachment framework:

Table Structure: - Files stored in standard Document Attachment table - Maintains relationship to source records through table/record ID - Preserves file metadata and content integrity

Access Patterns: - Documents accessible through standard Business Central attachment interfaces - Maintains security permissions and access controls - Supports standard attachment operations (view, download, delete)

Data Persistence

File Storage: - Binary data stored as BLOB in Document Attachment table - File names and metadata preserved in table fields - Relationship data maintains link to source business entity

Audit Trail: - Activity logging through Q-Team Authenticator integration - License validation and usage tracking - User action recording for compliance

Security Architecture

Permission Management

Access Control: - Dedicated permission set controls extension usage - Granular permissions for each AL object - Standard Business Central security model integration

Authentication: - Q-Team Authenticator integration for license verification - User activity validation and tracking - Automated license renewal coordination

Data Security

Transmission Security: - File data transmitted through secure Business Central channels - No external web service dependencies - Client-server communication within Business Central boundary

Storage Security: - Files stored using Business Central's standard encryption - Access controlled through Business Central permissions - No additional security vulnerabilities introduced

Performance Considerations

Client-Side Optimization

File Handling: - JavaScript FileReader API provides efficient file processing - Base64 encoding minimizes transmission overhead - Progressive file reading for large documents

User Interface: - CSS animations provide immediate visual feedback - Non-blocking JavaScript execution prevents UI freezing - Efficient DOM manipulation for responsive interactions

Server-Side Optimization

Data Processing: - Efficient Base64 to binary conversion algorithms - Minimal memory allocation during file processing - Direct integration with Business Central storage APIs

Database Operations: - Standard Business Central table operations - Optimized insert patterns for Document Attachment table - Minimal transaction overhead for file storage

Extensibility Architecture

Customization Points

Page Extensions: - Additional pages can be extended using the established pattern - FactBox placement and styling can be customized - Context management can be adapted for custom entities

Business Logic: - Management codeunit provides extension points - File processing workflow can be enhanced - Additional validation and processing can be integrated

Development Guidelines

AL Development: - Follow established naming conventions (QTEAM prefix) - Maintain object ID range consistency (11196050-11196069) - Preserve existing event handler patterns

Client Development: - JavaScript extensions should maintain API compatibility - CSS customizations should preserve core functionality - Additional file type support can be implemented

This architecture provides a robust, scalable foundation for drag-and-drop functionality while maintaining full compatibility with Business Central's security, performance, and extensibility requirements.