4.13 UI-Elemente — Darstellungstypen für Formularfelder

4.13 UI-Elemente — Darstellungstypen für Formularfelder

Anleitung für Kundenadministratoren · UDM Admin Client

1

Überblick

Jedes Feld in einem UDM-Dialog besitzt einen Darstellungstyp (auch „UI-Element-Typ“ genannt), der festlegt, wie das Feld dem Anwender präsentiert wird und wie er damit interagiert. Die Auswahl des richtigen Darstellungstyps bestimmt, ob ein Feld als einfaches Textfeld, als Dropdown-Auswahl, als Kalender, als Checkbox oder in einer anderen Form erscheint.

Als Kundenadministrator können Sie den Darstellungstyp für jedes Feld in den Dialogelement-Einstellungen festlegen. Außerdem kann ein Ansichtselement (z. B. eine Tabellenspalte) den Darstellungstyp für eine bestimmte Ansicht übersteuern, ohne die Konfiguration im Dialog selbst zu verändern.

Automatische Vorbelegung Beim Anlegen eines neuen Felds wird der Darstellungstyp anhand des Datentyps automatisch vorbelegt: Textfelder erhalten Entry, Datumsfelder DateEdit, boolesche Felder Checkbox. Sie können den Typ jederzeit manuell ändern.
2

Vollständige Referenz aller Darstellungstypen

Die folgende Tabelle listet alle verfügbaren Darstellungstypen auf. Sie sind in Kategorien gegliedert: Eingabe, Auswahl, Listen, visuelle Darstellung, Inhalt/Einbettung und Layout-Container.

Eingabefelder

Darstellungstyp Interner Name Beschreibung
Eingabefeld Entry Einzeiliges Textfeld für kurze Eingaben (Text, Zahlen, IDs). Standard für die meisten Datentypen.
Mehrzeiliger Text Memo Mehrzeiliges Textfeld für längere Beschreibungen, Notizen oder Kommentare.
Zahleneingabe SpinEdit Numerisches Feld mit Erhöhen-/Verringern-Buttons. Min- und Max-Wert konfigurierbar.
Kontrollkästchen Checkbox Ja/Nein-Schalter für boolesche Felder. In Tabellen als ausgefülltes oder leeres Kästchen.
Datumseingabe DateEdit Kalender-Auswahl für Datumswerte. Öffnet einen Kalender-Picker bei Klick.
Zeiteingabe TimeEdit Eingabefeld für Uhrzeiten im Format HH:mm.
Kalender Calendar Vollständige Kalenderansicht zur Datumsauswahl — zeigt einen Monatskalender.

Auswahlelemente

Darstellungstyp Interner Name Beschreibung
Auswahlliste Combobox Dropdown-Liste zur Auswahl eines Werts aus einer Entität oder festen Werteliste.
Listbox Listbox Sichtbare Auswahlliste (ohne Dropdown). Alle Einträge sind direkt sichtbar.
Optionsgruppe RadioGroup Auswahl genau eines Werts aus einer kleinen Gruppe (2–5 Optionen).
Referenzauswahl Relation Auswahl eines Datensatzes aus einer anderen Tabelle mit Such-/Detailansicht. Für Stammdatenverknüpfungen.

Listen und Zuordnungen

Darstellungstyp Interner Name Beschreibung
Zuordnungsliste AssignmentList m:n-Zuordnung mit drei Modi: Tags, Checkliste oder Transfer-Liste.
Kindliste ChildList Eingebettete 1:n-Liste mit Inline-Bearbeitung direkt im Dialog.
Zugeordnete Daten DataRelation Schreibgeschützte Anzeige zugeordneter Datensätze aus einer anderen Entität.

Visuelle Darstellungen

Darstellungstyp Interner Name Beschreibung
KPI-Indikator KpiIndicator Farbliche Bewertung eines Werts als Ampel, Fortschrittsbalken, Badge, Sterne oder Trend-Pfeil.
Dauer-Badge TimeBadge Zeigt ein Datumsfeld als verstrichene Zeitspanne an (z. B. „3h“, „5T“) mit farblicher Abstufung.
Integrierter Style IntegratedStyle Wendet eine vordefinierte visuelle Formatierung auf den Feldwert an.

Inhalt und Einbettung

Darstellungstyp Interner Name Beschreibung
Bildarstellung ImageView Zeigt ein Bild (Binärdaten) direkt an. In der Tabelle als Vorschaubild.
Unterschrift Signature Erfassungsfeld für handschriftliche oder digitale Unterschriften im Browser.
Eingebettetes Dokument DocumentInline Zeigt formatierte Inhalte (RichText, HTML) direkt im Dialog an.
Browser-Iframe BrowserIframe Bettet eine externe Webseite oder ein Dokument in den Dialog ein.
Beschriftung Label Leeres Platzhalter-Element für besondere Darstellungen oder Abstandshalter.
Info-Element InfoElement Statischer Hinweis- oder Hilfetext als hervorgehobener Bereich.
Hilfetext Helptext Erklärender Text für den Anwender, z. B. Hinweise zum Ausfüllen.
Button Button Schaltfläche zum Auslösen einer Aktion oder eines Unterdialogs.

