Lookup

Overview

Intro

Die Lookup Komponente unterstützt den Nutzer bei der Auswahl einer oder mehrerer Optionen. Im Vergleich zur Combo Box bietet die Lookup Komponente durch ihren dazugehörigen  Modal Dialog  mehr Platz für weitere Informationen, die für eine richtige Auswahl notwendig sind.

Bei Bedarf kann bei einer bereits ausgewählten Optionen der Modal Dialog erneut geöffnet werden, um sich erneut die weiteren dazugehörigen Informationen einzublenden oder falls eine Mehrfachauswahl möglich ist weitere Einträge auszuwählen.

Lookups können in verschiedenen Kontexten auftreten, z. B. in  Formularen oder der  Filter Panel .

	Lookup Modal (multi-select)
	Lookup Modal (single-select, filter-panel)

Verwendung

👍 Do	👎 Don't
...wenn für eine richtige Auswahl einer Option mehr als 3 Kriterien in Betracht gezogen werden müssen. ...wenn einzelne Kriterien sehr viel Platz einnehmen, wie z. B. Texte	...wenn die Optionen aus 3 oder weniger Kriterien bestehen. Verwende dazu die ComboBox und stelle die Optionen ggf. 2-zeilig dar.

Guidelines

Aufbau

Lookups bestehen aus einer  Combo Box und einer  Button zum Öffnen vom dazugehörigen  Modal Dialog .

Der  Modal Dialog  kann in den Größen  Small ,  Medium  und  Large  angezeigt werden. Die Größe sollte sich nach der Anzahl an Spalten in der Tabelle richten.

Im Modal Dialog befindet sich ein Eingabefeld mit dem die darunter positionierte Tabelle gefiltert werden kann. Siehe Verhalten für weitere Informationen.

Varianten/Typen

Standard

Das Standard Lookup wird verwendet, wenn eine einzige Option ausgewählt werden soll. Die Auswahl ist sowohl über das Kombinationsfeld als auch über den Dialog, der über den rechten Button geöffnet werden kann, möglich. Die beiden Elemente sind miteinander verknüpft.

Lookup Standard

Kombinationsfeld bei dem eine einzige Option ausgewählt wurde (bei geöffneter Listbox)

Modal Dialog bei Einfachauswahl

Wird aus einem Kombinationsfeld der Modal Dialog aufgerufen, ermöglicht dieser ebenfalls die Auswahl eines Eintrags. Der Modal Dialog ermöglicht die Darstellung von mehr Informationen in Form von mehreren Tabellenspalten sowie das Suchen nach Einträgen.

Modal single-select

Einfachauswahl im Modal Dialog.

Mehrfachauswahl

Das Mehrfachauswahl Lookup wird verwendet, wenn mehrere Optionen ausgewählt werden sollen. Die Auswahl ist sowohl über das Kombinationsfeld (Listbox) als auch über den Modal Dialog, der über den rechten Button geöffnet werden kann, möglich. Die beiden Elemente sind miteinander verknüpft.

	Lookup multi-select Mehrfachauswahl Kombinationsfeld bei dem mehrere Optionen ausgewählt wurden (bei geöffneter Listbox)
	Lookup multi-select closed Mehrfachauswahl Kombinationsfeld bei dem mehrere Optionen ausgewählt wurden (bei geöffneter Listbox), die überfließenden Elemente werden als Anzahl links indiziert (Overflow-Indikator)

Modal Dialog bei Mehrfachauswahl

Wird aus einem Kombinationsfeld mit Mehrfachauswahl der Modal Dialog aufgerufen ermöglicht dieser ebenfalls die Mehrfachauswahl von Einträgen. Der Modal Dialog ermöglicht die Darstellung von mehr Informationen in Form von mehreren Tabellenspalten sowie das Suchen nach Einträgen.

Modal multi-select

Mehrfachauswahl im Modal Dialog.

Suchfunktion und Suchleiste im Modal Dialog

Das Suchen von Einträgen im Modal Dialog ist entweder durch ein einfaches Suchfeld oder als weitere Variante mittels des Musters (Patterns) des  Filter Panel  möglich.

Modal search option

Suchleiste im Modal Dialog.

Verhalten

1. Das Eingabefeld des Lookups verhält sich wie eine  Combo Box und kann genutzt werden, um auf dieser Ebene eine Auswahl zu treffen. Die Optionen im Dropdown Fenster vom  Combo Box  können bei Bedarf zweizeilig dargestellt werden.
2. Die Suche im Modal Dialog verhält sich analog zum  Combo Box . Der Vorteil für die Nutzer: In der Tabelle können mehr Informationen dargestellt werden als im Dropdown Fenster vom  Combo Box .
3. Falls sich im Eingabefeld ein Suchbegriff befindet, dann wird dieser beim Öffnen vom Modal Dialog übernommen.
4. Falls sich im Eingabefeld eine Auswahl befindet, wird die Auswahl in den Modal Dialog übernommen.
5. Ausgewählte Optionen lassen sich jederzeit zurücksetzen.
6. Suchkriterien lassen sich jederzeit zurücksetzen.
   

Lookup Verhalten

States

Aktiv

Ein aktives Lookup Feld kann vom Nutzer fokussiert werden und die Eingabe kann auf zwei Wegen erfolgen. Eine Möglichkeit ist es, per Tastatur eine Eingabe zu tätigen, wonach sich der das Dropdown öffnet und eine Auswahl getroffen werden kann. Dazu ist es noch möglich das Dropdown über einen Klick auf das Chevron Icon oder in das Feld zu öffnen. Der zweite Weg ist, eine Eingabe über den Modal Dialog zu tätigen, in dem eine Tabelle dargestellt wird. Dieser öffnet sich durch einen Klick auf die Lupe.

Enabled

Inaktiv

Ein Lookup Feld 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 Lookup Feld lässt sich nicht durch den Nutzer ändern.

Disabled

Gesperrt

Ein Lookup Feld 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.

Read-only

Hover

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

	Hover
	Hover bei fehlerhafter Eingabe

Fehlerhaft

Lookup Felder können validiert werden. Je nach Ergebnis der Validierung wird das Lookup Feld hervorgehoben. Im Fehlerzustand erscheint die Fehlermeldung unterhalb vom Lookup Feld 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 .

Error

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist das Lookup Feld fokussierbar. Zunächst wird der linke Teil fokussiert, der ein Kombinationsfeld darstellt. Hier lassen sich einzelne Optionen mit den Pfeiltasten ansteuern. Ist eine Option im Fokus, kann diese mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden. Über das erneute Betätigen der Tabulatortaste ("Tab") kann die Modal Dialog Taste, die sich rechts befindet, fokussiert werden. Der Modal Dialog, der die einzelnen Optionen zur Auswahl übersichtlicher darstellt, kann durch das Drücken der Wagenrückholtaste ("Return"), der Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") aufgerufen werden. Die im Modal Dialog enthaltene Tabelle kann durch Tastatureingaben im Filter Eingabefelder gefiltert werden. Die Navigation zur Tabelle im Modal Dialog erfolgt via Tabulatortaste ("Tab"). Die Auswahl einer Option in der Tabelle erfolgt dadurch, dass man mit den Pfeiltasten zur richtigen Option navigiert und die Auswahl mit der Leerzeichentaste ("Space") bestätigt. Danach muss man mit der Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") zur "Auswahl übernehmen" Taste navigieren und den Vorgang mit der Wagenrückholtaste ("Return"), der Eingabetaste ("Enter") oder der Leerzeichentaste ("Space") bestätigen, woraufhin sich der Modal Dialog schließt.