Notes
Overview
Intro
Notizen ermöglichen den Nutzern unformatierte Texte zu verfassen. Das kann notwendig sein, um z.B. Entscheidungen zu dokumentieren , sich mit anderen Nutzern zu einem Sachverhalt rudimentär auszutauschen oder um sich als Sachbearbeiter Vermerke für später zu machen.
Notizen Liste
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. ...wenn Nutzer Entscheidungen zu einem Sachverhalt festhalten wollen. ...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
Notizen als Sektion einer Objektseite
In der Seitenleiste
Alternativ lassen sich Notizen ebenfalls in der Seitenleiste integrieren.
Notizen in der Seitenleiste einer Objektseite
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.
Notizen in der Seitenleiste einer Formularseite
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.
Notes Aufbau
1. Überschrift
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.
2. Suche (Optional)
Bei Bedarf kann den Nutzern eine Suche angeboten werden.
3. Hinzufügen Taste
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.
4. Titel
Notizen können einen Titel haben.
5. Bearbeiten und Löschen
Bestehende Notizen können durch die beiden Icon-Tasten entweder in einem Modal Dialog bearbeitet oder gelöscht werden.
6. Notiz
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.
7. Alles anzeigen, weniger anzeigen
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.
8. Metadaten
Die Metadaten werden vom System automatisch erzeugt.
9. Dateien Anhänge (Ausblick)
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.
Add Note
Notiz bearbeiten
Ein Klick auf "Bearbeiten" öffnet den Modal Dialog zum Bearbeiten einer bestehenden Notiz.
Edit Note
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.
Delete Note
Responsives Verhalten
Notizen sind vollständig responsive. Dadurch lassen sie sich in verschiedenen Kontexten einbinden.
 | Notes Small |
 | Notes Medium |
 | Notes Large |
Barrierefreiheit
Die Komponente stellt die Barrierefreiheit selbst sicher. Bei der Implementierung ist nichts weiter zu berücksichtigen.
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=/story/komponenten-messageitem--notes