Das Attribut for="..." für das Label muss nicht gesetzt werden. Den Attributen data-before und data-after können mittels einer Message-Key-Methode #{msgs.[einMessageKey]} die Texte für die Eingabefelder übergegeben werden.
<!-- FILE --><labelclass="form-control form-control--file"> <inputtype="file"id="inputTypeFileId"name="inputTypeFile"> <spanclass="form-control--file-custom"data-before="[Text für before]"data-after="[Text für after]"></span></label>
Checkboxen
Als Standard werden die Checkboxen in einer horizontalen Reihe aufgelistet. Das Attribut for="..." für das Label muss gesetzt werden, damit die korrekte Checkbox ausgewählt wird.
Als Standard werden die Radio-Buttons in einer horizontalen Reihe aufgelistet. Das Attribut for="..." für das Label muss gesetzt werden, damit der korrekte Radio-Button ausgewählt wird.
Die oben aufgeführte Formular-Komponenten sind in den Formular-Gruppen verwendbar. Die Spalten (col) sind nach den Bootstrap 4 Grid Regeln zu verwenden. Die folgenden Beispiele sind auf zwei- und dreispaltige Formular-Gruppen ausgelegt.
Formular-Gruppe (dreispaltig)
Das Attribut for="..." für das Label ist optional. Das Label kann auch durch einen <span>...</span> ersetzt werden.
Boxen sind standardmäßig blau und nicht ein- und ausklappbar. Die Farbe und Funktionalität kann durch ergänzende CSS-Klassen verändert werden. Der Bereich module__box-title-actions ist optional.
<!-- MODULE BOX COLLAPSABLE --><divclass="module module__box module__box--collapsable"> SAME AS MODULE BOX...</div>
Box (grau)
<!-- MODULE BOX GRAY --><divclass="module module__box module__box--gray"> SAME AS MODULE BOX...</div>
Box (weiß)
<!-- MODULE BOX WHITE --><divclass="module module__box module__box--white"> SAME AS MODULE BOX...</div>
Box (komplett)
Gilt für alle Farbmöglichkeiten.
<!-- MODULE BOX COMPLETE --><divclass="module module__box module__box--collapsable module__box--white"> SAME AS MODULE BOX...</div>
Buttons
Es gibt mehrere Arten von Buttons, die alle die CSS-Klasse btn als Elternklasse haben. Die Modifikationen der Buttons werden durch zusätzliche CSS-Klassen gesteuert. Die Icons in den Buttons können beliebig durch ein Icon der Bibliothek von Font Awesome 4 ausgetauscht werden.
Eine Besonderheit für einen Button gibt es noch. Wird die CSS-Klasse btn--toggle an einen Button vergeben und als nächstes Element ein <div /> gesetzt, so kann dieses DIV auf- und zugeklappt werden.
Ein weiterer Spezial-Button wird durch die CSS-Klasse btn--loader aktiviert. Wird diese Klasse vergeben, so wird während eines AJAX-Request <f:ajax /> ein animierter Loader im geklickten Button angezeigt und nach Abschluss des Requests wieder ausgeblendet.
Das JavaScript ist modular aufgebaut und basiert auf einem Basismodul, welches beim Aufruf der Seite initialisiert wird. Es erschafft ein globales Objekt mit dem Namen goobiWorkflowJS. Diesem Objekt werden, durch weitere Module, Methoden angehängt und können so in dessen Scope aufgerufen werden.
Zusatzmodul
Dem Zusatzmodul wird das globale Objekt goobiWorkflow übergeben und ermöglicht es so, das Objekt mit zusätzlichen Methoden zu erweitern. In einem Modul können Methoden oder Variablen definiert werden, die nur im Modul (private) oder im globalen Objekt (public) aufgerufen werden können.