Case Study:
Yados Form Server v2

Automatic Form Generation from SAP Data via Web Components

Customer

YADOS GmbH is an innovative company specializing in customized solutions for power generation, heat transfer, heat distribution, as well as intelligent control and communication technology. With a comprehensive offering that ranges from initial consulting and development to manufacturing and commissioning, YADOS takes a holistic approach, focusing on long-term partnerships and sustainable solutions. The company has earned great trust from clients not only across Germany but also internationally. Of particular note are their high standards for quality and efficiency, combined with a cooperative working style and a strong customer focus.

Project

The project began as a drive to fully digitize commissioning documentation: instead of using paper-based protocols and manual email dispatches, service partners were to access dynamic, multilingual web forms via unique access links, capture signatures directly in the browser, and send the results back to the ERP system in a structured way—either via email or in batch mode—without any direct, security-critical connection to the SAP system.

We successfully achieved these goals with the predecessor project FormServer v1: a PHP-based application generated HTML forms from YAML descriptions; the YAML configuration controlled fields, validations, translations, delivery, exports, and even allowed capturing signatures directly in the browser. This greatly simplified and standardized the commissioning documentation process for service partners.

During actual use, it became clear that many of the forms used by YADOS were very complex: layouts requiring tables and complex dependencies between fields could previously only be mapped to a limited extent. At the same time, the solution evolved into a central tool for the entire field service workflow and became a core part of the company’s infrastructure.

This led to growing requirements. In addition to reliable offline capability for locations without network coverage, there was demand for new field types and layout options. Faster software iterations had to be ensured by improved testability. Overall, a future-proof, flexible, and easily extensible solution was needed to meet the growing demands.

Implementation

For YADOS FormServer v2, CosmoCode consistently advanced the architecture towards a robust, modular frontend and streamlined the PHP backend to the essentials. The form-specific logic remains fully declarative: custom HTML forms are still generated from YAML descriptions, which centrally control fields, validations, translations, delivery options, exports, metadata, tooltips, and even custom CSS. This clean separation allows for fast iterations, easy extensions, and secure decoupling from the ERP system. At the same time, the system remains compatible with existing processes: YAML definitions can still be automatically generated from SAP order data and precisely distributed to service partners.

On the frontend, v2 leverages web components and the Custom Element API. By intentionally not using Shadow DOM, rendering integrates seamlessly with the global Bulma styling. The components are entirely state-driven. A central state object holds all form data, including file uploads as Data URIs, allowing components to listen for changes and re-render as needed. Morphdom ensures efficient, performant UI updates even for complex interactions with efficient DOM diffing. Dependencies between fields are declared in YAML and securely evaluated with expr-eval, enabling fine-grained visibility, calculations, and validations. New components—such as sorters, containers for tabular structures, page-based sections, or cloneable field groups—greatly expand the range of design possibilities without complicating the core architecture. Multilinguality, email delivery, export files as triggers for downstream data pickup, individual CSS adjustments, and the operating modes send/save (single-/multi-user) remain integral components of the solution.

There was special emphasis on robust offline capability. Since traditional browser storage quickly reaches its limits with large data volumes, FormServer v2 uses the Origin Private File System (OPFS). This allows forms with extensive file attachments to be stored locally and reliably, and synchronized later—a crucial advantage for use in locations without network coverage. The combination of a state-driven component architecture and OPFS ensures that input and uploads are preserved without loss until they can be transmitted. As a result, the entire application runs completely browser-based; there is no need for additional development of native apps, even with offline operation, large file uploads, and complex form logic.

A comprehensive end-to-end testing strategy using Cypress is employed to ensure quality and maintainability. Tests can run locally or in a container and integrate smoothly into the delivery pipeline, allowing even complex refactoring to be rolled out safely. The frontend is bundled with esbuild, enabling fast builds, slim output, and a modern toolchain. Larger frameworks like React were deliberately avoided to minimize dependencies. The clear, component-based architecture meets requirements without additional runtime libraries. FormServer is provided as an open-source project and is continuously maintained, ensuring transparency, reusability, and long-term investment security. At YADOS, it now serves as an essential part of the commissioning process.

Kunde
YADOS GmbH
Zeitraum
2025 - heute

We can also implement your project!

Do you want to implement a similar project? Or do you have a completely different idea? Talk to us and we will find the best solution together.