Vue Dynamic Data Forms Demo

Daten, die Formulare erzeugen, die Daten erzeugen

Diese Demo zeigt ein allgemeines Dateneingabemodul ähnlich einer Excel Tabelle, mit dem ein Redakteur möglichst zeitsparend und fehlerreduziert die Rohdaten einpflegen kann. Mittels Vue.js können variable Model-Properties sehr gut zur Laufzeit an variable Eingabeelemente gebunden werden.

Ziel eines solchen Eingabemoduls ist es, über einen möglichst offenen Mechanismus datenlastige Inhaltsbereiche einer Seite möglichst einfach und schnell verwalten zu können. Statt für Datenauflistungen im CMS zeitaufwändig HTML-Fragmente zu editieren (z.B. eine HTML Table), muss ein Redakteur nur die Rohdaten einpflegen.

Die Ausgabe im Frontend wird dann durch einmalig projektspezifisch implementierte, benutzerdefinierte Funktionen gerendert. Diese Art Inhaltsmodul rentiert sich insbesondere bei häufig zu aktualisierenden Inhaltsbereichen (z.B. Preis- oder Adresslisten), da wir eine maximale Trennung von Daten und Repräsentation erreichen. Die zugrundeliegende Pipeline ist möglichst abstrakt und ermöglicht das Durchreichen von beliebigen Daten an beliebige serverseitig zu implentierende PHP functions. So lässt sich eine Website schneller um neue benutzerdefinierte Funktionen erweitern.

Es können pro Inhaltsmodul beliebig viele Datenseiten erzeugt werden, die dann zusätzlich über PageID und/oder beliebige Tags serverseitig zur Ausgabe gefiltert werden können. Zudem können auch zusätzliche Parameter definiert und weitere META-Daten hinzugefügt werden. Da jedes Inhaltsmodul self-contained ist, enthält es neben den Daten auch das jeweilige Schema, so dass z.B. neben den erwarteten Feld-Typen auch die ursprünglichen Values der Options eines select Eingabeelementes für das Rendern der Frontendausgabe zur Verfügung stehen.