Global Header

Der Global Header ist die oberste Leiste der Benutzeroberfläche und bietet Zugang zu anwendungsübergreifenden Funktionen.

Overview

Global Header

Intro

Der Global Header ist auf jeder Seite sichtbar und enthält anwendungsübergreifende Funktionen und Informationen. Er zeigt keine Inhalte oder Einstellungen an, die sich auf spezifische Softwarebereiche oder einzelne Module beziehen. Über den Application Switcher im Global Header kann der Nutzer zu einer anderen Anwendung wechseln – entweder direkt oder in einem neuen Tab.

Verwendung

Da der Global Header Teil der Mate Application ist, kommt diese überall zum Einsatz, wo die Mate Application verwendet wird. Grundsätzlich hat jede Seite die Mate Application und somit den Global Header.

Guidelines

Aufbau

Der Global Header besteht aus dem (1) AKDB Logo, der Information über den angezeigten Softwarebereich - bestehend aus (2) Anwendung, (3) Modulname und (4) Mandant - sowie den Icon-Tasten für (5) Application Switcher, (6) Benachrichtigungen, (7) Hilfe, (8) Systemeinstellungen und (9) Benutzerprofil. Das Icon für das Benutzerprofil ist aktuell das "Person" Icon. In Zukunft ist es denkbar, dass ein kreisförmiges Bild verwendet wird, welches vom Nutzer selbst festgelegt werden kann, wozu diese Funktion noch im Nutzerkonto hinzugefügt werden muss.

Aufbau Global Header für Anwendungen mit Applikationsleiste

Weiteres

Anwendungen, die nicht in Module unterteilt sind, sondern als eigenständige Einzelanwendung konzipiert sind, verfügen über keine Applikationsleiste. Das Navigationspanel wird in diesen Fällen über das Hamburger-Menü (1) im globalen Header ein- und ausgeklappt.

Aufbau Global Header für Anwendungen ohne Modulstruktur

Verhalten

Wenn die Nutzer zwischen verschiedenen Mandanten, Anwendungen oder Programm-Modulen navigieren, aktualisiert sich entsprechend die Information im Header. Bei Klick auf eine Icon-Taste (z. B. globale Einstellungen oder Hilfe), öffnet sich eine Auswahl, welche alle verfügbaren untergeordneten Optionen anzeigt. Bei Klick auf eine Option, öffnet sich die zugehörige Seite.

Global Header mit geöffnetem Benutzerprofil

App Switcher

Im Global Header wird auch zwischen Anwendungen über den Application Switcher gewechselt. Die Information im Header passt sich automatisch an. Alle AKDB Fachverfahren für die ein Nutzer Berechtigungen hat, können über den Menüpunkt "AKDB Fachverfahren" aufgerufen werden.

Global Header App Switcher

Responsivität

Fachverfahren

Bei Fachverfahren wird eine kleinere Version des AKDB Logos angezeigt. Die Buttons oben rechts werden in eine Overflow Taste verschoben. Ein Menü ist weiterhin über die Applikationsleiste aufrufbar und über das Navigationspanel schließbar. Zu langer Text im Global Header wird mehrzeilig umgebrochen, damit er vollständig sichtbar bleibt.

Mobile Fachverfahren

Nicht Fachverfahren

Bei Anwendungen, die keine Fachverfahren sind, wird in der Regel kein AKDB Logo angzeigt, eine Anzeige ist jedoch möglich. Die Buttons oben rechts werden in eine Overflow Taste verschoben. Ein Menü ist über ein Hamburger Menü aufrufbar und schließbar.

Mobile nicht Fachverfahren

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") sind die Icon-Tasten fokussierbar. Zwischen den einzelnen Elementen lässt sich mit der Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") navigieren. Ist eine Icon-Taste fokussiert, so kann man durch die Eingabetaste ("Enter") oder Leerzeichentaste ("Space") eine Listbox öffnen. Bei dieser Variante ist keine Option in der Listbox fokussiert. Fokussieren lässt sich die Listbox dann durch die Pfeiltaste nach unten oder nach oben. Die Listbox lässt sich ebenso durch eine fokussierte Icon-Taste und der Pfeiltaste nach unten öffnen. Hier ist aber dann gleich die Listbox fokussiert. Bei beiden Varianten kann man über die Pfeiltasten nach oben und nach unten zwischen den Optionen in der Listbox navigieren. Mit der Eingabetaste ("Enter") oder Leerzeichentaste ("Space") kann man dann eine Option auswählen.

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-application--docs

Development Java

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fapp-layout