Version:

Filter Panel ​

Das Filter Panel wird zum schnellen und gezielten Filtern von Tabellen genutzt.

Overview ​

Intro ​

Das Filter Panel ermöglicht die kontextbezogene Suche nach Objekten in Masteransichten. Das Muster lässt sich sowohl für die einfache als auch komplexe Variante vom  Master-Detail Muster anwenden und ist unabhängig von der Gesamtmenge der zugrundeliegenden Objekte. Zum Verwalten von komplexen Masteransichten mit vielen Suchkriterien stehen optional vordefinierte und individualisierbare Ansichten zur Verfügung.

broken_image
Figma

Beispiel eines Filter Panels mit allen Funktionen

Verwendung ​

👍 Do👎 Don't
...wenn nach Objekten in einer Tabellenseite gesucht werden soll....wenn nach Objekten in einer Tabelle in einem anderen Kontext als der Tabellenseite gesucht werden soll wie z.B. in einer Tabellensektion einer Objektseite.

Guidelines ​

Aufbau ​

Im aufgeklappten Zustand (siehe Auf- und Zuklappen unter Verhalten) lassen sich alle Funktionen des Filter Panels in den folgenden Bereichen nutzen:

broken_image
Figma

  1. Ansichten
  2. Sekundäre Funktionsleiste
  3. Suchkriterien
  4. Funktionsleiste

Im aufgeklappten Zustand ​

Ansichten (optional): ​

Wenn das Filter Panel mit mehreren Ansichten ausgeliefert werden soll, oder eine Individualisierung des Filter Panels vorgesehen ist, dann lässt sich durch die Ansichtenauswahl die aktuelle Ansicht wählen und verwalten.

Suchkriterien ​

Verwende immer den einfachsten Eingabetyp zur Konfiguration der Suchkriterien und vermeide unnötige Komplexität im Filter Panel.

Zulässige Eingabetypen:

INFO

Für Range Selector und Combo Box mit Mehrfachauswahl: immer je zwei Spalten einplanen.

Funktionsleiste ​

In der Funktionsleiste sind folgende Tasten verortet:

  • Suchen
  • Zurücksetzen
  • Anpassen (optional)

Sekundäre Funktionsleiste (Optional) ​

In der sekundären Funktionsleiste befindet sich die Funktionen zum aufgeklappt oder zugeklappt.

Im zugeklappten Zustand ​

broken_image
Figma

  1. Zusammenfassung

    Die Zusammenfassung informiert den Nutzer kompakt über die Anzahl der aktiven Suchkriterien.
  2. Sekundäre Funktionsleiste

    In der sekundären Funktionsleiste befinden sich Funktionen zum auf- und zuklappen.

Responsive Design ​

Das Filter Panel passt sich an die verfügbare Breite seines Containers dynamisch an, solange diese >= Medium ist. Sollte der Container nur noch <= Small sein, dann wird das Filter Panel standardmäßig zugeklappt dargestellt. Die Aufgeklappte Ansicht erstreckt sich über die gesamte Verfügbare Bildschirmhöhe und überlagert die Trefferliste.

broken_image
Figma

Verhalten ​

Auf- und Zuklappen des Filter Panels ​

  1. In der sekundären Funktionsleiste des Filter Panels lässt sich über einen Link zwischen den beiden Zuständen „zugeklappt“ und „aufgeklappt“ hin und her wechseln.
  2. Die Zusammenfassung zeigt die Anzahl an aktiven Suchkriterien.
    broken_image
    Figma

Suchen ​

broken_image
Figma

  1. Suchen mit Eingabe Taste
  2. Suchen Taste
  3. Suche läuft Indikator

Die Suche lässt sich auf zwei Wegen auslösen.

  1. Wenn ein Eingabefeld fokussiert ist, dann lässt sich über die Eingabe Taste die Suche auslösen.
  2. Über die Suchen Taste.
  3. Während die Suche vom System ausgeführt wird ist ein Indikator zu sehen.

INFO

Hinweis: Löst der Nutzer oder das System eine Suche ohne Suchkriterien aus, dann werden einfach die ersten Treffer geladen.

