UI-Justiz

Filter

Filter können genutzt werden um den Inhalt von Tabellen zu reduzieren.

Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:

#1410; #2267; #2267 ; #1106 ; #1866

Aufbau

  1. Filter-Icon
  2. 0-n Filterpillen
  3. Sekundärer Button mit Plus-Icon
  1. Titelzeile
  2. Titel
  3. Weitere-Aktionen-Button
  4. Inhalt
  5. Fußzeile
  6. Anwenden-Button
  7. Schließen-Button

Verhalten

Filterreihe

Die Filterreihe besteht aus:

  • Filter Icon welches als informationstragende Grafik mit dem Alternativtext “Filter” ausgezeichnet ist und einem oder mehreren Bedienelementen, die als Buttons umgesetzt sind.
  • 0-n Filter-Pillen: Diese entsprechen jeweils einer Filtereinstellung. Das Öffnen einer Filter-Pille öffnet einen Filter-Container, indem die Einstellungen vorgenommen werden können (siehe Filter-Container). Wenn kein aktiver Filter vorhanden ist, wird der Text “Keine aktiven Filter” angezeigt.
  • (optional) Sekundärer Button mit Plus-Icon: Mit diesem können, je nach fachlicher Anforderung weitere Filter hinzugefügt werden. Er hat Beschriftung “Filter hinzufügen”.

Die Filterreihe wird als Formularfeldgruppe umgesetzt, das Filter-Icon stellt die Formularfeldgruppen-Überschrift dar. Die aktiven Filter-Pillen inklusive des “+” Button stellen eine Liste dar.

Arten von Filterpillen

Vom jeweiligen Modul wird vorgegeben, ob und wenn ja welche Standard-Filter beim Laden einer Seite zu sehen sind. Es kann außerdem festgelegt werden, ob diese Filter editierbar bzw. nur zur Information (read-only) auf der Seite zu sehen sind. Wenn nicht in Userstories definiert, so handelt es sich um editierbare Filter.             

Zusätzlich ist vom Projekt festzulegen, ob und wenn ja, welche weiteren Filter von Nutzenden hinzugefügt werden können (Verhalten siehe Filter hinzufügen). Wenn nicht definiert, wird davon ausgegangen, dass keine weiteren Filter hinzufügbar sind und dass dementsprechend kein Plus-Button angezeigt wird. Filter, die nachträglich vom Nutzenden hinzugefügt wurden, können auch wieder entfernt werden. Dies kann durch Klick auf das X-Symbol oder über das bei jeder Pille existierende Kontextmenü geschehen.            

Wenn weder Filterpillen vorgegeben noch hinzufügbare Filter auf einer Seite definiert sind, dann wird die komplette Filterreihe nicht angezeigt.

Kontextmenü von Filterpillen

Das Pop-Up-Menü zu jeder Filterpille (Aufrufbar entweder über Rechtsklick auf Pille oder über Kontextmenü-Taste oder Shift+F10) kann je nach Art des Filters verschiedene Aktionen enthalten:

  • Vorgegebene Read-Only Filter: Diese Filter sind vorgegeben, nicht veränderbar und nicht löschbar. Öffnen Nutzer das Kontextmenü wird angezeigt “Keine Aktion verfügbar.”
  • Vorgegebene editierbare Filter: Diese Filter können bearbeitet werden. Sobald eine Bearbeitung durchgeführt wurde, also der Inhalt der Filterpille nicht mehr dem Standardzustand beim Laden der Seite entspricht, wird die Aktion “Zurücksetzen” angeboten. Bevor eine Änderung durchgeführt wurde wird die Aktion ebenfalls im Kontextmenü angezeigt, allerdings deaktiviert dargestellt.
  • Neu hinzugefügte Filter: Neu von Nutzern hinzugefügte Filter können auch wieder gelöscht werden. Dementsprechend sind zwei Aktionen verfügbar: “Zurücksetzen” und “Entfernen”. Zurücksetzen ist nur aktiv, wenn Änderungen vorgenommen wurden, der Filterinhalt also nicht dem Standardzustand enspricht, der nach hinzufügen des Filters sichtbar war.

Filter Hinzufügen

Wenn der “+”Button aktiviert wird, öffnet sich ein Pop-up (siehe Pop-up Menü) aus dem der Filtertyp ausgewählt werden kann bspw. “Nachname”. Nach Aktivierung eines der Filtertypen erscheint dieser nun als neues Bedienelement in der Reihe und gleichzeitig öffnet sich der entsprechende Filter-Container und kann eingestellt werden (siehe Filter-Container). Der Fokus befindet sich im ersten interaktiven Element im Filter-Container.

Wenn weitere Filter hinzugefügt werden, verlängern sie die Filterreihe, solange sie in das jeweils vorgesehene Rasterlayout passt. Weitere Definition siehe: Filterreihe responsive.

Filterpille

Die Filter-Pille beinhaltet jeweils:

  • Text 1 = “[Filtertyp]:”
  • Text 2 = “[Filterinhalt]”
  • Dropdown-Icon, welches als Layoutgrafik deklariert sein muss.
  • (optional bei löschbaren Filtern) X-Symbol zum Entfernen einer Pille. Dieses wird von Screenreadern nicht ausgegeben und ist mit der Tastatur nicht erreichbar (Funktionalität ist für Tastaturnutzer über Kontextmenü erreichbar). Bei Mouse-Hover wird der Tooltip “Entfernen” angezeigt.

