Range Selector ​

Overview ​

Intro ​

Der Range Selector wird ausschließlich für die Suchleiste auf der Master-Detail-Seite genutzt. In Formularen werden stattdessen die Komponenten Combo Box , Text field oder Dropdown genutzt.

Die Bereichsauswahl-Komponente ermöglicht es dem Nutzer alphanumerische Werte innerhalb eines "von"-"bis"-Bereiches einzugeben. Dazu zählen beispielsweise Datumseingaben, Zeiteingaben, Zahlenwerte oder Hausnummernbereiche. Die Eingabefelder sind auf einzeilige Texteingaben ausgerichtet. Alphanumerische Eingaben können unformatiert oder entsprechend der Formatter-Vorgaben konfiguriert sein. Die Eingabefelder können Icons enthalten. Die Eingabefelder können ebenfalls Datumsfelder, Comboboxen oder Dropdown-Felder sein.

Ein Eingabefeld sollte immer einen klaren Zweck haben, der als Label angezeigt wird (z.B. Datum von, Datum bis, Uhrzeit von, Uhrzeit bis etc.)

Bei Zahleneingaben von-bis: Wird das erste oder letzte Feld der Bereichsauswahl leer gelassen, gilt das erste leere Feld automatisch als minus unendlich Wert und das letzte leere Feld als unendlich Wert.

Textausrichtung ​

Die Textausrichtung innerhalb der Textfelder ist standardmäßig linksbündig. Dadurch stehen das Label und der Wert räumlich und visuell nah beieinander, was das Erfassen der Eingabefelder für den Nutzer erleichtert.

Rechts ausrichten ​

Zahlenwerte wie Währungen oder Maßeinheiten müssen rechtsbündig ausgerichtet werden. Datum und Uhrzeit Werte bleiben davon unberührt und müssen weiterhin linksbündig dargestellt werden.

Währungen und sonstige Einheiten ​

Währungen und Einheiten sind als Suffix umzusetzen. Damit lässt sich der Wert von der Einheit besser trennen. Dadurch werden Validierungen vereinfacht und die Eingabe für den Nutzer ist einheitlich geregelt.

Verwendung ​

👍 Do👎 Don't
...wenn eine Erfassung von Daten in Form von Freitext oder alphanumerischen Eingaben innerhalb eines von-bis-Bereichs in der Suchleiste erfolgt....wenn nur ein einzelnes Kriterium ohne von-bis-Bereich dargestellt werden soll. ...in Formularen.

Guidelines ​

Aufbau ​

Das Eingabefeld hat immer ein Label, das erkennbar macht, welche Eingabe vom Nutzer erwartet wird. Zusätzlich kann im Eingabefeld ein Platzhalter mit Hinweisen (z.B. zur Schreibweise) vorhanden sein. Unterhalb des Eingabefeldes ist Platz für einen Hilfstext. Dieser wird vor allem für zusätzliche Hilfestellungen, zum Beispiel bei einer fehlerhaften Eingabe, verwendet.

Verhalten ​

Bei Klick in ein Eingabefeld, wird der Cursor in dieses gesetzt und der Nutzer kann die Eingabe beginnen. Je nach Typ des Eingabefeldes (z.B. numerische Eingabe) können bestimmte Eingaben verboten werden. So wird die Häufigkeit von Fehleingaben verringert.

Zustände ​

Aktiv

Ein aktives Eingabefeld kann vom Nutzer fokussiert werden und die Eingabe kann wie gewohnt erfolgen.

Inaktiv

Ein Eingabefeld kann inaktiv sein, wenn es sich durch bestimmte Vorbedingungen (noch) nicht ändern lässt. Es wird erst aktiv, wenn die Vorbedingungen erfüllt sind. Ein inaktives Eingabefeld lässt sich nicht durch den Nutzer ändern.

Gesperrt