Strukturelemente (Unterdialog & Ansicht)

Darstellungstyp Interner Name Beschreibung
Ansichtselement ViewElement Eingebettete Darstellung eines Ansichtselements (Tabelle, Chart etc.) im Dialog.
Unterdialog Subdialog Eingebetteter Dialog innerhalb des aktuellen Dialogs.

Layout-Container

Darstellungstyp Interner Name Beschreibung
Gruppierung GroupContainer Fasst Felder visuell in einem Rahmen zusammen (z. B. „Adressdaten“).
Tab-Container TabbedGroupContainer Organisiert Felder in Reitern (Tabs).
Tab-Seite TabbedGroupContainerTab Einzelne Seite innerhalb eines Tab-Containers.
Scroll-Container ScrollContainer Container mit festlegbarer Höhe — Inhalt wird vertikal scrollbar.
Dashboard-Container DashboardContainer Frei anordbare Dashboard-Panels für Übersichtsseiten.

Sonderwert

Darstellungstyp Interner Name Beschreibung
Kein Typ None Kein Darstellungstyp zugewiesen. Das Feld wird nicht im Dialog angezeigt.
UserClient → Beispiel-Dialog mit verschiedenen Feldtypen
Stammdaten
Firma (Textbox)
Acme GmbH
Branche (Combobox)
Maschinenbau
Aktiv (Checkbox)
aktiv
Newsletter (Checkbox)
aus
Status (RadioGroup)
Kunde
Finanzen
Umsatz (Number)
1.842.000,00 €
Vertragsbeginn (Date)
04.05.2026
USt-ID (Textbox)
DE12345 (ungültig)
3

Darstellungstyp für ein Feld festlegen

So ändern Sie den Darstellungstyp eines Felds im UDM Admin Client:

  1. Dialog im Admin Client öffnen Navigieren Sie zum gewünschten Dialog in der Verwaltung. Öffnen Sie die Dialog-Konfiguration über das Stift-Symbol oder per Doppelklick.
  2. Feld auswählen Klicken Sie im Dialog-Designer auf das Feld, dessen Darstellungstyp Sie ändern möchten. Die Eigenschaften des Felds werden im rechten Bereich angezeigt.
  3. Darstellungstyp ändern Im Eigenschaftsbereich finden Sie das Feld „Art“. Wählen Sie aus der Dropdown-Liste den gewünschten Darstellungstyp aus (z. B. Combobox, Memo, DateEdit).
  4. Typ-spezifische Einstellungen konfigurieren Je nach gewähltem Typ erscheinen zusätzliche Einstellungen. Beispiele: Bei Combobox müssen Ziel-Entität und Anzeigefeld konfiguriert werden. Bei Memo kann eine maximale Höhe festgelegt werden.
  5. Speichern Speichern Sie die Dialog-Konfiguration. Die Änderung ist sofort für alle Anwender wirksam.
Übersteuern im Ansichtselement Möchten Sie den Darstellungstyp nur für eine bestimmte Ansicht (z. B. Tabellenspalte) ändern, ohne den Dialog zu beeinflussen? Öffnen Sie stattdessen die Konfiguration des Ansichtselements und setzen Sie dort den gewünschten Typ. Das Feld im Dialog bleibt unverändert.
4

Praxisbeispiele

Szenario 1
Status-Feld als farbige Ampel darstellen

Ein Feld „Erfuellungsgrad“ (Ganzzahl 0–100) soll in der Tabelle nicht als Zahl, sondern als farbige Ampel erscheinen. Setzen Sie den Darstellungstyp im Ansichtselement auf KpiIndicator und konfigurieren Sie Schwellwerte: < 30 = Rot, 30–70 = Gelb, > 70 = Grün. Im Erfassungsdialog bleibt das Feld als SpinEdit bestehen.

Szenario 2
Datumsfeld als Dauer-Badge in der Tabelle

Das Feld „Letzte Änderung“ soll in der Tabellenübersicht anzeigen, wie lange der letzte Eintrag zurückliegt (z. B. „3h“, „5T“). Setzen Sie den Darstellungstyp im Ansichtselement auf TimeBadge. Im Dialog bleibt das Feld als DateEdit bearbeitbar.

Szenario 3
Schlagworte als Tags zuordnen

Ein Datensatz soll mehreren Schlagworten zugeordnet werden können (m:n-Beziehung). Erstellen Sie ein Feld vom Typ AssignmentList und wählen Sie den Modus „Tags“. Der Anwender kann dann per Eingabe Vorschläge suchen und Schlagworte als Chips hinzufügen oder entfernen.

Szenario 4
Auftragspositionen als eingebettete Liste

Im Dialog „Auftrag“ sollen alle Positionen direkt bearbeitbar sein. Erstellen Sie ein Feld vom Typ ChildList und konfigurieren Sie die Kind-Entität, sichtbare Spalten sowie Inline-Bearbeitung. Der Anwender kann Positionen direkt im Auftrags-Dialog anlegen, bearbeiten und löschen.