Filtertyp

Dieser Text zeigt das Kriterium der Filtereinstellung, gibt also an, nach welchem/n Attribut/en gefiltert wird. Der Typ wird, auch bei Mehrfachauswahl-Filtern immer im Singular geschrieben. 

Beispiel: “Fachbereich” oder “Justizbehörde”.

Filterinhalt

Dieser zeigt die eingestellten Parameter. Wenn der Filter neu hinzugefügt wurde und noch kein Parameter gesetzt ist, wird “–” angezeigt. Dies wird ebenfalls angezeigt, wenn der Filter als standardmäßig angezeigte Pille definiert wurde, aber standardmäßig ungefiltert ist.            
Abhängig von Filtertyp und Inhalt des Filter-Containers kann der Inhalt in der Pille in unterschiedlicher Art und Weise dargestellt sein:

Einfachauswahl bzw. Freitexteingabe:

  • Der ausgewählte/eingegebene Eintrag wird in der Filterpille angezeigt.
  • Übersteigt die Länge des Eintrags 24 Zeichen, so werden alle Zeichen darüber hinaus mit “...” ersetzt.
  • Sind bei Einträgen Kurzbezeichungen vorhanden, so können diese in der Filter-Pille angezeigt werden. Beispiel:
    • Justizbehördentyp: LG (statt “Landgericht”)
  • Sind bei einem Eintrag Sub-Spezifikationen vorhanden, so werden diese in Klammern nach dem Haupt-Eintrag angezeigt. Liegen mehrere Sub-Spezifikationen vor, so sind diese mit Kommata voneinander getrennt. Gibt es bei den Sub-Spezifikationen nicht ausgewählte Checkboxen, so tauchen diese nicht in der Filterpille auf.

