

# Formularseite

# Overview

## Intro

Die Formularseite ist die bevorzugte Lösung, um Objekte mit einfacher bis mittlerer Komplexität anzulegen, darzustellen und zu bearbeiten.

 ![](/images/versions/25-0/figma/6x1kjjDZmI6ASzxr1psHPP/99_32891.png)<!--[Figma](https://www.figma.com/design/6x1kjjDZmI6ASzxr1psHPP/?node-id=99:32891)--> 

 <strong>Formularseite</strong> 

## Verwendung

|👍 Do|👎 Don't|👍 Do|
|-|-|-|
|...wenn einzelne Datensätze, die eine einfache Komplexität haben, hinzugefügt, vollständig angezeigt und bearbeitet werden sollen. (Einfache Objekte: 1\-20 Felder, keine 1\-N Relationen, keine oder wenige Fremdschlüssel)|...wenn einzelne Datensätze eine hohe Komplexität haben.<br>Verwende dazu die Objektseite. (Komplexe Objekte: 20\+ Felder, 1\-N Relationen, beliebig viele Fremdschlüssel)|Formularseiten werden sowohl im Rahmen vom einfachem Master Detail Bedienmuster genutzt, als auch um Sektionen einer Objektseite zu bearbeiten.|

# Guidelines

## Aufbau
 ![](/images/versions/25-0/figma/6x1kjjDZmI6ASzxr1psHPP/166_21959.png)<!--[Figma](https://www.figma.com/design/6x1kjjDZmI6ASzxr1psHPP/?node-id=166:21959)--> 

 <strong>Aufbau der Formularseite</strong> 

### 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.

Wenn eine Formularseite auf das Bearbeiten einer Sektion einer Objektseite folgt, muss weiterhin der Object Header angezeigt werden.

### Formularfehlerliste (Optional)

Fehlermeldungen, die z.B. Formularfelder abgreifender Natur sind oder erst nach dem Absenden des gesamten Formulars identifiziert werden können, werden in der  <em>Formularfehlerliste </em> mit einem Callout angezeigt.

Siehe  [Formulare]()  für weitere Informationen bzgl. Formularvalidierungen

### Formular

Die Daten vom Objekt werden in Form eines  <em>Formular\-Layouts</em>  in diesem Bereich präsentiert.

Siehe  [Formulare]()  für weitere Informationen bzgl. Layout Empfehlungen und Funktionsweise.

### Function Bar

In der  [Function Bar]()  <em> </em> befinden sich die Funktionen, um mit den angezeigtem Objekt zu interagieren.

Inhalt der Funktionsleiste:

* Speichern\-Taste (erforderlich)
* Abbrechen\-Taste (erforderlich)
* Löschen\-Taste (optional)

Weitere Tasten stehen zur Verfügung wenn sich das Formular z.B. in einem Wizard befindet s.  [Wizard]() .

## Verhalten
 ![](/images/versions/25-0/figma/6x1kjjDZmI6ASzxr1psHPP/153_15885.png)<!--[Figma](https://www.figma.com/design/6x1kjjDZmI6ASzxr1psHPP/?node-id=153:15885)--> 

 <strong>MATE Formularseite Verhalten</strong> 

1. <strong>Formularseiten</strong>  stellen entweder Objekte, die zu einer Kollektion gehören, oder ein Objekt, das zu einem komplexen Objekt gehört, dar. Daher implementieren die  <strong>Breadcrumbs </strong> die  <strong>hierarchische Navigation.</strong>  Siehe  [Master\-Detail\-Muster]()  und  [Navigationlogik]()  unter Patterns \& Pagetypes. Die Seitenüberschrift wird dynamisch angezeigt. Siehe dazu den Abschnitt  [Seitenüberschrift und Object Header]()  in unter UX Writing in Foundations.
1. Auf Formularseiten kann der  <strong>Object Header optional</strong>  verwendet werden, um Informationen zum dargestellten Objekt hervorzuheben. Entscheidet man sich gegen die Anzeige eines Object Headers, muss stattdessen eine separate  <strong>Seitenüberschrift </strong> gesetzt werden.
1. Bei Bedarf kann die  <strong>Formularfehlerliste</strong>  <em> </em> in einem Callout <em> </em> angezeigt werden. Diese schiebt das darunter liegende Formular runter, ggf. auch über den unteren Bildschirm hinaus.
1. Siehe  [Formulare]()  für detaillierte Informationen für das Verhalten von Formularen
1. Die  <strong>Function Bar</strong>  befindet sich permanent am unteren Bildschirmrand und beinhaltet Funktionen die sich auf das gesamte Objekt beziehen. Sie bietet mindestens die Funktionen zum Abbrechen und Speichern. Optional sind weitere Funktionen, die sich auf das gesamte Objekt beziehen wie z.B. Löschen, in der Funktionsleiste anzuordnen.
1. Der Inhalt zwischen  <strong>Titelleiste</strong>  und  <strong>Funktionsleiste</strong>  lässt sich, falls nicht der gesamte Inhalt angezeigt werden kann, vertikal scrollen.

## Barrierefreiheit

Siehe Barrierefreiheit unter  [Formulare]()  für weitere Informationen.

Spezifische Punkte für die Barrierefreiheit der Formularseite sind außerdem:

1. Formularfehlerliste: Sollte eine  <em>Formularfehlerliste</em>  angezeigt werden müssen, dann muss der Fokus auf die Überschrift gelegt werden.
1. Dynamisch Eingeblendete Elemente: Es muss sichergestellt werden, dass alle Elemente \- auch dynamisch eingeblendete \- von einem Screenreader erfasst werden und über die Tastatur ansteuerbar sind.

