3.3 Dialoge & Formulare — Bearbeitungsmasken gestalten

3.3 Dialoge & Formulare — Bearbeitungsmasken gestalten

Erstellen und konfigurieren Sie Bearbeitungsdialoge für Ihre Datenobjekte — mit Reitern, Gruppen, Feldtypen und Validierungsregeln.

1

Was ist ein Dialog?

Ein Dialog in UDM definiert die Bearbeitungsmaske für ein Datenobjekt. Wenn ein Anwender einen Datensatz öffnet — z. B. einen Kunden, ein Ticket oder einen Auftrag — bestimmt der Dialog:

  • Welche Felder angezeigt werden (aus den Feldern des Datenobjekts)
  • Wie die Felder angeordnet sind — in Reitern (Tabs), Gruppen und Spalten
  • Welche Steuerelemente verwendet werden (Textfeld, Auswahlliste, Datum, Checkbox usw.)
  • Welche Regeln gelten — Pflichtfelder, Nur-Lesen, Sichtbarkeitsbedingungen

Dialoge werden im Admin-Client über den Dialog-Designer erstellt und konfiguriert. Jeder Dialog ist einer App und optional einem Datenobjekt oder einer Datenquelle zugeordnet.

Unser Beispiel für diese Anleitung
Kundendialog mit drei Reitern

Sie erstellen einen Bearbeitungsdialog für das Datenobjekt „Kunde“. Der Dialog soll drei Reiter haben: Stammdaten (Firmenname, Kundennummer, Branche), Kontakt (Ansprechpartner, Telefon, E-Mail, Adresse) und Notizen (Freitextfeld für interne Bemerkungen).

UserClient → Kunden-Dialog mit Aktions-Symbolen Speichern / Mehr / Schließen
‹ Zurück DIALOG Kunde bearbeiten · Acme GmbH
💾 ×
2

Schritt 1: Dialog anlegen

  1. Zum Dialog-Bereich navigieren

    Öffnen Sie im Admin-Client die gewünschte App. In der Verwaltungsübersicht finden Sie den Bereich „Dialoge“.

  2. Neuen Dialog erstellen

    Klicken Sie auf „Neu“. Es wird ein leerer Dialog angelegt.

  3. Grunddaten eingeben

    Vergeben Sie einen Titel (z. B. Kunde bearbeiten) und optional eine Beschreibung. Wählen Sie den Dialog-Typ:

    • Dialog — Standard-Bearbeitungsmaske (häufigster Fall)
    • Subdialog — wird als eingebetteter Bereich innerhalb eines anderen Dialogs angezeigt
    • Ansicht (View) — reine Darstellung ohne Datenobjekt-Bindung
  4. Datenobjekt oder Datenquelle zuordnen

    Wählen Sie das Datenobjekt (Entity) oder die Datenquelle aus, deren Felder im Dialog verwendet werden sollen. In unserem Beispiel: das Datenobjekt Kunde.

Tipp: Datenquelle oder Datenobjekt? Ordnen Sie ein Datenobjekt zu, wenn der Dialog direkt auf den Feldern der Datenbanktabelle arbeiten soll. Wählen Sie eine Datenquelle, wenn Sie nur bestimmte Felder oder berechnete Spalten benötigen. In den meisten Fällen ist die Zuordnung zum Datenobjekt der richtige Weg.
3

Schritt 2: Layout mit Reitern und Gruppen aufbauen

Der Dialog-Designer zeigt die Struktur Ihres Dialogs als Elementbaum. Sie können folgende Strukturelemente hinzufügen:

Strukturelement Beschreibung
Reitergruppe (Tabs) Container für mehrere Reiter. Ermöglicht eine übersichtliche Aufteilung in thematische Bereiche.
Reiter (Tab) Ein einzelner Reiter innerhalb einer Reitergruppe. Enthält Felder oder weitere Gruppen.
Gruppe Fasst zusammengehörige Felder visuell zusammen — mit optionalem Rahmen und Titel.
Scroll-Container Container mit fester Höhe, dessen Inhalt vertikal scrollbar ist.
Dashboard-Bereich Raster-Layout für Ansichtselemente (Charts, Grids, KPI-Karten). Panels lassen sich im Designer per Drag&Drop anordnen und in der Größe anpassen. Im User-Client wird das Layout statisch angezeigt.

