Case Study:
Yados Form Server v2

Kunde

Die YADOS GmbH ist ein innovatives Unternehmen, das sich auf maßgeschneiderte Lösungen in den Bereichen Energieerzeugung, Wärmeübergabe, Wärmeverteilung sowie intelligente Leit- und Kommunikationstechnik spezialisiert hat. Mit einem umfassenden Angebot, das von der anfänglichen Beratung über die Entwicklung und Fertigung bis hin zur Inbetriebnahme reicht, verfolgt YADOS einen ganzheitlichen Ansatz und stellt langfristige Partnerschaften sowie nachhaltige Lösungen in den Mittelpunkt. Das Unternehmen genießt nicht nur deutschlandweit, sondern auch international großes Vertrauen bei seinen Kunden. Besonders hervorzuheben ist der hohe Anspruch an Qualität und Effizienz, verbunden mit einer partnerschaftlichen Zusammenarbeit und einer starken Kundenorientierung.

Projekt

Ausgangspunkt war die konsequente Digitalisierung der Inbetriebnahme-Dokumentation: Statt papierbasierter Protokolle und manuellem E-Mail-Versand sollten Servicepartner über individuelle Zugriffslinks auf dynamische, mehrsprachige Webformulare zugreifen, Unterschriften direkt im Browser erfassen und die Ergebnisse strukturiert per E‑Mail oder im Batch-Verfahren ins ERP zurückspielen – und das ohne eine direkte, sicherheitskritische Anbindung an das SAP‑System.

Diese Ziele haben wir mit dem Vorgängerprojekt FormServer v1 erfolgreich umgesetzt: Eine PHP-basierte Anwendung generierte HTML-Formulare aus YAML-Beschreibungen; die YAML-Konfiguration steuerte Felder, Validierungen, Übersetzungen, Versand und Exporte und ermöglichte die Erfassung von Unterschriften direkt im Browser. Damit wurde die Inbetriebnahme-Dokumentation für die Servicepartner wesentlich vereinfacht und standardisiert.

Im praktischen Einsatz zeigte sich, dass viele der von YADOS genutzten Formulare sehr komplex sind: tabellarische Darstellungen im Layout und komplexe Abhängigkeiten zwischen Feldern ließen sich jedoch bislang nur eingeschränkt abbilden. Parallel entwickelte sich die Lösung zum zentralen Werkzeug im gesamten Außendienstworkflow und zur Kerninfrastruktur des Unternehmens.

Entsprechend wuchsen die Anforderungen. Neben einer verlässliche Offline‑Fähigkeit für Orte ohne Netzabdeckung gab es diverse Wünsche für neue Feldtypen und Layoutmöglichkeiten. Schnellere Iterationen der Software sollten durch eine verbesserte Testbarkeit sichergestellt werden. Insgesamt war eine zukunftssichere, flexible und einfach erweiterbare Lösung gefragt, die den wachsenden Anforderungen gerecht wird.

Umsetzung

Für den YADOS FormServer v2 hat CosmoCode die Architektur konsequent in Richtung eines starken, modularen Frontends weiterentwickelt und das PHP-Backend auf das Nötigste verschlankt. Die formularspezifische Logik bleibt vollständig deklarativ: Individuelle HTML-Formulare werden weiterhin aus YAML-Beschreibungen erzeugt, über die Felder, Validierungen, Übersetzungen, Versandoptionen, Exporte, Metadaten, Tooltips und sogar individuelles CSS zentral gesteuert werden. Diese klare Trennung erlaubt schnelle Iterationen, saubere Erweiterungen und eine sichere Entkopplung vom ERP-System. Gleichzeitig bleibt das System kompatibel mit bestehenden Abläufen: YAML-Definitionen können wie bisher automatisiert aus SAP-Auftragsdaten erzeugt und zielgenau an Servicepartner bereitgestellt werden.

Im Frontend setzt v2 auf Web Components und die Custom-Element-API. Bewusst ohne Shadow DOM gehalten, fügt sich das Rendering nahtlos in das globale Bulma-Styling ein. Die Komponenten arbeiten dabei ausschließlich zustandsgetrieben arbeiten. Ein zentrales State-Objekt hält sämtliche Formulardaten vor, inklusive Uploads als Data-URIs, wodurch Komponenten auf Änderungen lauschen und sich bedarfsgerecht neu rendern. Für performantes UI-Verhalten sorgt morphdom mit effizientem DOM-Diffing auch bei komplexen Interaktionen. Abhängigkeiten zwischen Feldern werden deklarativ in YAML formuliert und über expr-eval sicher ausgewertet, was feingranulare Sichtbarkeiten, Berechnungen und Validierungen ermöglicht. Neue Komponenten wie Sortierer sowie Container für tabellarische Strukturen, seitenbasierte Bereiche oder klonbare Feldgruppen erweitern den Gestaltungsspielraum deutlich, ohne die Grundarchitektur zu verkomplizieren. Multilingualität, E-Mail-Versand, Exportdateien als Trigger für nachgelagerte Datenabholung, individuelle CSS-Anpassungen sowie die Betriebsmodi Senden und Speichern (single-/multiuser) bleiben dabei integraler Bestandteil der Lösung.

Ein besonderer Fokus lag auf robuster Offline-Fähigkeit. Da klassischer Browser-Storage für größere Datenmengen schnell an Grenzen stößt, nutzt der FormServer v2 das Origin Private File System (OPFS). So lassen sich Formulare mitsamt umfangreichen Dateianhängen lokal und zuverlässig persistieren und zu einem späteren Zeitpunkt synchronisieren – ein entscheidender Vorteil für den Einsatz an Standorten ohne Netzabdeckung. Die Kombination aus zustandsgetriebener Komponentenarchitektur und OPFS stellt sicher, dass Eingaben und Uploads verlustfrei erhalten bleiben, bis sie übertragen werden können. Damit bleibt die gesamte Applikation vollständig browserbasiert; eine zusätzliche Entwicklung nativer Apps ist trotz Offline-Betrieb, großer Dateiuploads und komplexer Formularlogik nicht erforderlich.

Für Qualitätssicherung und Wartbarkeit kommt eine umfassende End-to-End-Teststrategie mit Cypress zum Einsatz. Die Tests laufen lokal oder im Container und lassen sich reibungslos in die Delivery-Pipeline integrieren, wodurch auch komplexe Refactorings sicher ausgerollt werden können. Das Frontend wird mit esbuild gebündelt, was schnelle Builds, einen schlanken Output und eine moderne Toolchain gewährleistet. Auf umfangreiche Frameworks wie React wurde bewusst verzichtet, um Abhängigkeiten zu minimieren. Die klare, komponentenbasierte Architektur deckt die Anforderungen ohne zusätzliche Laufzeitbibliotheken ab. Der FormServer wird als Open-Source-Projekt bereitgestellt und kontinuierlich gepflegt, was Transparenz, Wiederverwendbarkeit und langfristige Investitionssicherheit bietet. Bei YADOS fungiert er inzwischen als essenzieller Bestandteil der Inbetriebnahmeprozesse.