Anwendungsbeispiel: Formular mit Registerlaschen-Container strukturiert

Formulare lassen sich über Container wie z.B. den Registerlaschen-Container strukturieren.

Formular mit Registerlaschen-Container (Seitenansicht)
Formular mit Registerlaschen-Container (Seitenansicht)

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

Formular mit Registerlaschen-Container
Formular 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.

Formular mit mehrspaltigem Container (Seitenansicht)
Formular mit mehrspaltigem Container (Seitenansicht)
Formular mit mehrspaltigem Container
Formular mit mehrspaltigem Container

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.