In unserem Beispiel:

  1. Fügen Sie eine Reitergruppe (TabbedGroupContainer) hinzu
  2. Erstellen Sie darin drei Reiter: „Stammdaten“, „Kontakt“, „Notizen“
  3. Im Reiter „Stammdaten“ erstellen Sie optional eine Gruppe „Allgemein“ für die Kernfelder
Dashboard-Bereich im Dialog Möchten Sie in einem Dialog Ansichtselemente (Charts, Grids, KPI-Karten) in einem flexiblen Raster anordnen? Fügen Sie über das Menü „Neu → Dashboard-Bereich“ einen DashboardContainer hinzu. Im Designer können Sie die Panels per Drag&Drop positionieren und in der Größe anpassen. Die Einstellungen (Spaltenanzahl, Seitenverhältnis, Zellenabstand) finden Sie im rechten Eigenschaftsbereich.
4

Schritt 3: Felder hinzufügen

Felder werden aus den verfügbaren Datenfeldern des zugeordneten Datenobjekts hinzugefügt. Jedes Feld im Dialog ist an ein Datenfeld gebunden und bestimmt, wie der Wert angezeigt und bearbeitet wird.

  1. Feld aus der Datenfeldliste wählen

    Im Dialog-Designer sehen Sie die verfügbaren Datenfelder. Wählen Sie ein Feld aus und ziehen Sie es an die gewünschte Position im Elementbaum — oder nutzen Sie den Button „Element hinzufügen“.

  2. Elementtyp festlegen

    UDM schlägt automatisch einen passenden Elementtyp vor (z. B. Textfeld für Strings, DatePicker für Datumsfelder). Sie können den Typ jederzeit ändern.

  3. Feldeigenschaften konfigurieren

    Im rechten Bereich des Designers legen Sie die Eigenschaften des Feldes fest:

    • Titel — Beschriftung, die dem Anwender angezeigt wird
    • Pflichtfeld — Datensatz kann ohne Eingabe nicht gespeichert werden
    • Nur Lesen — Wert wird angezeigt, kann aber nicht geändert werden
    • Tooltip — Hilfetext, der beim Zeigen mit der Maus erscheint
    • Spaltenbreite (ColSpan) — Wie viele Spalten das Feld im Layout einnimmt
    • Neue Zeile — Feld beginnt in einer neuen Zeile

In unserem Beispiel fügen Sie im Reiter „Stammdaten“ folgende Felder hinzu:

  • Firmenname — Textfeld, Pflichtfeld
  • Kundennummer — Textfeld, Nur Lesen (wird automatisch vergeben)
  • Branche — Auswahlliste (ComboBox), gebunden an die Nachschlagetabelle „Branche“
Tipp: Reihenfolge der Felder Die Reihenfolge der Felder im Elementbaum bestimmt die Darstellung im Dialog. Nutzen Sie die Sortier-Nummer (Lfdnr), um Felder innerhalb einer Gruppe umzuordnen. Setzen Sie häufig genutzte Felder nach oben.
5

Schritt 4: Feldtypen konfigurieren

Je nach Datentyp und Anwendungszweck stehen verschiedene Steuerelemente zur Verfügung. Die folgende Tabelle zeigt die wichtigsten Elementtypen:

Elementtyp Beschreibung Typischer Einsatz
Textfeld (Entry) Einzeiliges Eingabefeld für Text oder Zahlen Name, Nummer, Adresse
Auswahlliste (ComboBox) Dropdown-Auswahl aus einer verknüpften Tabelle oder festen Werten Branche, Status, Kategorie
Datum (DateEdit) Datumsauswahl mit Kalender. Optional mit Uhrzeit. Erstellungsdatum, Termin, Gültig-bis
Checkbox Ja/Nein-Schalter für boolesche Werte Aktiv, Bestätigt, Archiviert
Memo (Mehrzeilig) Mehrzeiliges Textfeld für längere Texte Beschreibung, Notizen, Kommentare
Zahleneingabe (SpinEdit) Numerisches Eingabefeld mit Erhöhen/Verringern-Buttons Menge, Priorität, Bewertung
Relation (Nachschlage) Auswahl eines Datensatzes aus einer anderen Tabelle mit Suchfunktion Zugeordneter Kunde, Verantwortlicher
Dokument (Inline) Eingebetteter Rich-Text-Editor für formatierte Texte Beschreibungen, Protokolle
Bild (ImageView) Anzeige und Upload eines Bildes Foto, Logo, Vorschaubild
Schaltfläche (Button) Klickbare Schaltfläche, die eine konfigurierte Aktion (UdmJob) oder dynamischen Code ausführt Status ändern, Dialog öffnen, Bericht erstellen
Label Reiner Anzeigetext ohne Datenbindung — als Platzhalter oder Überschrift Abschnittsbeschriftung, Hinweis
Info-Element Hilfe- oder Hinweistext, der im Dialog angezeigt wird Erklärungen, Bedienungshinweise
Ansichtselement Eingebettete Tabelle oder Diagramm innerhalb des Dialogs Zugeordnete Positionen, Verlauf
Subdialog Ein anderer Dialog wird als eingebetteter Bereich dargestellt Detail-Ansichten, Zusatzinformationen
Zuordnungsliste m:n-Zuordnung als Tags, Checkliste oder Transferliste Schlagworte, Kategorien, Berechtigungen
Kindliste (ChildList) Eingebettete 1:n-Liste mit Inline-Bearbeitung Positionen, Teilaufgaben, Kontakte

Spezialeinstellungen je Feldtyp

Einige Elementtypen bieten zusätzliche Konfigurationsmöglichkeiten:

Elementtyp Spezialeinstellungen
ComboBox Verknüpfte Tabelle, Anzeigefeld, Filterausdruck
Memo Maximale Höhe, Rich-Text-Modus
DateEdit Uhrzeit anzeigen, nur Uhrzeit (ohne Datum)
Checkbox Darstellungsstil (Schalter, Checkbox, Label)
Bild Maximale Breite/Höhe, feste Abmessungen
Ansichtselement Zugeordnetes Element, Filterausdruck, Auto-Refresh
Schaltfläche Aktion (UdmJob) — verknüpfte Aktion, die beim Klick ausgeführt wird
Schaltflächen mit Aktionen verknüpfen Wählen Sie im Designer den Elementtyp „Button“, erscheint im Eigenschaftsbereich das Feld „Aktion (UdmJob)“. Hier können Sie eine zuvor angelegte Aktion auswählen. Die Schaltfläche übernimmt dann automatisch Titel, Icon, Farbe und Tooltip der Aktion und führt beim Klick die vollständige Aktionslogik aus — z. B. einen Dialog öffnen, Daten kopieren oder eine Nachricht versenden. Alternativ können Sie den Button ohne Aktion anlegen und stattdessen über dynamischen Code individuelles Verhalten definieren.
UserClient → Kunden-Dialog, Reiter „Stammdaten“ mit verschiedenen Feldtypen
Stammdaten
Firmenname
Acme GmbH
Kundennummer
K-2026-0142
Branche
Maschinenbau
Aktiv
ja
Archiviert
nein
Gültig bis
31.12.2026
Notizen
Bemerkung
Schlüsselkunde — bevorzugte Bearbeitung
6

Schritt 5: Validierung und Pflichtfelder

UDM unterstützt zwei Arten von Validierung für Dialog-Felder:

Implizite Validierung

Wird automatisch aus den Datenfeld-Attributen abgeleitet — z. B. NOT NULL in der Datenbank erzwingt ein Pflichtfeld, und die maximale Feldlänge begrenzt die Eingabe. Diese Regeln greifen automatisch, sofern Sie sie nicht pro Element deaktivieren.

Explizite Validierung

Zusätzlich können Sie eigene Validierungsregeln definieren, z. B.:

  • Pflichtfeld (auch wenn das Datenbankfeld NULL erlaubt)
  • Wertebereich (Minimum/Maximum)
  • Regulärer Ausdruck (z. B. E-Mail-Format)
  • Abhängigkeit von anderen Feldern