Zurücksetzen ​

broken_image
Figma

  1. Suchkriterien
  2. Ansicht (Suchkriterien + Tabellenspalten)
  3. Trefferliste

Die Zurücksetzen Taste löst mehrere Funktionen aus:

  1. Die Suchkriterien werden zurückgesetzt. D.h. die eingegebenen Werte werden entfernt bzw. auf den Default zurück gesetzt.
  2. Wenn das Anpassen von Ansicht möglich ist, dann wird diese ebenfalls zurück gesetzt. D.h. das nachträglich hinzugefügte Suchkriterien entfernt werden und nachträglich entfernte Suchkriterien werden wiederhergestellt. Sollte die Reihenfolge verändert worden sein, dann wird diese ebenfalls wiederhergestellt. Das gleiche gilt auch für Tabellenspalten und deren Reihenfolge. Das Verhalten ist somit identisch mit dem erneuten auswählen einer Ansicht.
  3. Die Trefferliste wird zurückgesetzt indem eine Suche mit den Ausgangswerten ausgelöst wird.

Voneinander abhängige Suchkriterien (Optional) ​

INFO

Die beschriebenen Funktionalitäten der voneinander abhängigen Suchkriterien müssen produktspezifisch implementiert werden und sind nicht Teil der technischen Komponente. Es handelt sich um ein Muster für die Implementierung.

Bei Bedarf können die Auswahlmöglichkeiten von Dropdown , Comboboxen und Lookup Felder durch andere Suchkriterien auf eine Teilmenge eingegrenzt werden.

Anpassen (Optional) ​

Die Standard Variante des Filter Panels erlaubt die Anpassung der Suchkriterien, sowie der Trefferliste durch den Nutzer.

broken_image
Figma

  1. Suchkriterien ein- und ausblenden
  2. Suchkriterien Reihenfolge ändern
  3. Tabellenspalten ein- und ausblenden
  4. Tabellenspalten Reihenfolge ändern

Suchkriterien ein- und ausblenden ​

broken_image
Figma

  1. Suchkriterien ein- und ausblenden
  2. Suchkriterien Reihenfolge ändern
  3. Tabellenspalten ein- und ausblenden
  4. Tabellenspalten Reihenfolge ändern

Suchkriterien lassen sich ein- und ausblenden, indem man den Dialog dazu über die Anpassen Taste aufruft.

  1. Modal Dialog Größe: Verwende für den Dialog mindestens einen  Modal Dialog  der Größe M.
  2. Zähler: Einzelne Suchkriterien lassen sich über den Stepper  ein- und ausblenden. Sollten weitere Suchkriterien der selben Art eingeblendet werden, dann reihen diese sich an der Position der vorherigen ein.
  3. Gruppen: Suchkriterien können gruppiert werden, damit die Nutzer sich leichter orientieren können. Sobald ein Suchkriterium einer Kategorie eingeblendet ist, muss die Gruppe beim öffnen vom Dialog ausgeklappt dargestellt werden.
  4. Checkbox Einzelne Suchkriterien lassen sich auch mehrmals einblenden, so lange es sich nicht um Multiselect-Combobox handelt. In diesem Fall wird im Modalen Dialog anstelle eines Steppers eine einfache Checkbox eingebaut mit der das Feld ein- und ausgeblendet werden kann. Wenn einzelne Suchfelder mehrmals eingebunden sind, werden diese mittels „oder“ Operator in der Suche verbunden

Neue Suchkriterien reihen sich am Ende ein.

Suchkriterien Reihenfolge ändern ​

broken_image
Figma

  1. Modal Dialog Größe
  2. Sortieren

Die Reihenfolge der Suchkriterien lässt sich ändern, indem man den Dialog dazu über die Anpassen Taste aufruft.

