Anwendungsbeispiel: Formular mit Registerlaschen-Container strukturiert
Veröffentlichungsdatum: 21. Juni 2021
Änderungsdatum: 17. März 2023
weblication cms formular container registerlaschen akkordeon tabs spalten strukturieren aufteilen
Formulare lassen sich über Container wie z.B. den Registerlaschen-Container strukturieren.
Zur Umsetzung empfehlen wir das Zusatzmodul Formular-Editor, über
welches komfortabel über den Struktureditor und die Formularmasken
gearbeitet werden kann. Das folgende Beispiel führt auf Grundlage der BASE (Mobile First) eine Umsetzung eines
Formulares mit Verwendung eines Registerlaschen-Containers an. Sie können dies natürlich auf ähnliche Weise über das Formular-Element "Container mit Inhaltselementen" auch über den mehrspalten Inhaltscontainer über Spalten umsetzen.
Formularumsetzung mit Registerlaschen-Container
Mit dem Formular-Editor lässt sich die Umsetzung rein mit Bordmitteln realisieren.
Fügen Sie dazu in einer Seite zuerst ein Formular-Element über den Struktureditor ein. Als erstes Element im Formular fügen Sie das Strukturelement "Container mit Inhaltselementen" ein und können darin z.B. den "Container mit Inhaltselementen" einfügen.
Darin können Sie weitere Inhaltselemente (z.B. eine Inhaltsbox o.ä.) platzieren und auch mit dem "Container mit Formularelementen" arbeiten, um die gewünschten Formulare innerhalb der Registerlaschen zu verteilen.
Zusätzlich ermöglicht das Element "Bedingter Container mit Formularelementen" ein bedingtes Einblenden von Formular-Elementen abhängig von bestimmten Werten anderer Formular-Elemente.
Sofern die Registerlaschen abhängig von Pflichtfeldern (Validator) kenntlich gemacht werden sollen, können Sie dies durch eine Ergänzung in der design.js und per CSS z.B. wie folgt realisieren.
Beispiel: Auszug aus design.js
// ...
////////////////////////////////////////////////////////////////
//
// Initialisieren der Seite
//
////////////////////////////////////////////////////////////////
jQuery(document).ready(function(){
// ...
jQuery('*[data-isinvalid="1"]').each(function(){
jQuery('#tab_' + jQuery(this).closest('.container').addClass('containsInvalidInputs').attr('id').replace(/^container_/,'')).addClass('containsInvalidInputs');
});
});Beispiel: Auszug aus additional.scss
/* Ergänzende Styles */ .containsInvalidInputs { background-color: rgba(251,0,8,0.3) !important; color: #FB0008 !important; } /* ... */
Formularumsetzung mit mehrspaltigem Container
Ein Beispiel mit einem mehrspaltigem Inhaltscontainer zeigen die nachfolgenden Screens auf.
Wichtig
Verschachtelte Bedingungen sollten sich nicht darauf verlassen, daß eine Bedingung bzw. Auswahl weiter oben gesetzt ist. Man sollte bei inneren Bedingungen die äussere immer auch nochmals mit abfragen.