Szenario 5
Priorität als Radio-Buttons statt Dropdown

Ein Feld „Priorität“ mit drei Optionen („Niedrig“, „Mittel“, „Hoch“) soll nicht als Dropdown, sondern als sofort sichtbare Optionsgruppe dargestellt werden. Ändern Sie den Darstellungstyp von Combobox auf RadioGroup.

5

Tipps und Warnungen

Combobox vs. Relation Verwenden Sie Combobox für überschaubare Listen (bis ca. 200 Einträge). Für große Datenmengen (z. B. tausende Kunden) ist Relation besser geeignet, da eine Suchfunktion mit serverseitigem Paging angeboten wird.
RadioGroup nur für wenige Optionen Die Optionsgruppe eignet sich für 2–5 Optionen. Bei mehr Einträgen wird die Darstellung unübersichtlich — verwenden Sie dann eine Combobox.
Ansichtselement-Übersteuerung nutzen Sie können denselben Feldwert im Dialog und in der Tabelle unterschiedlich darstellen. Typisch: Im Dialog ein DateEdit zur Bearbeitung, in der Tabelle ein TimeBadge für die schnelle Übersicht.
Darstellungstyp und Datentyp müssen zusammenpassen Nicht jeder Darstellungstyp funktioniert mit jedem Datentyp. Beispiel: Checkbox erwartet einen booleschen Wert, DateEdit ein Datumsfeld, TimeBadge ein DateTime-Feld. Bei falscher Zuordnung kann das Feld nicht korrekt dargestellt werden.
Container-Typen sind keine Datenfelder Layout-Container (GroupContainer, TabbedGroupContainer, ScrollContainer, DashboardContainer) dienen ausschließlich der visuellen Strukturierung. Sie können keinem Datenfeld zugewiesen werden und speichern keine Werte.
Combobox erfordert zusätzliche Konfiguration Wenn Sie den Darstellungstyp eines Felds auf Combobox ändern, müssen Sie anschließend die Ziel-Entität, das Anzeige-Feld und das Wert-Feld konfigurieren. Ohne diese Einstellungen bleibt die Dropdown-Liste leer.
6

Häufige Fragen (FAQ)

Kann ich den Darstellungstyp nur für eine bestimmte Ansicht ändern?

Ja. Im Ansichtselement (z. B. einer Tabellenspalte) können Sie den UI-Element-Typ übersteuern. Das Feld im Dialog bleibt unverändert. So kann dasselbe Feld im Dialog als DateEdit und in der Tabelle als TimeBadge dargestellt werden.

Was ist der Unterschied zwischen Combobox und Relation?

Eine Combobox zeigt alle Einträge direkt in einem Dropdown an. Eine Relation öffnet eine separate Such-/Auswahl-Ansicht mit Detailinformationen und serverseitigem Paging. Für große Datenmengen oder komplexe Stammdaten ist Relation besser geeignet.

Was ist der Unterschied zwischen Combobox und Listbox?

Die Combobox ist ein Dropdown, das sich bei Klick öffnet. Die Listbox zeigt alle Einträge permanent sichtbar als scrollbare Liste an, ohne dass der Anwender klicken muss. Verwenden Sie Listbox, wenn alle Optionen sofort sichtbar sein sollen.

Wann nutze ich KpiIndicator, wann TimeBadge?

Der KPI-Indikator bewertet einen beliebigen Wert (Zahl oder Text) anhand frei konfigurierbarer Schwellwerte mit farblicher Darstellung. Der Dauer-Badge ist speziell für DateTime-Felder und berechnet automatisch die verstrichene Zeit mit einer festen Farbskala.

Was passiert, wenn ich einen unpassenden Typ wähle?

Das Feld wird möglicherweise nicht korrekt dargestellt oder der Anwender kann keine Eingabe vornehmen. Beispiel: Ein Textfeld mit Typ Checkbox zeigt keinen sinnvollen Wert an. Stellen Sie sicher, dass Datentyp und Darstellungstyp zueinander passen.

Kann ich mehrere Darstellungstypen für ein Feld kombinieren?

Nein. Ein Feld hat genau einen Darstellungstyp. Für zusätzliche visuelle Anreicherungen (Prefix, Suffix, Formatierung) nutzen Sie die Spaltenkonfiguration im Ansichtselement.

Was bedeutet der Typ „None“?

Ein Feld mit Typ None wird nicht im Dialog angezeigt. Dieser Wert wird verwendet, wenn ein Feld zwar in der Datenstruktur existiert, aber nicht als UI-Element dargestellt werden soll.

Wie lege ich einen Tab-Container an?

Erstellen Sie zunächst ein Element vom Typ TabbedGroupContainer. Innerhalb dieses Containers erstellen Sie für jeden Reiter ein Element vom Typ TabbedGroupContainerTab. Die eigentlichen Felder werden dann innerhalb der einzelnen Tab-Seiten platziert.