Die Positionen von mehrfach auftauchenden Suchkriterien lassen sich nicht einzeln verändern. Gleiche Suchkriterien stehen immer nebeneinander und tauchen daher im Dialog zum ändern der Reihenfolge nur ein Mal auf.

  1. Modal Dialog Größe: Verwende für den Dialog mindestens einen  Modal Dialog  der Größe M.
  2. Sortieren: Die  Buttons  zum umsortieren der Reihenfolge müssen oberhalb und außerhalb der  Tabelle verortet sein. Das gewährleistet das diese beim scrollen innerhalb der  Tabelle  nicht aus dem sichtbaren Bereich verschwinden und eine gute Tastaturbedienbarkeit gegeben bleibt.

Tabellenspalten ein- und ausblenden ​

broken_image
Figma

Tabellenspalten einblenden

  1. Modal Dialog Größe
  2. Checkbox
  3. Gruppen (Optional)

Tabellenspalten lassen sich ein- und ausblenden indem man den Dialog dazu über die Anpassen Taste aufruft.

  1. Modal Dialog Größe: Verwende für den Dialog mindestens einen  Modal Dialog der Größe M.
  2. Checkboxen: Einzelne Tabellenspalten lassen sich über  Checkboxen  ein und ausblenden. Es muss dabei mindestens eine Tabellenspalte eingeblendet sein.
  3. Gruppen (Optional): Tabellenspalten können ggf. gruppiert dargestellt werden werden, damit die Nutzer sich leichter orientieren können. Sobald ein Tabellenspalte einer Kategorie eingeblendet ist, muss die Gruppe beim Öffnen vom Dialog ausgeklappt dargestellt werden.

Tabellenspalten, die neu eingeblendet werden, reihen sich am Ende ein.

Tabellenspalten Reihenfolge ändern ​

broken_image
Figma

  1. Modal Dialog Größe
  2. Sortieren

Die Reihenfolge der Tabellenspalten lässt sich ändern, indem man den Dialog dazu über die Anpassen Taste aufruft.

  1. Modal Dialog Größe: Verwende für den Dialog mindestens einen  Modal Dialog  der Größe M.
  2. Sortieren: Die  Buttons  zum umsortieren der Reihenfolge müssen oberhalb und außerhalb der Tabelle verortet sein. Das gewährleistet, dass diese beim Scrollen innerhalb der  Tabelle nicht aus dem sichtbaren Bereich verschwinden und eine gute Tastaturbedienbarkeit gegeben bleibt.

Ansichten (Optional) ​

Ansichten personalisieren ​

broken_image
Figma

Um Anpassungen zu speichern, muss die Funktion zur Ansichten Verwaltung genutzt werden.

Diese Personalisierung ist in folgenden Szenarien wertvoll für die Nutzer:

  • Nutzer müssen verschiedene Filter Panel Konfigurationen speichern und laden, damit Sie ihre relevanten Daten finden können.
  • Nutzer müssen verschiedene Tabellen-Konfigurationen speichern und laden können, um die Daten in verschiedenen Ansichten zu sehen.
  • Nutzer müssen Einstellungen für eine gesamte Seite, inkl. das Filter Panel und Tabellen Konfigurationen speichern und laden können.

Partitionierte Ansichten (Optional) ​

INFO

Die beschriebenen Funktionalitäten der partitionierten Ansichten müssen produktspezifisch implementiert werden und sind nicht Teil der technischen Komponente. Es handelt sich um ein Muster für die Implementierung.

broken_image
Figma

Mit partitionierten Ansichten lassen sich Suchkriterien und Tabellenspalten für spezielle Use Cases gruppieren. In der Praxis müssen nicht immer alle Suchkriterien mit allen kombinierbar sein. Häufig fordern Stakeholder und Nutzer jedoch immer mehr Suchkriterien über die Zeit was zu Performance-Problemen führen kann.

Durch das Partitionieren können im Hintergrund eigene Datenbank-Views implementiert werden um die Performance stabil zu halten. Siehe dazu folgender Vergleich zwischen normalen Ansichten und dem Ansatz diese zu partitionieren.

broken_image
Figma

Barrierefreiheit ​

Die Tastaturbedienung erfolgt wie bei der  Ansichtenverwaltung , Eingabefeldern und  Buttons . Zusätzlich lässt sich durch das Drücken der "Eingabetaste" eine Suche auslösen.