Layout durch Overrides anpassen

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.

FeldtypErbt vonDekorierbarVerzeichnisname
Text - jatext
E-MailTextjaemail
PasswortTextjapassword
ZahlTextjanumber
URLTextjaurl
File Upload-jafile
Datum - jadate
Submit-Button - neinsubmit
Reset-ButtonSubmitneinreset
Image Submit-ButtonSubmitneinimage
Radio Button - jaradio
Checkbox GruppeRadio Buttonjamulticheckbox
Listbox - jaselect
Checkbox - neincheckbox
Textarea - jatextarea
Feldtrenner - jafieldsep
Hidden - neinhidden

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.