Achtung: Pflichtfelder und Neuanlage Wenn Sie ein Feld als Pflichtfeld markieren, muss der Anwender dieses Feld bei jeder Neuanlage und Änderung ausfüllen. Markieren Sie nur Felder als Pflicht, die für den Geschäftsprozess wirklich unverzichtbar sind — zu viele Pflichtfelder erschweren die Dateneingabe.
7

Schritt 6: Erweiterte Optionen

Im Bereich „Einstellungen“ des Dialog-Designers finden Sie weitere Konfigurationsmöglichkeiten:

Option Beschreibung
Kopfzeilen-Felder Felder, die im Kopfbereich des Dialogs dauerhaft sichtbar sind — auch beim Wechsel zwischen Reitern.
Unterdialoge Andere Dialoge, die als zusätzliche Reiter im Dialog erscheinen (z. B. für verwandte Objekte).
Aktionen Benutzerdefinierte Buttons und Funktionen, die im Dialog verfügbar sind.
Berechtigungen Steuern Sie, welche Benutzergruppen den Dialog sehen und bearbeiten dürfen.
Dialogbreite Legt fest, wie breit der Dialog dargestellt wird (Standard, Breit, Vollbild).
Neuanlage erlauben Bestimmt, ob über diesen Dialog neue Datensätze erstellt werden können.
Nur Lesen Der gesamte Dialog ist schreibgeschützt — Daten können nur betrachtet werden.
Dynamische Sichtbarkeit Über Filterausdrücke und dynamischen Code können Sie steuern, dass bestimmte Felder oder Gruppen nur unter bestimmten Bedingungen sichtbar sind. Beispiel: Das Feld „Kündigungsgrund“ wird nur angezeigt, wenn der Status auf „Gekündigt“ steht. Diese Logik wird pro Element über einen Filterausdruck oder per DynamicCode konfiguriert.
8

Ergebnis unseres Beispiels

Nach Abschluss der Konfiguration haben wir einen Kundendialog mit:

  • Drei Reitern: Stammdaten, Kontakt, Notizen
  • Stammdaten-Reiter mit Firmenname (Pflicht), Kundennummer (Nur Lesen) und Branche (Auswahlliste)
  • Kontakt-Reiter mit Ansprechpartner, Telefon, E-Mail und Adresse
  • Notizen-Reiter mit einem mehrzeiligen Freitextfeld
9

Zusammenfassung: Aufbau eines Dialogs

Die hierarchische Struktur eines Dialogs folgt immer diesem Schema:

Ebene Element Enthält
1 Dialog Reitergruppen, Gruppen oder direkt Felder
2 Reitergruppe Mehrere Reiter (Tabs)
3 Reiter (Tab) Gruppen oder direkt Felder
3 Gruppe Felder, Labels, Info-Elemente
4 Feld Einzelnes Steuerelement (Textfeld, Checkbox usw.)
Tipp: Dialog-Verknüpfung mit Ansichtselementen Damit ein Dialog beim Doppelklick auf einen Datensatz in einer Tabelle geöffnet wird, muss er über eine Elementzuordnung (Mapping) mit dem Ansichtselement verknüpft werden. Dies geschieht im Ansichtselement unter „Bearbeitungsdialog“.
10

Häufige Fragen

Frage Antwort
Kann ein Datenobjekt mehrere Dialoge haben? Ja. Sie können für dasselbe Objekt verschiedene Dialoge erstellen — z. B. einen kompakten Überblick und einen ausführlichen Bearbeitungsdialog. Über die Elementzuordnung bestimmen Sie, welcher Dialog wo geöffnet wird.
Wie füge ich ein neues Feld hinzu, das noch nicht im Datenobjekt existiert? Im Dialog-Designer können Sie direkt ein neues Datenfeld am Datenobjekt anlegen. Das Feld wird gleichzeitig in der Datenbank erstellt und steht sofort im Dialog zur Verfügung.
Kann ich einen Dialog kopieren? Ja. Über die Aktion „Kopieren“ wird eine Kopie des Dialogs inklusive aller Elemente und Einstellungen erstellt. Sie können die Kopie dann unabhängig anpassen.
Was passiert, wenn ich ein Feld aus dem Dialog entferne? Das Feld wird nur aus der Darstellung entfernt — die Daten im Datenobjekt bleiben vollständig erhalten. Sie können das Feld jederzeit wieder hinzufügen.
Wie kann ich die Reihenfolge der Reiter ändern? Ändern Sie die Sortier-Nummer (Lfdnr) der einzelnen Reiter. Der Reiter mit der niedrigsten Nummer wird zuerst angezeigt.
Kann ich Felder in mehreren Spalten nebeneinander darstellen? Ja. Standardmäßig werden Felder zweispaltig angezeigt. Über die Eigenschaft ColSpan bestimmen Sie, wie viele Spalten ein Feld einnimmt. Mit Neue Zeile erzwingen Sie einen Zeilenumbruch.
11

