Anlegen und Bearbeiten

Best Practices

• Anlegen und Bearbeiten finden immer in einem Modal oder OffCanvas statt – so können User Prozesse überall starten, ohne den Workflow zu unterbrechen.
• Halte den Anlegeprozess schlank und versuche, auf Defaults zu setzen. Details können vom User später auf der Detailseite angepasst werden.
• Gliedere komplizierte Prozesse in Sections, um die Übersicht zu erhalten. Jede Section kann über die SectionAction Teilprozesse ansteuern.
• Nutze die IllustratedMessage, wenn noch keine Inhalte existieren.

---

Grundlagen

Modal vs. OffCanvas

Anlege- und Bearbeitungsprozesse werden im mStudio grundsätzlich in einem Modal ausgeführt. So kann der User jederzeit den passenden Prozess starten, ohne seinen Workflow zu unterbrechen. Das Modal gibt es in der klassischen Modal Darstellung und als Off-Canvas-Variant:

• Modal: Für kurze, fokussierte Prozesse – etwa einfache Formulare oder schnelle Einstellungen, die der User direkt erledigt.
• OffCanvas: Für komplexere Abläufe mit mehreren Schritten oder umfangreichen Eingaben. Eine flexible Breite sowie die Möglichkeit, zu scrollen, sorgen für Übersichtlichkeit und bessere Orientierung.

Abhängige Information

Viele Anlege- bzw. Bearbeitungsprozesse benötigen Informationen aus anderen Prozessen. Diese Informationen können entweder fehlen oder bereits vorhanden sein:

Fehlende Informationen: Manche Prozesse lassen sich erst abschließen, wenn bestimmte Voraussetzungen erfüllt sind. So können z. B. Buchungsprozesse nur abgeschlossen werden, wenn bereits ein Vertragspartner existiert. Zum Beispiel:

• Eine Extension kann nur installiert werden, wenn in der gewählten Organisation bereits ein Vertragspartner existiert. Fehlt dieser, erscheint ein Alert mit einer Erklärung und der Möglichkeit, direkt in den „Vertragspartner anlegen“-Prozess zu starten – ohne den aktuellen Kontext zu verlassen.

Vorhandene Informationen: In anderen Prozessen können bestehende Inhalte direkt genutzt werden – mit der Option, bei Bedarf neue anzulegen.

Beispiel: Bei der Installation einer App wählt der User eine vorhandene Domain aus. Falls nötig, kann er an dieser Stelle auch eine neue Subdomain anlegen.

Komplexe Prozesse

Umfangreiche Anlege- oder Bearbeitungsprozesse werden in einzelne Sections gegliedert. In jeder Section kann die SectionAction genutzt werden. Damit kann der User Teilprozesse direkt innerhalb des Gesamtprozesses erledigen.

Beispiel: Das Anlegen eines Containers ist ein umfangreicher Prozess. Sections im OffCanvas sorgen dafür, dass der Ablauf trotzdem strukturiert und übersichtlich bleibt.

---

Anlegen

Anlegeprozesse sollen den Einstieg so einfach und schnell wie möglich machen. Darum sollte der User nicht jedes Detail sofort konfigurieren müssen. Stattdessen empfiehlt es sich, wo sinnvoll, Default-Werte zu setzen. Diese lassen sich nach dem Anlegen jederzeit auf der Detailseite anpassen.

Leerer Zustand vs. vorhandener Inhalt

Ein leerer Zustand bedeutet: Es wurden noch keine Elemente angelegt. In diesem Fall ersetzt die IllustratedMessage die List und bietet einen großen CTA zum Anlegen des ersten Elements.

Beispiel: Sind noch keine Projekte angelegt, wird in der Projektübersicht eine IllustratedMessage angezeigt.

Sobald Inhalte vorhanden sind, rückt die Navigation über die List in den Vordergrund. Die ActionGroup im Header der List übernimmt dann die Funktion, den Anlegeprozess für neue Elemente zu starten.

Beispiel: Sind Projekte angelegt, werden diese in einer List dargestellt.

Gleiche und unterschiedliche Elemente

Wenn die List ausschließlich aus Elementen des gleichen Typs besteht, z. B. Cronjobs oder Mitgliedern, ist der Ablauf besonders einfach: Ein Klick auf den Anlege-Button öffnet sofort das Modal zum Anlegen. Wenn verschiedene Elementtypen in einer Liste stehen (z. B. Domain, Subdomain, vHost), öffnet der Anlege-Button zunächst ein ContextMenu, in dem der User den gewünschten Typ auswählt. Danach startet der passende Prozess.

Beispiel: Beim Anlegen einer Domain wird über ein ContextMenu zunächst abgefragt, um welche Art von Domain es sich handelt.

Mehr als 5 oder erklärungsbedürftige Elemente

Viele oder erklärungsbedürftige Optionen gibt es z. B. beim Installieren eines CMS. Um den User in einer solchen Situation gut zu leiten, öffnet der Anlege-Button zunächst ein Auswahl-Modal im OffCanvas. Dort kann der User filtern, suchen und sich über jedes Element kurz informieren. Danach genügt ein Klick auf das gewünschte Element, um den Prozess zu starten.

Beispiel: Beim Anlegen einer App öffnet sich zunächst ein OffCanvas, um alle zur Verfügung stehenden Optionen übersichtlich darzustellen.

---

Bearbeiten

Angelegte Elemente verfügen meist über eine Detailseite. Diese kann aus mehreren Sections (vgl. Content strukturieren) bestehen. Innerhalb einer Section kann über die SectionAction ein „Bearbeiten“-Button platziert werden, mit dem der User Inhalte direkt dort ändern kann, wo sie angezeigt werden.

Beispiel: Die Detailseite einer App ist in mehrere Sections aufgeteilt. Jede Section stellt Informationen oder Konfigurationen zu einem bestimmten Inhalt dar. Über die SectionAction lassen sich die angezeigten Inhalte bearbeiten oder neue Prozesse starten.