

# Notes

# Overview

## Intro

Notizen ermöglichen den Nutzern  <strong>unformatierte</strong>   <strong>Texte</strong>  zu verfassen. Das kann notwendig sein, um z.B. Entscheidungen zu  <strong>dokumentieren</strong> , sich mit anderen Nutzern zu einem Sachverhalt rudimentär  <strong>auszutauschen</strong>  oder um sich als Sachbearbeiter  <strong>Vermerke</strong>  für später zu machen. 

 ![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5007_16698.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5007:16698)--> 

 <strong>Notizen Liste</strong> 

## Verwendung

|👍 Do|👎 Don't|
|-|-|
|...wenn Nutzer mehrere Notizen zu einem Sachverhalt erfassen müssen, oder alte Notizen nach der Migration wieder auffindbar gemacht werden sollen.<br>...wenn Nutzer Entscheidungen zu einem Sachverhalt festhalten wollen.<br>...wenn Nutzer sich zu einem Sachverhalt austauschen wollen. Eine rudimentäre Kollaboration soll weiterhin mit Notizen möglich sein. Komplexere soziale Interaktionen z. B. mit Antworten auf Fragen in Thread\-Form in Kombination mit Benachrichtigungen sind für ein zukünftiges Muster vorgesehen.|...wenn einzelne Informationen zu einem Datensatz erfasst werden sollen. Verwende dafür ein reguläres mehrzeiliges Eingabefeld.|

### Als Sektion in Objektseiten
 ![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5008_52696.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5008:52696)--> 

 <strong>Notizen als Sektion einer Objektseite</strong> 

### In der Seitenleiste

Alternativ lassen sich Notizen ebenfalls in der Seitenleiste integrieren.

 ![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5009_44528.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5009:44528)--> 

 <strong>Notizen in der Seitenleiste einer Objektseite</strong> 

Durch die Integration über eine Seitenleiste können Notizen auch auf Formularseiten genutzt werden. So haben die Nutzer auch dort Zugriff auf Informationen aus Notizen und können neue hinzufügen. 

 ![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5009_100034.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5009:100034)--> 

 <strong>Notizen in der Seitenleiste einer Formularseite</strong> 

## 

## Aufbau

Notizen werden in einer Liste mittels einer Tabelle dargestellt. Neue Notizen werden in Modal Dialogen erfasst. Bestehende Notizen können in Modal Dialogen bearbeitet werden. Die integrierte Lösung auf Basis von Tabellen und Modal Dialogen ermöglicht eine performante Nutzung in beliebigen Kontexten.  

 ![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/3011_3546.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=3011:3546)--> 

 <strong>Notes Aufbau</strong> 

  
  

 <strong>1. Überschrift</strong> 

Die Liste der Notizen wird in einer Tabelle mit dazugehöriger Tabellenfunktionsleiste dargestellt. Dort wird automatisch neben der Überschrift die Anzahl der verfügbaren Notizen dargestellt.

 <strong>2. Suche (Optional)</strong> 

Bei Bedarf kann den Nutzern eine Suche angeboten werden.

 <strong>3. Hinzufügen Taste</strong> 

Um eine neue Notiz hinzuzufügen, klicken die Nutzer auf die Taste. Dies öffnet einen Modal Dialog, in dem eine neue Notiz verfasst werden kann.

 <strong>4. Titel</strong> 

Notizen können einen Titel haben.

 <strong>5. Bearbeiten und Löschen</strong> 

Bestehende Notizen können durch die beiden Icon\-Tasten entweder in einem Modal Dialog bearbeitet oder gelöscht werden.

 <strong>6. Notiz</strong> 

Der Text der Notiz ist ein Pflichtfeld beim Erfassen von neuen Notizen. Die zulässige Zeichenlänge kann von jeder Anwendung selbst bestimmt werden. Die Komponente macht hier keine Vorgaben.

 <strong>7. Alles anzeigen, weniger anzeigen</strong> 

Wenn Notizen eine gewissen Zeichenmenge überschreiten, dann werden diese ausgepunktet und ein Taste "Alles anzeigen" erscheint unter der Notiz. Ein Klick darauf zeigt die vollständige Notiz an, wobei die Taste ihren Titel zu "Weniger anzeigen" wechselt und am Ende der Notiz angezeigt wird.

 <strong>8. Metadaten</strong> 

Die Metadaten werden vom System automatisch erzeugt. 

 <strong>9. Dateien Anhänge (Ausblick)</strong> 

Perspektivisch wird es möglich sein, auch Daten an Notizen bzw. Sachverhalte anzuhängen. Siehe dazu auch das Muster "Anhänge", das in Planung ist.

# Guidelines

## Verhalten

### Notizen hinzufügen

Ein Klick auf "Hinzufügen" öffnet den Modal Dialog zum Verfassen einer neuen Notiz. Damit lassen sich neue Notizen erfassen, ohne dass die Nutzer auf eine andere Seite navigieren müssen.

 ![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5010_41208.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5010:41208)--> 

 <strong>Add Note</strong> 

### Notiz bearbeiten

Ein Klick auf "Bearbeiten" öffnet den Modal Dialog zum Bearbeiten einer bestehenden Notiz. 

 ![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5010_41449.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5010:41449)--> 

 <strong>Edit Note</strong> 

### Notiz löschen

Ein Klick auf "Hinzufügen" öffnet den Modal Dialog zum Verfassen einer neuen Notiz. Damit lassen sich neue Notizen erfassen, ohne dass die Nutzer auf eine andere Seite navigieren müssen.

 ![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5010_41634.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5010:41634)--> 

 <strong>Delete Note</strong> 

### Responsives Verhalten

Notizen sind vollständig responsive. Dadurch lassen sie sich in verschiedenen Kontexten einbinden.

|||
|-|-|
|![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5010_40368.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5010:40368)-->|<strong>Notes Small</strong>|
|![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5010_40370.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5010:40370)-->|<strong>Notes Medium</strong>|
|![](/images/versions/25-0/figma/ZdNbyMG6zF72q3fcr3mBhm/5010_40372.png)<!--[Figma](https://www.figma.com/design/ZdNbyMG6zF72q3fcr3mBhm/?node-id=5010:40372)-->|<strong>Notes Large</strong>|

## Barrierefreiheit

Die Komponente stellt die Barrierefreiheit selbst sicher. Bei der Implementierung ist nichts weiter zu berücksichtigen.

