Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:
Der Hauptinhalt dieses Seitentyps kann eine Liste, Tabelle oder Baumstruktur enthalten.
Welcher Typ im jeweiligen Modul verwendet wird und ob ggf. ein Wechsel zwischen diesen Darstellungsformen möglich sein soll, ist vom jeweiligen Teilprojekt zu definieren.
Die Unterseite eines Moduls mit Inhaltstypen Tabelle, Liste und Baumstruktur enthält immer die folgenden drei Bereiche:
Dieser Seitentyp besteht immer aus folgenden Elementen. Die Reihenfolge der hier genannten Elemente enspricht auch der Fokusreihenfolge, wenn mit der Tastatur navigiert wird. Beim initialen Seitenaufruf liegt der Fokus auf dem ersten interaktiven Element unterhalb der Pfadnavigation.
Die Headerleiste füllt die komplette Bildschirmbreite und ist zu jedem Zeitpunkt sticky (siehe Headerleiste).
Die Pfadnavigation gibt immer an, in welchem Objekt, ausgehend von dem geöffneten Modul, sich Nutzende befinden. Dabei ist die Bezeichnung des letzten Eintrages in der Pfadnavigation mit dem Seitentitel darunter identisch (siehe Pfadnavigation).
Der Seitentitel beinhaltet immer den Name der geöffneten Seite. Dieser ist mit der geöffneten Seite (letzter Eintrag) in der Pfadnavigation identisch. Der Schrifttyp ist H1 (siehe Schriften).
Über diesen Auswahlschalter kann (falls fachlich im jeweiligen Modul vorgesehen) zwischen verschiedenen Ansichten wie beispielsweise einer Tabellen-, Listen- oder Baumdarstellung gewechselt werden (siehe Auswahlschalter).
Der Neuanlage-Button ist in den meisten Fällen ein primärer Textbutton ohne Icon, welcher folgendermaßen bezeichnet ist: “[Objekt] anlegen”. Der Objektname in der Buttonbezeichnung ist in der Regel mit dem Seitentitel identisch.
In manchen Fällen kann der Neuanlage-Button auch ein Untermenü öffnen (beispielsweise, wenn Objekte verschiedener Typen über diesen Button angelegt werden können. In diesem Fall wird zusätzlich zum Buttonext noch ein nach unten gerichtetes Dreiecks-Icon angezeigt (siehe Button).
Mit Hilfe der Suchzeile kann der darunterliegende Inhalt durchsucht werden (siehe Suchfeld).
Je nach fachlicher Anforderung kann ein vorgefertigtes Set an Filtern bereits angezeigt werden oder Nutzende können sich Filter selbst konfigurieren (siehe Filter).
Dieser Text gibt an, wie viele Einträge der darunterliegende Inhaltsbereich aktuell enthält. Wird eine Suche ausgeführt oder Filterkriterien gesetzt bzw. verändert, so ändert sich auch der Wert entsprechend.
Der Schrifttyp ist “Subhead” (siehe Schriften). Im Code ist es trotzdem als “H2” zu kennzeichnen.
Über die Tabelleneinstellungen können beispielsweise die Spalten und deren Reihenfolge konfiguriert und ggf. Mehrfachauswahl aktiviert bzw. deaktiviert werden
(siehe Tabelle: Verhalten der Funktion “Tabellen-Einstellungen”)
Über die Funktion können alle in der Baumstruktur enthaltenen Elemente auf einmal auf- bzw. zugeklappt werden (siehe Baumstruktur: Verhalten Funktion “Alles auf- bzw. zuklappen”).
Über die Funktion kann sowohl das Sortierparameter als auch die Sortierrichtung der darunterliegenden Liste geändert werden (siehe Listen: Sortierung).
Im Inhaltsbereich werden alle Elemente angezeigt, die zu den oberhalb definierten Such- und Filterkriterien passen.
(siehe Tabelle/Liste/Baumstruktur)
(optional, je nach Fenstergröße)
Der genau gleiche Aufbau (siehe oben Aufbau der Seite) gilt auch für Detailformulare innerhalb eines Verfahrens. Die einzigen Unterschiede sind:
Beim initialen Seitenaufruf liegt der Fokus auf dem ersten interaktiven Element unterhalb der Pfadnavigation.
Zwischen Headerleiste und Pfadnavigation wird der Verfahrensheader eingeschoben. Dieser füllt die komplette Fensterbreite.
Bei allen Fensterbreiten überhalb von 400 Pixeln gilt:
Elemente | Verhalten |
|---|---|
Headerleiste | Komplette Fensterbreite |
Pfadnavigation | Füllt alle 12 Spalten des Seitenlayouts |
Seitentitel | Linksbündig ausgerichtet an der ersten Spalte des Maximale Breite vor Umbruch: 12 Spalten |
Suchfeld | Maximale Breite von 560 Pixeln; Minimale Breite: 212 Pixel; Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts Eingerückt um16 Pixel (margin left) |
Neunalage-Button + Ansichts-Switch | 16 Pixel Abstand zueinander; Rechtsbündig ausgerichtet an der letzten Spalte des Formularlayouts; Eingerückt um 16 Pixel (margin right); Top-aligned mit Suchfeld |
Filter | Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts; Eingerückt um16 Pixel (margin left); Maximale Breite vor Umbruch: Komplette 12 Spalten |
[Anzahl] Einträge | Linksbündig ausgerichtet an der ersten Spalte des Seitenlayouts; Eingerückt um16 Pixel (margin left) |
Tabellen-Einstellungen | (bei Tabellen): Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts |
Sortier-Funktion | (bei Listen): Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts |
Alle Auf/Zuklappen-Funktion | (bei Baumstrukturen): Rechtsbündig ausgerichtet an der letzten Spalte des Seitenlayouts |
Tabelle/Liste/Baumstruktur | Füllt alle 12 Spalten des Seitenlayouts |
Zwischen Suchfeld und Neuanlage-Button + Ansichts-Switch bleibt ein Mindestabstand von 16 Pixeln. Das Suchfeld wird ggf. kleiner. Sobald das Suchfeld seine minimale Größe von 212 Pixeln nicht mehr erreichen kann, wird der Neuanlage-Button zu einem Primären Button ohne Text und enthält nur noch ein Plus-Icon. Der Tooltip-Text lautet dann “[Objekt] anlegen”. Handelt es sich bei dem Neuanlage-Button um einen Button mit Untermenü, so wird nur noch das Dreiecks-Icon angezeigt und der Tooltip-Text entspricht dem vorherigen Buttontext.
Ab einer Fensterbreite unterhalb von 400 Pixeln gilt:
Wenn Nutzer:innen bei einer Fensterhöhe von über 1024 Pixeln scrollen, bleiben fast alle Elemente oberhalb des Tabelleninhalts sichtbar. Der Abstand zwischen Headerleiste, Seitentitel und Suchfeld reduziert sich beim Scrollen leicht (von 32 auf je 24px). Die Anzahl der gefundenen Einträge wird beim Scrollen ausgeblendet.
Wird bei einer Fensterhöhe unterhalb von 960 Pixeln gescrollt, so bleibt nur die Hauptnavigations-leiste und der Tabellenheader immer sichtbar.
Die Pfadnavigation liegt zunächst auf hellem Grund. Sobald Nutzer:innen anfangen zu scrollen und der Verfahrensheader den sichtbaren Bereich verlässt, wird die Pfadnavigation invertiert (siehe Pfadnavigation) und bleibt am oberen Rand sticky. Auch wenn sich der Pfadnavigation-nhalt nur über die 12 Seitenlayoutspalten erstreckt, wird das Fenster dann auf Höhe der Pfadnavigation auf kompletter Breite blau eingefärbt.
Ansonsten kein Unterschied zum Scrollverhalten auf Seiten außerhalb eines Verfahrens. Der Verfahrensheader bleibt nicht sticky.
H1: Seitentitel
H2: Anzahl Einträge in der Sidebar; visuell Schrifttyp “Subhead”
H1: Titel des Verfahrens; visuell H3
H2: Seitentitel (visuell Schrittyp H1)
H3: Anzahl Einträge in der Sidebar; visuell Schrifttyp “Subhead”