Mehrfachauswahl- bzw. Eingabe:

  • Die ausgewählten/eingegebenen Werte werden mit Semikolon voneinander getrennt angezeigt. Die Anzeige-Reihenfolge enspricht der Reihenfolge, in der die Werte in die im Filter-Container eingegebenen Felder eingegeben wurden.
  • Bei insgesamt mehr als 24 Zeichen wird dann zusammengefasst in “[Anzahl] ausgewählt”
  • Falls alle in dem Mehrfachauswahl-Filter zur Auswahl stehenden Werte gewählt wurden, wird in der Filterpille “Alle” angezeigt. Bei Justizbehörden-Filter ist auch “Alle in [Bundesland]” möglich.

    Wertebereiche:

    • Wertebereiche werden im Format “[Von] – [Bis]” dargestellt. Dabei wird, falls vorhanden die Einheit jeweils hinter Von und Bis dargestellt. Beispiele:
      • Geburtstag: 15.12.1978 – 01.08.2021
      • Geburtsjahr: 1970 – 1880
      • Stundensatz: 12,00 € – 18,00 €
      • Anzahl Beteiligte: 10 – 15
    • Besonderheiten: Wird bei einem Datumsfilter das Tagesdatum ausgewählt, so wird dieses mit dem Wort “Heute” ersetzt. Dies kann auch bei der aktuellen Jahreszahl geschehen. Final ist dies vom jeweiligen Fachteam festzulegen. Beispiele:
      • Termindatum: 01.01.2022 – Heute
      • Jahr: 2015 – Heute
      • Wird entweder der “Von-” oder der “Bis-Wert” in einem Wertebereichts-Filter nicht definiert, so wird eine Suche nach “Größer als” bzw. “Kleiner als” ausführt. In der Filterpille wird dies angezeigt als “Ab [Von-Wert]” bzw. “Bis [Bis-Wert]”. Beispiele:
        • Jahr: Ab 2015
        • Streitwert: Bis 15.000,00 €
        • Arbeitskraftanteile: Ab 50 %
        • Anzahl Beteiligte: Bis 25
    • Nicht zugelassen sind Schreibweisen wie “Größer/kleiner”, “>/<”; “Größer als/Kleiner als“ oder “[Von] – Unbegrenzt”

    Filter-Container

    Das Öffnen- eines bereits existierenden oder das Hinzufügen eines neuen Filters (siehe Filterreihe) öffnet einen Container, in dem die Einstellungen zu dem entsprechenden Filter vorgenommen werden können.

    Größe und Positionierung

    Die Größe des Filter-Containers passt sich an die jeweiligen Inhalte und den auf der Seite verfügbaren Platz an. Minimale Breite 320 Pixel. Maximale Breite: 400px. Der Footer bis zu Gesamthöhe des Filter-Containers von 400 Pixeln sticky. Darunter wird er mit dem Inhalt wegscrollbar.            

    Der Filter-Container öffnet sich immer unter der Filter-Pille (8px Abstand), wenn möglich linksbündig ausgerichtet (Grafik: Position 1). Befindet sich die Pille weit am rechten Bildschirmrand, so kann der Filter-Container auch rechtsbündig zur Pille angeordnet sein (Grafik: Position 2).             

    Kann die erlaubte Minimalbreite des Filter-Containers von 320 Pixeln auch mit einer Umpositionierung nicht erreicht werden, so öffnet sich der Container zentriert in der Fenstermitte. Es bleibt weiterhin ein Abstand von 32 Pixeln zu allen Seitenrändern.

    Verhalten bei kleiner Bildschirmhöhe

    Mindestens 400 Pixel des Filter-Containers in der Höhe müssen im geöffneten Zustand im sichtbaren Bereich liegen (sofern er so hoch oder höher ist). Dabei muss immer ein Abstand zum unteren Bildschirmrand von mindestens 32 Pixel bestehen bleiben. Reicht der Platz nicht aus, um das Filter-Pop-Up in über 400 Pixel Höhe darzustellen (plus die darüberliegende Filterpille) so scrollt die Seite automatisch beim Öffnen ein Stück nach unten, so dass die Filterpille mit 32px Abstand zum oberen Bildschirmrand zu sehen ist und das Filter-Pop-Up den restlichen Seitenplatz füllt. Ist das Filter-Containers trotzdem noch höher, als im verfügbaren Seitenplatz darstellbar, so wird der Inhalt vertikal scrollbar.             
    Die Scrollbarkeit des Hintergrunds wird bei geöffnetem Pop-Up nicht blockiert. Nach dem Schließen des Filter-Containers bleibt die Scrollposition bestehen (es wird nicht zurück zu der Position gescrollt, die die Seite vor dem Öffnen des Filters hatte).

    Der Header enthält den Titel “Filter „[Bezeichnung Filterkategorie]”” und den Button “Weitere Aktionen” (Icon mit drei Punkten). Der Titel entspricht dem Schrifttyp “Body”, ist allerdings im Code als “H2” gekennzeichnet. Der Titel wird bei Bedarf mehrzeilig. Der Weitere-Aktionen-Button (Tooltip und Alternativtext “Weitere Aktionen”) öffnet ein Pop-Up-Menü, in dem die Aktionen “Zurücksetzen” und “Entfernen” zur Auswahl stehen. Der Button “Filter zurücksetzen” ist disabled, solange die Filter-Einstellungen noch dem default-Wert beim Öffnen der Seite entsprechen. Sobald Änderungen gemacht wurden, ist der Button aktiv. Wird die Aktion “Zurücksetzen” im Pop-Up-Menü ausgeführt, so werden alle Eingaben im Filter auf die Default-Werte geändert und der Tastaturfokus befindet sich auf dem “Weitere Aktionen”-Button.

    Wird die Aktion “Entfernen” im Pop-Up-Menü ausgeführt, so wird der Filter-Container geschlossen, die Filter-Pille verschwindet und der Tastaturfokus befindet sich auf der ersten Pille der Filterreihe. Falls es sich um die erste und einzige Pille gehandelt hat, dann befindet sich der Fokus auf dem “Filter hinzufügen”-Button.

    Inhaltsbereich

    Der Inhaltsbereich ist, je nach dem welcher Filter geöffnet wurde, unterschiedlich aufgebaut. Im Inhalt können alle definierten Standardelemente (wie z. B. Eingabe-/Auswahlfeldern, Radio Buttons und Checkboxes) vorkommen. Detailbeschreibungen und Beispiele zu den Haupt-Filtertypen siehe unten.

    Dieser enthält den primären Button “Anwenden” und den sekundären Button “Schließen”. Der Anwenden-Button ist bei Öffnen des Filtercontainers inaktiv und er wird aktiv (klickbar), sobald eine Änderung im Filtercontainer vorgenommen wurde (bspw. Wertänderung in einem Auswahlelement oder Eingabe/Änderung/Löschung eines Zeichens in einem Eingabefeld). Bei Änderung in Eingabefeldern wird der Button bereits mit der Änderung, nicht erst bei Verlassen des Feldes aktiv.

    Wird die Aktion “Anwenden” ausgeführt, so wird die Auswahl übernommen und der Filter-Container schließt sich. Der Tastaturfokus befindet sich danach auf der entsprechenden Filter-Pille. Die ausgewählten Parameter werden dann in der Pille angezeigt bzw. geändert (falls vorher bereits Parameter gewählt waren).             
    Zur Ergebnisanzeige nach Anwenden eines Filters in der Tabelle siehe Tabelle: Durchsuchen & Filtern von Tabelleninhalten.            

    Falls unvollständige oder fehlerhafte Eingaben vorliegen und Nutzende auf “Anwenden” drücken, so erscheint ein Banner vom Typ Fehlermeldung mit der Überschrift “Anwenden nicht möglich”. Diese ist als “H3” gekennzeichnet.” Details zu Aussehen, Verhalten, Maus- und Tastaturbedienung siehe Fehlermeldungen in Formularen.

    Wird die Aktion “Schließen” ausgeführt, so schließt sich der Filter-Container, ohne, dass die Auswahl übernommen wird.

    Beim Verlassen eines Filtercontainer mit un-angewendeten Eingaben erscheint keine Sicherheitsabfrage. In dem Moment, wo der FIltercontainer geschlossen wird, werden alle noch un-angewendete Inhalte verworfen. Beim erneutem Öffnen sind die Inhalte wieder zurückgesetzt auf die zuletzt angewandten Werte bzw. die Standardwerte dieses Filters.

    Je nach Art des Filters sind manche Aktionen im Filter-Container nicht klickbar/verfügbar:

    • Vorgegebene Read-Only Filter: Diese Filter sind vorgegeben, nicht veränderbar und nicht löschbar. Sie lassen sich öffnen, aber nicht modifizieren. Der “Weitere Aktionen”-Button im Header wird nicht angezeigt. Der Inhaltsbereich enthält keine interaktiven Elemente, sondern nur read-only-Elemente. Der Footer enthält nur den “Schließen Button”. Der “Anwenden-Button” wird nicht angezeigt.
    • Vorgegebene editierbare Filter: Bei diesem Filter ist der Inhaltsbereich modifizierbar. Der Footer enthält den primären Button “Anwenden” und den sekundären Button “Schließen”. Der Filter kann nicht entfernt werden. Der “Weitere Aktionen”-Button im Header wird angezeigt und enthält nur den Button “Zurücksetzen” (deaktiviert, bis Änderungen gemacht wurden). Die Funktion “Entfernen” gibt es hier nicht.
    • Neu hinzugefügte Filter (editierbar- und löschbar): Da dieser Filter von Nutzern manuell hinzugefügt wurde, kann er nicht nur modifiziert, sondern auch wieder entfernt werden. Der “Weitere Aktionen”-Button im Header wird angezeigt und das Pop-Up-Menü enthält beide Funktionen: “Zurücksetzen” (deaktiviert, bis Änderungen gemacht wurden) und “Entfernen”.

    Filter-Inhaltstypen

    An Haupt-Inhaltstypen eines Filters kann unterschieden werden zwischen: 

    • Single-Select
    • Freitext-Wert mit Option der Phonetischen Suche
    • (Mehrfach-)Auswahl aus Elementen einer statischen Liste
    • (Mehrfach-)Auswahl aus einer Liste bereits angelegter Datenbankobjekte
    • Von-Bis-Wertebereiche

    Ein Wert: Single-Select

    Beispiele:

    • Justizbehörde: LG Freiburg i. B.
    • Dienstgrad: Mittlerer Dienst
    • Fachbereich: Zivilsachen
    • Beteiligtenstatus: Nur inaktive Rollen

    Abhängig von der Anzahl der zur Auswahl stehenden Parameter, sind verschiedene Elemente zu verwenden:

    • Unter 6 Möglichkeiten: Radio-Button-Group
    • Ab 6 Auswahlmöglichkeiten: Single-Select-Picker
    • Über 20 Elemente: Durchsuchbares Auswahlfeld

    (Maus- und Tastaturbedienung siehe entsprechendes Element)

    Im Read-Only-Zustand werden die interaktiven Elemente im Inhaltsbereich folgendermaßen ersetzt:

    • Radio-Button-Gruppe > Gleiches Element im Read-Only-Zustand
    • Einfachauswahlfeld > Einfachauswahlfeld Read-Only
    • Durchsuchbares Auswahlfeld > Einfachauswahlfeld Read-Only

    Ein Wert: Single-Select mit Sub-Spezifikation

    Beispiele:

    • Personentyp: Dolmetscher/Übersetzer (Übersetzer, Spanisch, Rahmenvertrag)
    • Personentyp: Sachverständiger (Abfallstoffe, Rahmenvertrag)

    Mehrere Auswahlelemente können in Abhängigkeit zueinander untereinander ein-/ausgeblendet werden. Nach Auswahl eines Wertes können weitere Felder zur Detailspezifikation der Auswahl erscheinen. In diesem Filtertyp können folgende Elemente auftauchen:

    • Einfachauswahlfelder
    • Durchsuchbare Einfachauswahlfelder
    • Radio-Button-Gruppen
    • Checkboxen (nur einzelne, keine Gruppen)

    Die neu hinzugeladenen bzw. entfernten Elemente dürfen sich immer nur nach dem aktuell bearbeiteten Feld befinden. (Maus- und Tastaturbedienung siehe entsprechendes Element)

    Im Read-Only-Zustand werden die interaktiven Elemente im Inhaltsbereich folgendermaßen ersetzt:

    • Einfachauswahlfeld > Einfachauswahlfeld Read-Only
    • Durchsuchbares Auswahlfeld > Einfachauswahlfeld Read-Only
    • Checkboxen > Gleiches Element im Read-Only-Zustand

    (Labels entsprechen weiterhin den Labels der vorher verwendeten Elemente).

    Ein Wert: Freitext

    Beispiel:

    • Nachname: [Text]
    • Straße: [Text]
    • Justizbehörde: [Text]

    Über ein einzeiliges Eingabefeld kann ein beliebiger Wert eingegeben werden. 

    Außerdem wird bei Freitext-Filtern für Texteingaben immer ein Toggle-Schalter unter dem Feld angezeigt, mit welchem eine Phonetische Suche aktiviert bzw. deaktiviert werden kann. Beim hinzufügen eines neuen Filters ist der Toggle zunächst nicht ausgewählt.

    Der Toggle-Schalter wird nicht angezeigt, wenn im Eingabefeld Zahlenwerte (ggf. inkl. Sonderzeichen) eingegeben werden sollen.

    Im Read-Only-Zustand wechselt das Eingabefeld entsprechend in den Read-Only-Status. Toggle-Buttons werden durch Read-Only-Checkboxen ersetzt.

    Auswahl eines/Mehrerer Werte aus Statischer Liste

    Beispiele:

    • Registerzeichen: C; AR; Qt; T
    • Amts-/Dienstbezeichnung: [Erste]; [Zweite]
    • Fachbereich: Zivil; Straf; Betreuung

    Abhängig von der Anzahl der zur Auswahl stehenden Parameter, sind verschiedene Elemente zu verwenden:

    • Unter 6 Möglichkeiten: Checkbox-Group
    • Über 6 Auswahlmöglichkeiten: Multi-Select-Picker

    (Maus- und Tastaturbedienung siehe entsprechendes Element)

    Das auswählbare Attribut ist im Standardfall die Spalte “Name lang” der zugrundeliegenden Statischen Liste. Falls ein abweichender Wert gewählt werden soll, ist dies in den Userstories zu definieren.

    Im Read-Only-Zustand werden die interaktiven Elemente im Inhaltsbereich folgendermaßen ersetzt:

    • Checkbox-Group > Gleiches Element im Read-Only-Zustand
    • Multi-Select > Multi-Select Read-Only

    (Labels entsprechen weiterhin den Labels der vorher verwendeten Elemente).

    Auswahl eines/Mehrerer Datenbank-Objekte

    Beispiele:

    • Entscheider: [Name 1]; [Name 2]
    • Justizbedienste/r: [Name1]; [Name 2]
    • Beteiligte/r: [Name 1]; [Name 2]

    Falls eine größere Datenmenge mit Auswahl mehrerer Element (Verknüpft mit “Oder”-Logik) durchsucht werden soll, so kann dafür das Element “Löschbare Elementgruppe mit durchsuchbaren Einfach-Auswahlfeldern” verwendet werden. Beispiel:

    •  In einer Verfahrensliste soll nach Verfahren gesucht werden, an denen entweder Poolperson A oder Poolperson B beteiligt sind.

    Das auswählbare Attribut ist im Standardfall die Objektbezeichnung (z. B. “Stellenbezeichnung” in GRVW oder “Nachname Titel, Vorname” bei Personen). Falls ein abweichender Wert gewählt werden soll, ist dies in den Userstories zu definieren.

    Wird ein solcher Filter neu hinzugefügt, so ist das ein durchsuchbares und löschbares Auswahlfeld mit dem Label “[Objekttyp]” und ein Button “[Objekttyp] hinzufügen” sichtbar. Sobald über den Button weitere löschbare Felder hinzugefügt wurden, werden die Feldbezeichnungen durchnummeriert.
    HINWEIS: Hier gilt eine Ausnahme zur Definition des Feldes “Elementlisten mit löschbaren Einträgen”. Es öffnet sich kein Pop-Up zur eindeutigen Benennung der Formularfelder, sondern diese werden fortlaufend durchnummeriert. Beim Löschen eines Feldes wird die Nummerierung entsprechend angepasst (von oben nach unten).

    (Für Maus- und Tastaturbedienung des Inhaltsbereichs siehe Durchsuchbares Auswahlfeld/Combobox; Button und Elementlisten mit löschbaren Einträgen.)

    Im Read-Only-Zustand werden die interaktiven Elemente im Inhaltsbereich ersetzt durch ein Multiselect-Feld im Read-Only-Zustand mit dem Label “[Objekttyp]”, in dem alle vorher in Einzelfeldern ausgewählten Werte mit Simikolon voneinander getrennt im Inhalt dargestellt werden.

    Welche Einträge werden angezeigt? (Gültig für Filtertyp Mehrfachauswahl)

    (technische Machbarkeit noch zu prüfen: ggf. ein Performance-Thema)

    Attribute, nach denen gefiltert werden kann beziehen sich immer auf Maximalinhalte der ungefilterten Tabelle/Liste/Baumstruktur auf der Datenbank. Beispiele:
    Verfahren mit 14 Beteiligten: Es werden nur die 14 von insgesamt 200 Beteiligtenrollen im Filter angezeigt, die auch in dem Verfahren vorkommen)
    Verfahren: Es kann nur nach den Verfahrensstatuus gefiltert werden, die auch in der Verfahrenslist vorkommen. Gibt es kein Objekt im Status “Weggelegt”, so wird dies auf nicht als auswählbare Option angezeigt. 
    Filterpillen sind immer unabhängig voneinander (keine Abhängigkeiten zwischen Pille A und Pille B). Eine in einem Filter getätigte Auswahl kann nie die Auswahloptionen in einem anderen Filter einschränken. 

    Entscheidung: Nicht vorkommende Inhalte werden komplett ausgeblendet, nicht als disabled dargestellt.

    Wenn die Auswahlmöglichkeiten aufgrund von nicht in der Tabelle vorkommenden Einträgen beim Öffnen des Filters bzw. Dropdowns im Filter reduziert werden, dann wird dadurch nicht das Element gewechselt. Beispiel: 
    Es gibt 200 Beteiligtenrollen und ein Filter müsste ensprechend durchsuchbares Auswahlfeld sein. Nur weil in der aktuell geöffneten Tabelle nur 2 Beteiligtenrollen vorkommen, muss deswegen nicht zum Element Checkbox gewechselt werden.
    Grund: Anderenfalls müsste vor Öffnen des Filters schon eine Serverabfrage zum Abprüfen der möglichen Einträge generiert werden.

    Wertebereiche Datum (Zeitpunkt oder Zeitraum): Feldtyp “Datumseingabe”

    Beispiele:

    • Gültig ab: [Datum]
    • Gültig ab: [Von] – [Bis]
    • Zuletzt bearbeitet: [Datum]
    • Zuletzt bearbeitet: [Von] – [Bis]
    • Geboren: [Datum]
    • Geboren: [Von] – [Bis]

    In den meisten Fällen kann per Radio-Button-Gruppe zwischen den beiden Optionen “Exaktes Datum” und “Zeitraum” gewählt werden.

    Es kann (wo fachlich sinnvoll) zusätzlich auch die Option “Kalenderwoche” angeboten werden. Abhängig von der Auswahl wird nachfolgend entweder ein Datumsauswahlfeld, ein Datums-Wertebereichsfeld oder zwei Einfachauswahlfelder (eins für das Jahr, ein zweites für die Kalenderwoche) angezeigt. Das Feldlabel ist in der Regel mit der Filterbezeichnung identisch.

    Die Überschrift der Radio-Button-Gruppe kann in diesem Fall ausgeblendet werden, da dies bereits durch die Filter-Bezeichnung erkennbar ist.
    (Maus- und Tastaturbedienung siehe “Radiobutton”, “Eingabefeld, Datum” und “Eingabe-/Auswahlfeld, Wertebereich”)

    Im Read-Only-Zustand wird die Radio-Button-Gruppe komplett ausgeblendet und nur das/die Datumsfelder/er (Labels siehe oben) werden im Read-only Zustand dargestellt.

    Andere Von-Bis Werte Feldtyp: Zahlenfeld “Eingabefeld mit/Ohne Einheit”

    Beispiele:

    • Streitwert: [Von] – [Bis]
    • Anzahl Beteiligte: [Von] – [Bis]
    • Arbeitskraftanteile: [Von] – [Bis]

    In den meisten Fällen kann zwischen den beiden Optionen “Exakter Wert” und “Wertebereich” gewählt werden. Abhängig davon, wird nachfolgend entweder ein Eingabe-/Auswahlfeld oder ein Wertebereich-Feld mit dem entsprechenden Feldtyp angezeigt. Das Feldlabel ist in der Regel mit der Filterbezeichnung identisch.

    Die Überschrift der Radio-Button-Gruppe kann in diesem Fall ausgeblendet werden, da dies bereits durch die Filter-Bezeichnung erkennbar ist.   
    (Maus- und Tastaturbedienung siehe Radiobutton, Eingabefeld und Eingabe-/Auswahlfeld, Wertebereich)

    Im Read-Only-Zustand wird die Radio-Button-Gruppe komplett ausgeblendet und nur das/die Eingabfelder werden im Read-only Zustand dargestellt.

    Ergänzung Single- und Multiselect

    Bei Öffnen des Filters wird die Anzahl der Einträge, die für das jeweilige Filterkriterium nach Anwenden des Filters verfügbar wäre, geladen und in Klammern hinter dem jeweiligen Eintrag dargestellt (errechnet sich aus Summe der bisher gesetzten Filter plus diesen).

    Falls die Serverabfrage dafür länger dauert (über 2 Sekunden), wird ein Ladezustand (loading spinner) nach dem jeweiligen Eintragstext angezeigt, bis Suchergebnisse vorhanden sind. Der Alternativtext des Symbols, der vom Screenreader ausgegeben wird lautet “Anzahl wird geladen”. Dieser wird auch als Tooltip angezeigt, wenn mit der Maus exakt über dem Lade-Icon gehovert wird.

    Sobald die Anzahl der gefundenen Ergebnisse zu diesem Filter 50 übersteigt, wird den Nutzenden “(50+)” angezeigt statt der genauen Zahl. So wird verhindert, dass die Suchanfrage zu lange Zeit in Anspruch nimmt.

    Die Anzahl bzw. das Ladeicon muss immer ein Bestandteil des Labels der Filteroption sein. Bei Filtereinträgen mit primärer und sekundärer Information ist es Bestandteil des primären Textes.

    Responsives Verhalten

    Wenn nicht genug Platz zur Verfügung steht, um alle Filter-Bedienelemente im vorgesehenen Rasterlayout darzustellen, werden diese inklusive des “Filter hinzufügen”-Buttons (falls vorhanden) durch ein einziges Bedienelement ersetzt. Dieses besteht aus einem Text, der anzeigt, wieviele Filter aktiv sind (“[X] aktive Filter”) und der gleichen Layoutgrafik wie beim normalen Filter-Bedienelement. Als aktive Filter werden diejenigen gezählt, bei denen ein oder mehrere Filterwerte gesetzt sind, also wo nicht “–” im Filterinhalt steht. 

    Ist kein Filter aktiv, so steht nur “Filter” in der Filterpille (statt “[X] aktive Filter”). 
    Die zusammengefasste Filterpille erhält den Tooltip “Alle Filter anzeigen”, welcher die Funktion beschreibt (nicht den programmatischen Namen abbildet).

    Bei Aktivierung des Elements öffnet sich ein Pop-Up-Menü, welches alle Filter enthält: Sowohl aktive Filter, als auch inaktive Filter inklusive derjenigen, die sich in der nicht-responsiven Darstellung der Filterreihe hinter dem “Filter hinzufügen”-Button verstecken. Die Anzeigereihenfolge ist folgende: 

    1. Aktive Filter (Filter bei denen ein oder mehrere Werte ausgewählt wurden); alphabetisch aufsteigend sortiert.
    2. Inaktive Filter (Alle, die in der nicht-responsiven Version mit keinem Wert befüllt wurden, wo also “–” zu sehen war und zusätzlich all die, die über den Plus-Button hinzufügbar gewesen wären); alphabetisch aufsteigend sortiert.

    Zwischen aktiven und inaktiven Filtern wird eine graue Trennlinie angezeigt und die Bereiche sind im Code als Gruppen mit den Überschriften “Aktive Filter” und “Weitere Filter” ausgezeichnet.

    Jeder Pop-Up-Menü-Eintrag eines aktiven Filters besteht aus dem Filtertyp und dem eingestellten Parameter “[Filtertyp]:[Filterinhalt]” (Bspw: Justizbehörde: AG Freiburg). Bei inaktiven Filtern, wird “–” anstelle des Filterinhalts angezeigt. 
    Jeder Eintrag (aktive und inaktive) öffnet den entsprechenden Filter und Nutzende können Einstellungen vornehmen (siehe Filter-Container).

    Bei nicht ausreichendem Platz können die Einträge bis 42 Zeichen zweizeilig werden, danach werden die Parameter zusammengefasst zu “[X] Ausgewählt” (Bspw: “Nachname: 3 ausgewählt”).

    Zustände

    Barrierefreiheit

    Filterreihe

    Die Filter-Pillen erhalten einen zusätzlichen Tooltip, der die Funktion beschreibt (nicht den programmatischen Namen abbildet). In der Regel “Filter bearbeiten”, bei Filtern, die sich nicht bearbeiten lassen “Filter anzeigen”. (Genaue Definition von nicht bearbeitbaren Filtern siehe: Filter-Container)

    Filter-Container

    Jeder Filter-Container besteht aus einer Kopfzeile (Header), dem Inhalt und einer Fußzeile (Footer). Diese müssen als Regionen ausgezeichnet werden:

    • Titelzeile: “Titelzeile-Formular”
    • Inhalt: “Inhalt-Formular”
    • Fußzeile: “Fußzeile-Formular”

    Bedienung

    Tastaturbedienung

    Filterreihe:

    • Mit Tab wird das erste interaktive Element der Filterreihe fokussiert.
    • Enter- oder Leertaste bei fokussierter Filter-Pille öffnet den Filter-Container zum Bearbeiten des Filters.
    • Drücken der Kontextmenü-Taste bei fokussierter Filter-Pille öffnet ein Pop-Up-Menü und setzt den Fokus auf den ersten Menü-Eintrag. Die Pop-Up-Menü-Position ist horizontal zentriert zur Filter-Pille. 
    • Shift+F10 bei fokussierter Filter-Pille öffnet ebenfalls ein Kontextmenü und setzt den Fokus auf den ersten Menü-Eintrag. Die Pop-Up-Menü-Position ist horizontal zentriert zur Filter-Pille. 
    • (Bedienung innerhalb von Pop-Up-Menüs siehe Pop-Up-Menü: Bedienung)
    • Nach Ausführen der Aktion “Zurücksetzen” im Pop-Up-Menü werden alle Eingaben im Filter auf die Default-Werte geändert (bei vorgegebenen Filtern auf Default bei Laden der Seite, bei neu hinzugefügten Filtern auf den Leerzustand nach Hinzufügen), das Menü wird geschlossen und der Tastaturfokus wird auf die zurückgesetzte Filterpille gelegt.
    • Nach Ausführen der Aktion “Entfernen” im Pop-Up-Menü wird das Menü geschlossen, die Filterpille verschwindet und der Tastaturfokus befindet sich auf der ersten Pille in der Filterreihe. Falls es sich um die erste und einzige Pille gehandelt hat, dann befindet sich der Fokus auf dem “Filter hinzufügen”-Button.
    • Drücken der “Entf”-Taste bei fokussierter Filterpille entfernt den Filter ebenfalls. Der Tastaturfokus befindet sich anschließend auf der ersten Pille in der Filterreihe. Falls es sich um die erste und einzige Pille gehandelt hat, dann befindet sich der Fokus auf dem “Filter hinzufügen”-Button.
    • Enter- oder Leertaste bei fokussiertem “+” Button öffnet das Filter-Pop-up Menü.
    • Mit Tab wird zum nächsten interaktiven Element der Reihe gewechselt.

    Responsive Filterreihe:

    • Siehe Element Pop-Up-Menü: Tastaturbedienung
    • Ausführen eines Eintrags öffnet den entsprechenden Filter-Container. 
    • Nach Anwenden eines Filters (Tastaturbedienung siehe Filter-Container) liegt der Fokus wieder auf der kombinierten Filterpille. 
    • Nach Schließen eines Filter-Containers (Tastaturbedienung siehe Filter-Container) liegt der Fokus ebenfalls wieder auf der kombinierten Filterpille.

    Filter-Container:

    • Mit Tab-Taste kann durch die Interaktiven Elemente navigiert werden.
    • Wird die Aktion “Zurücksetzen” im Pop-Up-Menü mit Enter-Taste ausgeführt, so werden alle Eingaben im Filter auf die Default-Werte geändert und der Tastaturfokus befindet sich auf dem “Weitere Aktionen”-Button.
    • Wird die Aktion “Entfernen” im Pop-Up-Menü mit Enter-Taste ausgeführt, so wird der Filter-Container geschlossen, die Filter-Pille verschwindet und der Tastaturfokus befindet sich auf der ersten Pille in der Filterreihe. Falls es sich um die erste und einzige Pille gehandelt hat, dann befindet sich der Fokus auf dem “Filter hinzufügen”-Button.
    • Wird die Aktion “Schließen” im Footer mit Enter-Taste ausgeführt, so schließt sich der Filter-Container, ohne, dass die Auswahl übernommen wird. Der Tastaturfokus befindet sich dann wieder auf der gerade geöffneten Filterpille. 
    • Wird die Aktion “Anwenden” im Footer mit Enter- oder Leertaste ausgeführt, so wird die Auswahl übernommen und der Filter-Container schließt sich. Der Tastaturfokus befindet sich danach auf der entsprechenden Filter-Pille. 
    • Escape schließt den Filter-Container, ohne, dass die Auswahl übernommen wird.

    Mausbedienung

    Filterreihe:

    • Klicken mit linker Maustaste auf eine Filter-Pille öffnet den Filter-Container zum Bearbeiten des Filters.
    • Einfacher Klick mit rechter Maustaste auf eine beliebige Stelle einer Filter-Pille öffnet das Weitere-Aktionen-Menü. Dieses öffnet sich an der Stelle, an der vom Nutzer geklickt wurde (linke obere Ecke entspricht Mausklickposition). 
    • (Bedienung innerhalb von Pop-Up-Menüs siehe Pop-Up-Menü > Mausbedienung)
    • Nach Ausführen der Aktion “Zurücksetzen” im Pop-Up-Menü werden alle Eingaben im Filter auf die Default-Werte geändert (bei vorgegebenen Filtern auf Default bei Laden der Seite, bei neu hinzugefügten Filtern auf den Leerzustand nach Hinzufügen), das Menü wird geschlossen und der Tastaturfokus wird auf die zurückgesetzte Filterpille gelegt.
    • Nach Ausführen der Aktion “Entfernen” im Pop-Up-Menü wird das Menü geschlossen, die Filterpille verschwindet und der Tastaturfokus befindet sich auf der ersten Pille in der Filterreihe. Falls es sich um die erste und einzige Pille gehandelt hat, dann befindet sich der Fokus auf dem “Filter hinzufügen”-Button.
    • Klick mit linker Maustaste auf das X-Symbol einer neu hinzugefügten Pille entfernt diese. Der Tastaturfokus befindet sich anschließend auf der ersten Pille in der Filterreihe. Falls es sich um die erste und einzige Pille gehandelt hat, dann befindet sich der Fokus auf dem “Filter hinzufügen”-Button.
    • Klicken mit linker Maustaste auf den “+” Button öffnet das Filter-Pop-up Menü.

    Responsive Filterreihe:

    • Siehe Element Pop-Up-Menü: Mausbedienung
    • Ausführen eines Eintrags öffnet den entsprechenden Filter-Container.
    • Nach Anwenden eines Filters (Mausbedienung siehe Filter-Container) liegt der Fokus wieder auf der kombinierten Filterpille. 
    • Nach Schließen eines Filter-Containers (Mausbedienung siehe Filter-Container) liegt der Fokus ebenfalls wieder auf der kombinierten Filterpille.
    • Klick mit linker Maustaste auf ein beliebiges interaktives Element im Filter-Container fokussiert dieses.

    Filter-Container:

    • Klicken Nutzende mit linker Maustaste auf “ Zurücksetzen” im Pop-Up-Menü, so werden alle Eingaben im Filter auf die Default-Werte geändert und der Tastaturfokus befindet sich auf dem “Weitere Aktionen”-Button.
    • Klicken Nutzende mit linker Maustaste auf “Entfernen” im Pop-Up-Menü, so wird der Filter-Container geschlossen, die Filter-Pille verschwindet und der Tastaturfokus befindet sich auf der ersten Pille der Filterzele. Falls es sich um die erste und einzige Pille gehandelt hat, dann befindet sich der Fokus auf dem “Filter hinzufügen”-Button.
    • Klick mit linker Maustaste auf den “Schließen”-Button schließt den Filter-Container, ohne, dass die Auswahl übernommen wird. Der Tastaturfokus befindet sich dann wieder auf der gerade geöffneten Filterpille. 
    • Klick mit linker Maustaste auf den “Anwenden”-Button übernimmt die Auswahl und schließt den Filter-Container. Der Tastaturfokus befindet sich danach auf der entsprechenden Filter-Pille. 
    • Klicken mit linker Maustaste an eine beliebige Stelle außerhalb des Filter-Containers, so wird dieser geschlossen, ohne, dass eine Auswahl übernommen wird.

    Weitere Themen: