# Objektseite # Overview ## Intro Die  Objektseite  ist die bevorzugte Lösung, um komplexe Daten anzuzeigen und zu bearbeiten. Sie bietet dazu eine flexible Struktur an, die beliebige Inhalte abbilden kann, sowie eine  Anchor\-Nav,  um einzelne  Sektionen  auf der Seite schneller zu erreichen. ![](/images/versions/25-0/figma/Zara4cRvI50WZjHZhBygt5/2082_112712.png) MATE Intro Objektseite ## Verwendung |👍 Do|👎 Don't| |-|-| |...wenn der Nutzer komplexe Objekte mit allen Einzelheiten einsehen und bearbeiten will.
(Komplexe Objekte: 20\+ Felder, 1\-N Relationen, beliebig viele Fremdschlüssel)|...wenn der Nutzer Daten mit einfacher Komplexität einsehen oder bearbeiten will. (Einfache Objekte: 1\-20 Felder, keine 1\-N Relationen, keine oder wenige Fremdschlüssel)
Nutze dafür das einfache Master Detail Bedienmuster.
...wenn der Nutzer mehrere komplexe Datensätze auf einmal bearbeiten will, nutze dazu die Tabellenseite.
...wenn der Nutzer komplexe Daten anlegen will, nutze dazu die Prozessnavigation.| # Guidelines ## Aufbau ![](/images/versions/25-0/figma/Zara4cRvI50WZjHZhBygt5/2082_153825.png) Aufbau der Objektseite ### Global Header Der [Global Header]() ist die oberste Leiste der Benutzeroberfläche und bietet Zugang zu anwendungsübergreifenden Funktionen. ### Breadcrumbs [Breadcrumbs]() zeigen Nutzenden, wo sie sich befinden und erlauben es, schnell eine oder mehrere hierarchische Ebenen zurück zu gehen. ### Object Header und Seitenüberschrift Die Seitenüberschrift dient zur Orientierung. Sie sollte die dargestellte Seite beschreiben und/oder das Objekt bzw. den Kontext wie z.B. in welcher Funktion sich der Nutzer derzeit befindet, kommunizieren. Aktuell ist im Design System kein globaler Standard für Seitentitel festgelegt. Die Verantwortung für die Definition und Dokumentation des jeweils richtigen Seitentitels liegt auf Produktebene. Siehe den Abschnitt [Seitenüberschrift und Object Header]() unter UX Writing in Foundations. ### Anchor\-Nav Die  [Anchor\-Nav]()  erleichtert es dem Nutzer, die einzelnen  Sektionen  zu erreichen und gibt ihm eine Übersicht, welche Inhalte auf dieser Seite zu finden sind. Inhalt der  [Anchor\-Nav]() : * Links zu den Überschriften aller  Sektionen  der  Objektseite  (erforderlich) ### Sektionen Sektionen  stellen semantisch zusammengehörige Daten vom Objekt dar, z.B. Betriebsstätten oder Hauptadresse einer Person. Zusätzlich zu den Objektdaten werden alle Kind\-Objekte als Sektion dargestellt. Inhalt einer Sektion: * Überschrift der Sektion (erforderlich) * Daten der Sektion (erforderlich) * Funktionen um mit den Daten zu interagieren (optional) ## Verhalten 1. Objektseiten  stellen Objekte, die zu einer Kollektion gehören, dar. Daher implementieren die Breadcrumbs die hierarchische Navigation. . 1. Der Object Header ist permanent oberhalb der Anchor\-Nav zu sehen und scrollt nicht mit dem Inhalt mit.

Um Schlüsselinformationen und den notwendigen Kontext für den Nutzer in der Kopfzeile zu kommunizieren, können durchaus Inhalte aus den Sektionen wiederholt und verdichtet werden.

In der Bearbeitenansicht von Sektionen wird die Kopfzeile ebenfalls angezeigt. Die Kopfzeile scrollt in der Bearbeitenansicht ebenfalls nicht mit dem Inhalt mit. 1. Die  [Anchor\-Nav]()   befindet sich permanent unterhalb der  Kopfzeile .

Scrollt der Nutzer im  Inhaltsbereich , dann wird der jeweilige Navigationspunkt hervorgehoben, der sich unterhalb der  [Anchor\-Nav]()  befindet. 1. Sektionen können eine optionale  Funktionsleiste  zur Interaktion mit den Daten der  Sektion . Die Funktionsleiste ist rechtsbündig auf Höhe der Sektionsüberschrift und besteht aus einer oder mehreren Tasten.

