Technische Dokumentation: Reservation Transfer Control Add-in / Technical Documentation: Reservation Transfer Control Add-in

1. System Architecture / Systemarchitektur

🇩🇪 Das ResTransfer-Modul ist als Microsoft Dynamics 365 Business Central Control Add-in implementiert. Es bietet eine spezialisierte, interaktive Benutzeroberfläche zur Verwaltung und Umbuchung von Reservierungen zwischen Rahmenverträgen und Verkaufsaufträgen mittels eines webbasierten Frontends (HTML/JS), das direkt in die ERP-Umgebung eingebettet ist.

🇺🇸 The ResTransfer module is implemented as a Microsoft Dynamics 365 Business Central Control Add-in. It provides a specialized, interactive user interface for managing and reassigning reservations between Blanket Orders and Sales Orders using a web-based frontend (HTML/JS) embedded directly into the ERP environment.

2. Technology Stack / Technologie-Stack

🇩🇪

• Backend: AL (Application Language) für die Datenorchestrierung und Datenbanktransaktionen.
• Frontend: HTML5, CSS3 (Flexbox/Grid für responsives Layout) und Vanilla JavaScript (ES6+).
• Kommunikation: Asynchrone bidirektionale Kommunikation über InvokeExtensibilityMethod (Frontend an Backend) und External Events (Backend an Frontend).

🇺🇸

• Backend: AL (Application Language) for data orchestration and database transactions.
• Frontend: HTML5, CSS3 (Flexbox/Grid for responsive layout), and Vanilla JavaScript (ES6+).
• Communication: Asynchronous bidirectional communication via InvokeExtensibilityMethod (Frontend to Backend) and External Events (Backend to Frontend).

3. Component Overview / Komponentenübersicht

🇩🇪

• render.js: Verantwortlich für die DOM-Injektion; baut das statische HTML-Gerüst und die Steuerungselemente bei der Initialisierung auf.
• styles.css: Definiert die visuelle Darstellung, einschließlich der fixierten Header, internen Scroll-Container für große Datenmengen und hierarchischer Einrückungen für Chargen- und Palettenebenen.
• index.js: Der Kern der Programmlogik. Verwaltet den lokalen Status (DataStore), steuert die Event-Delegation für Klick-Aktionen und führt Echtzeit-Gewichtsberechnungen durch.

🇺🇸

• render.js: Responsible for DOM injection; it builds the static HTML structure and the control bar upon initialization.
• styles.css: Defines the visual representation, including the "sticky" header, internal scroll containers for large datasets, and hierarchical indentation for Lot/Pallet levels.
• index.js: The core logic engine. It manages the local state (DataStore), handles event delegation for drag-and-drop/click actions, and performs real-time weight calculations.

4. Data Flow & State Management / Datenfluss & Statusverwaltung

🇩🇪 Die Anwendung folgt einem „Single Source of Truth“-Prinzip innerhalb des Frontends. Alle Daten werden in einem zentralen DataStore-Objekt gespeichert. Wenn Elemente zwischen den Panels verschoben werden, werden die Objekte innerhalb der JavaScript-Arrays neu zugewiesen und die Benutzeroberfläche basierend auf diesem neuen Status neu gezeichnet.

🇺🇸 The application follows a "Single Source of Truth" principle within the frontend. All data is stored in a central DataStore object. When items are moved between panels, the objects are reassigned within the JavaScript arrays, and the UI is re-rendered based on this new state.

🇩🇪 Während des Synchronisationsprozesses (syncToBC) wird der gesamte DataStore als ein einzelnes JSON-Objekt an Business Central zurückübermittelt, einschließlich eines Metadaten-Feldes für die gewählte „Reservierungsmethode“ (z. B. Shipping oder Pick Instruction).

🇺🇸 During the synchronization process (syncToBC), the entire DataStore is transmitted back to Business Central as a single JSON object, including a metadata field for the selected "Reservation Method" (e.g., Shipping vs. Pick Instruction).

5. UI Concepts & UX / UI-Konzepte & UX

🇩🇪 Um die Performance bei großen Datenmengen zu gewährleisten, nutzt die Tabelle eine flache DOM-Struktur mit CSS-basierten Einrückungen, um eine Hierarchie (Charge > Palette > Box) zu simulieren. Das Layout ist auf die Viewport-Höhe (100vh) begrenzt, damit der „Transfer“-Button und die Statusmeldungen jederzeit sichtbar bleiben, während die Datentabellen intern scrollen.

🇺🇸 To ensure performance with high data volumes, the table uses a flat DOM structure with CSS-based indentation to simulate a hierarchy (Lot > Pallet > Box). The layout is constrained to the viewport height (100vh) to keep the "Transfer" button and status messages visible at all times, while the data tables scroll internally.

6. Funktionsreferenz / Function Reference (index.js)

🇩🇪 Diese Tabelle dient als Leitfaden für Entwickler zur Wartung der Kernlogik. Jede Funktion ist modular aufgebaut, um sicherzustellen, dass Änderungen an der Benutzeroberfläche (CSS/HTML) die zugrunde liegende Datenverarbeitung nicht beeinträchtigen.

🇺🇸 This table serves as a developer guide for maintaining the core logic. Each function is designed to be modular, ensuring that changes to the UI (CSS/HTML) do not break the underlying data processing.

Function / Funktion	Description 🇺🇸	Beschreibung 🇩🇪
window.LoadData	Primary entry point. Receives JSON from BC, populates the DataStore, and triggers the initial render.	Primärer Einstiegspunkt. Empfängt JSON von BC, befüllt den DataStore und triggert das erste Rendering.
render()	Main UI loop. Orchestrates the drawing of both panels and updates global statistics.	Haupt-UI-Schleife. Orchestriert das Zeichnen beider Panels und aktualisiert die globalen Statistiken.
renderSide(side)	Generates the HTML for a specific panel (left/right) by iterating through the hierarchical data.	Generiert das HTML für ein spezifisches Panel (links/rechts) durch Iteration durch die hierarchischen Daten.
moveLeftToRight()	Business logic for moving selected reservations from Blanket Orders to Sales Orders.	Logik zum Verschieben selektierter Reservierungen von Rahmenverträgen zu Verkaufsaufträgen.
moveRightToLeft()	Reverses the assignment; moves selected items back to the source (Blanket Orders).	Kehrt die Zuweisung um; verschiebt selektierte Elemente zurück zur Quelle (Rahmenverträge).
updateSummaryStats()	Calculates real-time totals (KG/Alpha) and compares them against target quantities.	Berechnet Echtzeit-Summen (KG/Alpha) und vergleicht diese mit den Zielmengen der Belege.
attachEvents()	Sets up global event delegation for clicks, filters, and toggle (collapse/expand) actions.	Richtet die globale Event-Delegation für Klicks, Filter und Auf- bzw. Zuklappen-Aktionen ein.
syncToBC()	Collects all current states and the selected method, then transmits the JSON object to AL.	Sammelt alle aktuellen Zustände sowie die gewählte Methode und überträgt das JSON-Objekt an AL.
getFlat(side)	Helper: Flattens the nested order/reservation structure into a simple array for easier filtering.	Helfer: Flacht die verschachtelte Auftragsstruktur in ein einfaches Array für einfacheres Filtern ab.
isMicrosoftAvailable()	Safety check: Verifies if the Microsoft Dynamics NAV JS Bridge is ready for communication.	Sicherheitscheck: Prüft, ob die Microsoft Dynamics NAV JS Bridge bereit für die Kommunikation ist.