Case Study: Plone Dexterity und VueJS Form Generator

Für das Portal der ITAD auf Basis von Plone sollte die Cusy GmbH ein komplexes Formular mit über 100 Feldern leichter bedienbar machen. Dies erreichten wir durch

• die Gliederung der Felder in sog. Fieldsets
• unmittelbare, Client-seitige Validierung der Feldinhalte
• redaktionell konfigurierbare Sichtbarkeit der einzelnen Felder
• automatische Formatierung von Zahlen und Texten

Plone-Dexterity schien uns wenig geeignet, um abhängige Felder zu implementieren. Für diese wie auch die anderen Anforderungen schien uns der Vue Form Generator deutlich besser geeignet.

Mit dem Vue Form Generator implementierten wir die Formulare als Web-Komponenten mit JSON (siehe z.B. github.com/vue-generators/…/main.js). Solche JSON-Felddefinitionen werden sowohl für die Bearbeitung wie auch die Ansicht der Formulare verwendet. Zusätzlich nutzten wir noch einige Nicht-Standard-Feldtypen, die der Vue Form Generator bereitstellt: Optionale Felder. Die Dexterity-basierten Artikeltypen erhalten die Formulardaten per AJAX. Serverseitig werden sie erneut validiert und ggf. als Annotationen gespeichert. In den Schemas dieser Dexterity-Inhaltstypen sind nur die Metadaten des Dublin-Core gespeichert.

Für uns ist das Resümee dieser Fallstudie, dass VueJS und der Vue Form Generator einfach in Plone integriert werden können. Dabei werden mit JSON die Formulare definiert und Dexterity lediglich als Backend zum Speichern der Formulardaten verwendet.