Sektionen werden durch Trennlinien optisch voneinander abgegrenzt. #### Varianten Sektionen ||| |-|-| Je nachdem welche Komplexität die Daten haben und in welcher Relation sie zum Objekt stehen, werden diese entsprechend dargestellt und verhalten sich unterschiedlich. 1. Formular \- Sektion Sollte das Objekt eine einfache Relation zu den Daten innerhalb der Sektion haben, dann verwende dazu die  [Key\-Value\-Facet]() . Für eine bessere Übersicht sollten auf der Objektseite lediglich die verfügbaren Daten angezeigt werden, d.h. Name\-Wert\-Facetten ohne Wert sollten gar nicht angezeigt werden. In der optionalen Funktionsleiste befinden sich Tasten, um mit den Daten zu interagieren z.B. um diese über eine Formularseite zu bearbeiten.  2. Tabellen\-Sektion Sollte das Objekt zu mehreren Datensätzen einer  Sektion  eine Relation haben, dann werden die Datensätze in einer Tabelle dargestellt. Standardmäßig kann die Höhe der Tabelle dynamisch zwischen 1 und 20 Zeilen wachsen. Falls nur wenige Einträge vorhanden sind, wird im Layout auch nur wenig Höhe von der Tabelle beansprucht. Sollten mehr Einträge verfügbar sein, können diese durch Scrollen innerhalb der Tabelle von den Nutzern erreicht werden. Im Einzelnen kann die Höhe der Tabelle auch bis zu 50 Zeilen betragen, wenn dadurch ca. 80\% der damit verbundenen Use\-Cases besser bedient werden können. In der optionalen  Funktionsleiste  befinden sich Tasten, um ggf. neue Datensätze hinzuzufügen, sowie weitere Optionen, um mit den Daten zu interagieren.  Die Tabelle verfügt über zeilenbezogene Funktionen, um den jeweiligen Datensatz zu bearbeiten. Dazu kann der jeweilige Datensatz \- abhängig von seiner Komplexität \- entweder in einer  [Formularseite]() ,  [Objektseite]() oder individuellen Seite dargestellt werden. Siehe  [Grids]() für weitere Informationen. 3. Suchen in Tabellen\-Sektionen Die Tabellen\-Funktionsleiste bietet ein optionales Suchfeld, das es ermöglicht, einfache Suchen über alle Tabellenspalten durchzuführen. Für komplexere Suchen empfiehlt das UX Team die Verwendung einer eigenen  [Tabellenseite]() inkl.  [Filter Panel]() . #### Kind\-Objekt als Sektion Sollte das Objekt Kind\-Objekte, also untergeordnete Objekte, besitzen, werden diese ebenfalls als Sektion angezeigt. Es wird für jedes vorhandene Kind\-Objekt je eine Sektion angezeigt! Abhängig von der Datenstruktur des Kind\-Objektes, kann das untergeordnete Objekt als Tabellen\-, Formular\- oder Zusammenfassung\-Sektion angezeigt werden. Die Details zum Kind\-Objekt können über die Taste bzw. die Verknüpfung in der Funktionsleiste angezeigt werden. Im nebenstehenden Beispiel könnte die Sektion "Person" ein Kind\-Objekt darstellen, dass über den Link "Person Detail anzeigen" geöffnet werden kann. ## Bearbeiten von komplexen Objekten Komplexe Objekte zeichnen sich unter anderem dadurch aus, dass sie weitere Objekte aggregieren. Daher ist es sinnvoll, die aggregierten Objekte einzeln bearbeiten und speichern zu können. Dies erfolgt über das Bearbeiten der  Kopfzeile , sowie über die Funktionalitäten der jeweiligen  Sektionen . ### Bearbeiten von Formular\-Sektionen 1. Sollten die Nutzer von einer  Objektseite  zu einer  Bearbeitenansicht  einer  Sektion  vorwärts navigiert sein, so führt die Up\-Navigation\-Taste, die Browser\-Zurück\-Taste, sowie die Abbrechen\-Taste zurück zur  Objektseite , wobei ihr vorheriger Zustand (Scrollposition d.h. welche Sektion vorher angezeigte wurde) wiederhergestellt wird. 1. Sollten die Nutzer nicht gespeicherte Eingaben gemacht haben, dann erfolgt eine Rückfrage, ob diese Verworfen werden sollten, bevor eine Navigation zurück erfolgt. 1. Speichern die Nutzer ihre Eingaben auf der  Bearbeitenansicht , dann wird eine Navigation zurück zur Objektseite ausgelöst. Die Objektseite zeigt ihren vorheriger Zustand (Scrollposition d.h. welche Sektion vorher angezeigte wurde) mit aktuellen Daten. 1. Durch einen  [Toast]() wird das erfolgreiche Speichern vom System an den Nutzer gemeldet ### Bearbeiten von Tabellen\-Sektionen 1. Neue Datensätze können über die Funktionsleiste hinzugefügt werden. Dazu navigiert die Anwendung standardmäßig im selben Browserfenster bzw. Tab. auf eine  Hinzufügenansicht  (leere Formularseite). Den Nutzern stehen die üblichen Optionen im Browser zur Verfügung, um die Navigation zur  Hinzufügenansicht  in einem neuen Fenster oder Tab zu öffnen. 1. Sollten die Nutzer von einer Objektseite zu einer  Bearbeitenansicht  eines Objekts oder zu einer  Hinzufügenansicht  innerhalb der Tabellensektion vorwärts navigiert sein, so führen die Up\-Navigation\-Taste, die Browser\-Zurück\-Taste, sowie die Abbrechen\-Taste zurück zur Objektseite. Die Objektseite zeigt ihren vorherigen Zustand (Scrollposition d.h. welche Sektion vorher angezeigte wurde und die vorherigen Sortierungen der Tabellen). Die Scrollposition innerhalb der Tabelle muss nicht wiederhergestellt werden, d.h. die vorher anzeigten Zeilen müssen nicht wieder anzeigen werden. 1. Sollte der Nutzer ungespeicherte Eingaben gemacht haben, dann wird er gefragt, ob diese Verworfen werden sollten, bevor eine Navigation zurück erfolgt. 1. Speichern die Nutzer ihre Eingaben auf der  Bearbeiten \- oder  Hinzufügenansicht , dann wird eine Navigation zurück zur Objektseite ausgelöst. Die Objektseite zeigt ihren vorheriger Zustand (Scrollposition d.h. welche Sektion vorher angezeigte wurde und die vorherigen Sortierungen der Tabellen) mit aktuellen Daten an. Die Scrollposition innerhalb der Tabelle muss nicht wiederhergestellt werden, d.h. die vorher anzeigten Zeilen müssen nicht wieder anzeigen werden. 1. Durch einen  [Toast]() wird das erfolgreiche Speichern vom System an den Nutzer gemeldet. ## Barrierefreiheit ||| |-|-| |![](/images/versions/25-0/figma/Zara4cRvI50WZjHZhBygt5/2088_76595.png)|Ausschnitt eine Sektion| |![](/images/versions/25-0/figma/Zara4cRvI50WZjHZhBygt5/2088_77377.png)|Navigationsreihgenfolge| 1. Kopfzeilenüberschrift : Die Überschrift der Kopfzeile muss mittels H3 Überschrift und  `synneo\-heading\-xl`  umgesetzt werden. 1. Sektionsüberschriften: Die Überschriften der Sektionen müssen mittels H3 Überschriften umgesetzt werden, damit assistive Technologien diese mit den anderen Überschriften der Seite zusammen als Liste vorlesen können. Außerdem vereinfacht dies die Navigation auf der Seite, da jeweils zur nächsten Überschrift gesprungen werden kann. 1. Optionale Funktionsleiste: Die Tasten in der optionalen Funktionsleiste bieten Interaktionsmöglichkeiten für jeweils eine Sektion an. Die Titel der Tasten reichen als Beschreibung nicht aus, um sehgeschädigten Nutzer den notwendigen Kontext zu bieten. Ohne zusätzliche Information ist es also unklar, auf welches Element sich die Aktion bezieht. Den Tasten muss daher mittels  "aria\-label" mehr Kontext hinzugefügt werden, indem der Sektionstitel vor den Funktionstitel gestellt wird.
Z.B: `` 1. Tastaturbedienung: Die Objektseite lässt sich vollständig mit der Tastatur bedienen. Über die Tabulatortaste („Tab“) oder Hochstell\- und Tabulatortaste („Shift \+ Tab“) sind interaktive Elemente fokussierbar. Die Reihenfolge richtet sich im Inhaltsbereich nach der Reihenfolge der Elemente der Objektseite. 1. Zum Anfang der Seite springen: Um das Springen zum Anfang der Seite zu vereinfachen, sollte das tastaturgesteuerte Springen via Funktionstaste ermöglicht werden. 1. Sektionen untereinander abgrenzen: Die vorhandenen Bereiche sollten als ARIA\-Regionen definiert werden. Generell sollten, neben der Strukturierung in HTML, immer Markups bzw. Landmarks verwendet werden, um die Seite noch besser zu strukturieren.