InfoElement im Dialog

Der neue Elementtyp „InfoElement“ zeigt Aggregationswerte direkt im Dialog an. Konfigurierbar sind Datenquelle, Aggregationsfunktion (COUNT, SUM, AVG, MIN, MAX), Spalte und Scope. Das InfoElement wird als Kennzahl-Kachel dargestellt und aktualisiert sich automatisch bei Filteränderungen.

12

Dashboard-Container im Designer

Im Dialogdesigner können Sie jetzt „Dashboard-Container“ als Bereichs-Container einfügen. Diese verwenden ein flexibles Grid-Layout, in dem Ansichtselemente per Drag&Drop angeordnet und in der Größe angepasst werden können.

13

Inline-Dialog (Subdialog-Element)

Ein Inline-Dialog zeigt einen gebundenen Datensatz direkt innerhalb des Formulars an — ohne separates Popup-Fenster. In Kombination mit einem Grid entsteht ein Master-Detail-Muster: Der Anwender wählt eine Zeile im Grid aus, und der zugehörige Datensatz wird inline angezeigt.

Bearbeitungsmodi

Modus Verhalten
Nur-Lesen (Standard) Der Datensatz wird angezeigt, aber nicht bearbeitet. Felder sind schreibgeschützt.
Editierbar mit Bestätigung Der Datensatz kann bearbeitet werden. Beim Wechsel zu einem anderen Datensatz erscheint ein Bestätigungsdialog: Speichern, Verwerfen oder Abbrechen.
Editierbar mit Auto-Save Änderungen werden beim Datensatzwechsel automatisch gespeichert. Tritt ein Speicherfehler auf, bleibt der aktuelle Datensatz geöffnet.

Konfiguration

  1. Im Dialog-Designer ein Subdialog-Element einfügen.
  2. Als Quell-Ansichtselement das Grid auswählen, das als Master dient.
  3. Optional „Editierbar“ aktivieren und bei Bedarf „Auto-Speichern“ einschalten.
  4. Optional feste Höhe oder Maximalhöhe konfigurieren.
Lazy-Loading Der Inline-Dialog lädt den Datensatz erst beim ersten Klick auf eine Grid-Zeile. Bis dahin wird ein Platzhalter „Kein Datensatz ausgewählt“ angezeigt.
14

Live-Änderungsbenachrichtigungen

Wenn ein anderer Anwender denselben Datensatz ändert, den Sie gerade geöffnet haben, zeigt UDM eine Echtzeit-Benachrichtigung an. So vermeiden Sie Überschreibungen und bleiben über Änderungen informiert.

Benachrichtigungsmodi

Modus Verhalten
Keine Keine Benachrichtigung. Der Anwender sieht Änderungen erst beim nächsten Laden.
Info-Anzeige Ein animierter Indikator im Dialog-Header zeigt an, dass Änderungen vorliegen. Per Klick öffnet sich ein Dropdown mit Details (geänderte Felder, Benutzername, Zeitpunkt).
Sofortige Aktualisierung Der Dialog wird automatisch mit den neuen Werten aktualisiert.

Indikator-Anzeigen

  • Im Dialog-Header: Orangener Punkt vor den Speicher-Buttons mit Dropdown-Liste der Änderungen.
  • In der Tabellenansicht: Geänderte Zeilen werden mit einem orangeroten Indikator in der Funktionsspalte markiert.
Technische Grundlage Die Benachrichtigungen basieren auf SignalR (WebSocket-Verbindung). Änderungen werden in Echtzeit an alle Clients verteilt, die denselben Datensatz geöffnet haben.