Anwendungsbeispiel: Formular mit Registerlaschen-Container strukturiert
Veröffentlichungsdatum: 21. Juni 2021
Änderungsdatum: 28. Juli 2021
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 eine Umsetzung eines Formulares mit Verwendung eines Registerlaschen-Containers an.
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.
