Formularlayout durch Overrides anpassen

Visforms implementiert das verbesserte JLayout Konzept von Joomla!. Deshalb können Sie praktisch fast jeden HTML-Code Schnipsel im Formular individuell überschreiben. Bitte beachten Sie, dass dieses Joomla! Feature zwar extrem cool und flexibel ist, es sich aber eindeutig an fortgeschrittene Benutzer wendet! Fehlerhafte Overrides können Visforms sehr schnell zerbrechen. Weiterhin müssen Sie nach jedem Visforms Update sicherstellen, dass Ihre Overrides noch aktuell sind und nicht die Funktionsfähighkeit von Visforms beeinträchtigen.

Layout Dateien liegen im Verzeichnis components/com_visforms/layouts

Der HTML-Code aller Formularfelder wird in den Layout-Dateien im Verzeichnis components/com_visforms/layouts erzeugt. Sie können für jedes beliebige Layout-File aus diesem Verzeichnis ein Override in Ihrem Template anlegen und den HTML-Code des Feldtypes individuell anpassen.

Um eine Layout Datei anzupassen legen Sie hierzu in Ihrem Template ein Verzeichnis mit dem Namenhtml an (falls dieses nicht schon existiert). Darin legen Sie ein Verzeichnis mit dem Namen layouts an (falls dieses nicht schon existiert). Darin legen Sie ein Verzeichnis com_visforms an und darin dann die komplette Verzeichnisstruktur die Sie im components/com_visforms/layouts-Verzeichnis zu der Datei, die Sie überschreiben wollen, vorfinden.

Wollen Sie beispielsweise ein Override für die Datei

components\com_visforms\layouts\visforms\mcindividual\multicheckbox\control.php

anlegen so lautet der vollständige Pfad in Ihrem Templateverzeichnis

html\layouts\com_visforms\visforms\mcindividual\multicheckbox\control.php

Welche Layout-Dateien in Ihrem Formular konkret verwendet werden hängt vom Feldtyp und vom Formularlayout ab

Genaue Informationen entnehmen Sie den Tabellen unten. Für die meisten Feldtypen gibt es eine Datei label.php in der das HTML für das Feld-Label erzeugt wird und eine Datei control.php in der das HTML des Controls im engeren Sinne (als des input-Elements, des select-Elements...) erzeugt wird. Existiert für einen Feldtyp keine label.php Datei, dann wird für diesen Typ entweder kein Label ausgegeben (z.B. beim Feldtrenner) oder das Label ist Bestandteil des Controls (z.B. bei Checkboxen im Bootstrap Layout). Darüber hinaus gibt es für unterschiedliche Formularlayouts teilweise eigene Implementierungen des HTML-Codes.

Nicht für alle Feldtypen existieren eigene Dateien

Da einige Feldypen hinsichtlich des zugrundeliegenden HTML's sehr ähnlich sind (z.B. Text, E-Mail, Passwort, Url, Zahl oder Submitbutten und Resetbutton) verwendenden sie dieselbe Layout Datei. Ein Schema, wo Sie die jeweilig relevanten Dateien abhängig vom Formularlayout und vom Feldtyp finden, gibt es weiter unten.

In manchen Formularlayouts werden Felder zusätzlich dekoriert

Je nachdem welches Layout Sie für Ihr Formular gewählt haben, wird das HTML, das ein Formularfeld erzeugt, zusätzlich noch in weiteres HTML gepackt. Z.B. werden für das horizontale Bootstrap Layout alle Felder in div-Elemente mit der Klasse "control-group" gepackt und noch in weiteren HTML Code. Für jeden Formular-Layouttyp gibt es deshalb im Verzeichnis "decorators" eine eigene Datei, die dieses umhüllende HTML um das Feld außen herum packt. Für einige Feldtypen, z.B. Checkboxen, ist der gesamte HTML-Code in den Bootstrap Layouts so verwoben, dass eine Trennung in Feld und Dekoration nicht möglich ist. D.h. Feldertypen können formularlayoutabhängig nicht dekorierbar sein und die entsprechende Dekorationsdatei wird dann nicht aufgerufen.

Wie muss ich die Infos in der Tabelle interpretieren?

Das bedeutet, wenn Sie als Formularlayout "Mehrspaltiges Layout" gewählt haben suchen Sie zuerst im Verzeichnis components/com_visforms/layouts/vsforms/mcindividual nach einem Unterverzeichnis mit dem Namen des Feldtyps des Feldes, für den Sie das Layout überschreiben wollen. Wenn Sie dieses Verzeichnis hier nicht finden, prüfen Sie, ob der gewählte Feldtyp von einem anderen Feldtyp abgeleitet ist und wenn ja, ob für den Feldtyp von dem abgeleitet wurde, ein Layout-Verzeichnis existiert. Ist auch dieses nicht vorhanden, schauen Sie von welchem Formularlayouttyp sich das gewählte Formular Layout ableitet (in unserem Beispiel wäre das das "Bootstrap Default Layout") und sehen dann im Verzeichnis dieses Formularlayouts nach, ob ein Verzeichnis mit dem Namen des Feldtyps des Feldes, für das Sie das Layout überschreiben wollen, existiert. Wenn nein, schauen Sie, ob der gewählte Feldtyp von einem anderen Feldtyp abgeleitet wird, .... bis Sie evtl. im Verzeichnis components/com_visforms/layouts/vsforms/default bei einem der Feldtypen laden, die nicht abgeleitet sind.

Beispiel: Wo finde ich die Layoutdateien eines Feldes vom Typ Checkbox Gruppe für das Horizontale Bootstrap Layout?

Existiert das Verzeichnis components/com_visforms/layouts/vsforms/bthorizontal/multicheckbox? Nein
Von welchem Feldtyp leitet sich die Checkbox Gruppe ab? Vom Radio Button
Existiert das Verzeichnis components/com_visforms/layouts/vsforms/bthorizontal/radio? Nein
Von welchem Formularlayout leitet sich das Horizontale Bootstrap Layout ab? Vom Default Bootstrap Layout
Existiert das Verzeichnis components/com_visforms/layouts/vsforms/btdefault/multicheckbox? ja
In diesem Verzeichnis finden Sie die gesuchten Layout Dateien.

Layout Overrides erfolgen "auf eigene Gefahr"

Visforms kommt mit einem großen Funktionsumfang. Dieser spiegelt sich auch darin wider, dass der HTML-Code sehr individuell angepasst ist. Visforms ist z.B. für das Funktionieren der "Bedingten Felder" auf bestimmte Class-Attribute und bestimmte Style-Attribute im Code angewiesen. Bitte beachten Sie, dass unprofessionelle Layout Overrides leicht dazu führen können, dass Visforms nicht mehr wie erwartet funktioniert. Wir wollten die Möglichkeit, Overrides zu erstellen für Leute mit ausreichenden Kenntnissen in HTML, CSS, PHP und Joomla! anbieten, weisen aber ausdrücklich darauf hin, dass die Anfertigung von Overrides vollständig "auf eigene Gefahr" erfolgt und wir auch keinen kostenfreien Support in diesem Bereich geben können.

Zur Beitragsliste