Ein Eingabefeld kann für den Nutzer gesperrt sein. In diesem Fall dient das Feld lediglich als Anzeige der evtl. vorhandenen eingegebenen Daten. Die Daten können nicht durch den Nutzer geändert werden. Im Unterschied zum inaktiven Eingabefeld, kann das gesperrte Feld nicht unter bestimmten Bedingungen aktiv werden.

Hover

Ein aktives Eingabefeld wird hervorgehoben, wenn der Nutzer den Mauszeiger über das Feld bewegt.

Fokus

Das Eingabefeld kann fokussiert werden. Der Fokus kann z.B. über die Tastaturbedienung gesetzt werden. Ist Textinhalt vorhanden, wird dieser beim Fokus des Feldes ausgewählt.

Fehlerhaft

Eingabefelder können validiert werden. Je nach Ergebnis der Validierung wird das jeweilige Eingabefeld hervorgehoben. Im Fehlerzustand erscheint die Fehlermeldung unterhalb vom Eingabefeld und das Feld wird rot hervorgehoben. Die Fehlermeldung sollte so formuliert werden, dass dem Nutzer klar ist, wie der entstandene Validierungsfehler behoben werden kann, siehe dazu auch Validierung unter Formulare .

DANGER

Eingabefelder können validiert werden. Je nach Ergebnis der Validierung wird das gesamte Eingabefeld hervorgehoben. Im Fehlerzustand erscheint die Fehlermeldung unterhalb der Bereichsauswahl (Range Selector) und diese wird rot hervorgehoben. Die Fehlermeldung sollte so formuliert werden, dass dem Nutzer klar ist, wie der entstandene Validierungsfehler behoben werden kann, siehe dazu auch Validierung unter Formulare .

||| |-|-|

Hilfe-Text

Wenn nötig, kann unterhalb des Eingabefeldes ein Hilfetext angezeigt werden. Dieser gibt dem Nutzer weitere Informationen über die benötigte Eingabe.

Barrierefreiheit ​

Tastaturbedienung ​

Über die Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Umschalttaste" + "Tab") lässt sich zwischen den einzelnen Eingabefeldern springen. In einem aktiven fokussierten Eingabefeld kann die Eingabe wie gewohnt erfolgen.

Spezifische Hinweise ​

  • Da jedes Eingabefeld ein Label haben muss, ist kein zusätzliches "aria-label" nötig.
  • Platzhalter (Placehoder) im Eingabefeld können optional zugänglich gemacht werden, indem sie im aria-label Attribut angegeben werden.
  • Gesperrte Eingabefelder sollten standardmäßig nicht über die Tastatur fokussierbar sein. Erst wenn der Nutzer entsprechende Einstellungen vornimmt, sollten auch die gesperrten Eingabefelder in den Fokussierungs-Kreislauf aufgenommen werden.

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-range-selector--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter:  https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Frange-selector

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-range-selector-flow</artifactId>
</dependency>

Import ​

java
import de.mate_ds.flow.component.rangeselector.RangeSelector;
import de.mate_ds.flow.component.rangeselector.RangeSelector.RangeSelectorBuilder;

Variants ​

Text ​

java
RangeSelector<?, ?> rangeSelector = RangeSelectorBuilder.pair(
    new TextField("Start"),
    new TextField("End")
);

Date Picker ​

java
RangeSelector<?, ?> rangeSelector = RangeSelectorBuilder.pair(
    new DatePicker("Start"),
    new DatePicker("End")
);

Time Picker ​

java
RangeSelector<?, ?> rangeSelector = RangeSelectorBuilder.pair(
    new TimePicker("Start"),
    new TimePicker("End")
);

Combo Box ​

java
ComboBox<String> left = new ComboBox<>("Start");
left.setItems(items);
ComboBox<String> right = new ComboBox<>("End");
right.setItems(items);
RangeSelector<?, ?> rangeSelector = RangeSelectorBuilder.pair(left, right);