Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:
Die Filterreihe besteht aus:
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.
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.
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:
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.
Die Filter-Pille beinhaltet jeweils:
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”.
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:
Mehrfachauswahl- bzw. Eingabe:
Wertebereiche:
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.
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.
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.
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:
An Haupt-Inhaltstypen eines Filters kann unterschieden werden zwischen:
Beispiele:
Abhängig von der Anzahl der zur Auswahl stehenden Parameter, sind verschiedene Elemente zu verwenden:
(Maus- und Tastaturbedienung siehe entsprechendes Element)
Im Read-Only-Zustand werden die interaktiven Elemente im Inhaltsbereich folgendermaßen ersetzt:
Beispiele:
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:
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:
(Labels entsprechen weiterhin den Labels der vorher verwendeten Elemente).
Beispiel:
Ü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.
Beispiele:
Abhängig von der Anzahl der zur Auswahl stehenden Parameter, sind verschiedene Elemente zu verwenden:
(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:
(Labels entsprechen weiterhin den Labels der vorher verwendeten Elemente).
Beispiele:
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:
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.
(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.
Beispiele:
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.
Beispiele:
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.
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.
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:
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”).
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)
Jeder Filter-Container besteht aus einer Kopfzeile (Header), dem Inhalt und einer Fußzeile (Footer). Diese müssen als Regionen ausgezeichnet werden: