Das Formular Layout 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.
Hinweis: Dieses Joomla Feature ist extrem cool und äußerst flexibel. Es wendet sich aber ganz eindeutig an wirklich fortgeschrittene Benutzer.
Fehlerhafte Overrides können Visforms sehr schnell zerbrechen. Weiterhin müssen Sie nach Visforms Updates sicherstellen, dass Ihre Overrides noch aktuell sind. Ansonsten kann die einwandfreie Funktionsfähigkeit von Visforms beeinträchtigt sein. Wenn wir Layout-Dateien geändert haben, geben wir ihm Rahmen des Update-Prozesses gegen Ende eine entsprechende Meldung aus, die Sie darauf hinweist.
Das Verzeichnis für Ihre Layout-Dateien
Layout Dateien liegen im Verzeichnis components/com_visforms/layouts. Der HTML-Code aller Formularfelder wird mit den Layout-Dateien im Verzeichnis components/com_visforms/layouts erzeugt. Sie können eine Override-Datei (eine geänderte Kopie des Original) für jedes beliebige Layout-File aus diesem Verzeichnis unter Ihrem Template Verzeichnis anlegen.
Auf die folgende Weise passen Sie den HTML-Code des Feldtyps individuell nach Ihren Wünschen an.
- Legen Sie in Ihrem Template ein Verzeichnis mit dem Namen html an, falls dieses nicht bereits existiert.
- Legen Sie darin ein Verzeichnis mit dem Namen layouts an, falls dieses nicht bereits existiert.
- Legen Sie darin ein Verzeichnis com_visforms an, falls dieses nicht bereits existiert.
In diesem ‘Start’ Verzeichnis innerhalb des Templates html/layouts/com_visforms, legen Sie nun weitere Verzeichnisse an.
Sie legen dort die gleiche relative Verzeichnisstruktur an, wie für die originale Datei unter dem originalen Visforms ‘Start’ Verzeichnis components/com_visforms/layouts.
Wollen Sie beispielsweise eine Override-Datei für die Original-Datei
components\com_visforms\layouts\visforms\bt5\multicheckbox\control.php
ein Override anlegen, so lautet der vollständige Pfad in Ihrem Template-Verzeichnis
html\layouts\com_visforms\visforms\bt5\multicheckbox\control.php
Welche Layout-Dateien werden konkret verwendet?
Welche Layout-Dateien in Ihrem Formular konkret verwendet werden, ist abhängig
- vom Feldtyp und
- vom gewählten UI-Framework.
Für das UI-Framework “Keines” liegen die Dateien im Verzeichnis
components\com_visforms\layouts\visforms\default
Für das UI-Framework “Bootstrap 5” liegen die Dateien im Verzeichnis
components\com_visforms\layouts\visforms\bt5
Für die meisten Feld-Typen gibt es eine Datei label.php in der separat das HTML für das Feld-Label erzeugt wird. Und es gibt eine zweite Datei control.php in der das HTML des Controls im engeren Sinne erzeugt wird (etwa das input-Elements oder das select-Element).
Für manche Feld-Typen existiert keine label.php Datei. Dann wird für diesen Typ entweder kein Label ausgegeben (etwa beim Feldtrenner) oder das Label ist bereits Bestandteil des Controls (etwa bei Checkboxen im Bootstrap Layout). Darüber hinaus gibt es für unterschiedliche UI-Frameworks teilweise eigene Implementierungen des HTML-Codes.
Nicht für alle Feldtypen existieren eigene Dateien
Einige Feldtypen sind sich hinsichtlich des zugrundeliegenden HTML sehr ähnlich, etwa
- Text, E-Mail,
- Passwort,
- URL,
- Zahl,
- Submit-Button und
- Reset-Button.
Daher verwenden diese HTML-ähnlichen Controls ein und dieselbe Layout-Datei.
Weiter unten gibt es eine Liste für die Verzeichnisse, in denen Sie die jeweiligen relevanten Dateien abhängig vom Formular-Layout und vom Feldtyp finden.
Formularlayouts dekorieren Felder zusätzlich
In manchen Formular-Layouts werden Felder in zusätzliche HTML-Tags eingebettet. Je nachdem, welches Layout Sie für Ihr Formular gewählt haben, wird das eigentliche HTML eines Formularfeldes, zusätzlich noch in weiteres HTML gepackt. Etwa werden für das Bootstrap Layout alle Felder in ein umhüllendes div-Element gepackt und anschließend noch in weiteren HTML Code.
Für jedes UI-Framework gibt es deshalb im Verzeichnis decorators eine eigene Datei mit der Aufgabe, dieses umhüllende HTML um das eigentliche Feld außen herum zu packen. Für einige Feldtypen, wie etwa die Checkboxen, ist der gesamte HTML-Code in den Bootstrap Layouts sehr stark ‘verwoben’. Eine saubere Trennung in Feld und Dekoration ist dort nicht möglich.
Bestimmte Feldtypen können also Formular-Layout-abhängig nicht dekorierbar sein. Die entsprechende Dekorationsdatei wird dann auch nicht aufgerufen.
| Feldtyp | Erbt von | Dekorierbar | Verzeichnisname |
|---|---|---|---|
| Text | - | ja | text |
| Text | ja | ||
| Passwort | Text | ja | password |
| Zahl | Text | ja | number |
| URL | Text | ja | url |
| File Upload | - | ja | file |
| Datum | - | ja | date |
| Submit-Button | - | nein | submit |
| Reset-Button | Submit | nein | reset |
| Image Submit-Button | Submit | nein | image |
| Radio Button | - | ja | radio |
| Checkbox Gruppe | Radio Button | ja | multicheckbox |
| Listbox | - | ja | select |
| Checkbox | - | nein | checkbox |
| Textarea | - | ja | textarea |
| Feldtrenner | - | ja | fieldsep |
| Hidden | - | nein | hidden |
Interpretation der Tabelle
Die Informationen der Tabelle bedeuten das folgende. Angenommen Sie haben als UI-Framework “Bootstrap 5” und als Sublayout “Individuell” gewählt. Dann suchen Sie zuerst im Verzeichnis components/com_visforms/layouts/visforms/bt5 nach einem Unterverzeichnis mit dem Namen des Feld-Typs 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. Wenn das der Fall ist, prüfen Sie weiter, ob für den Feldtyp von dem abgeleitet wurde, ein Layout-Verzeichnis existiert.
Ist auch dieses nicht vorhanden, schauen Sie von welchem Formular-Layout-Typ sich das gewählte UI-Framework ableitet. In unserem Beispiel wäre dies das UI-Framework “Keines”. Sehen Sie dann im Verzeichnis dieses Formular-Layouts nach, ob ein Verzeichnis mit dem Namen des Feld-Typs des Feldes existiert, für welches Sie das Layout überschreiben wollen.
Overrides erfolgen “auf eigene Gefahr”
Alle Ihre Layout-Overrides unterliegen Ihrer eigenen Verantwortung und erfolgen “auf eigene Gefahr”. Visforms kommt mit einem großen Funktionsumfang. Dieser große Funktionsumfang spiegelt sich auch darin wider, dass der HTML-Code sehr spezifisch hinsichtlich der verschiedenen Funktionalitäten implementiert ist.
Visforms ist etwa für das Funktionieren der “Bedingten Felder” auf bestimmte Class-Attribute und bestimmte Style-Attribute im Code angewiesen. Sind diese Attribute teilweise nicht mehr vorhanden, dann funktioniert Visforms nicht wie erwartet und es kann zu Fehlern kommen.
Hinweis: Unaufmerksame Layout Overrides können leicht dazu führen, dass Visforms nicht mehr wie erwartet funktioniert.
Vorsicht: Wir wollen die Möglichkeit Overrides zu erstellen für Anwender mit ausreichenden Kenntnissen in HTML, CSS, PHP und Joomla unbedingt anbieten. Wir 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.