UDM — 4.10 Listenansicht — Daten als kompakte Liste darstellen

1

Überblick

Die Listenansicht zeigt Datensätze als vertikale Liste mit konfigurierbaren Feldern pro Zeile. Sie ist kompakter als ein klassisches Grid und eignet sich besonders für mobile Ansichten oder schmale Seitenleisten. Jede Zeile der Liste kann über ein flexibles Grid-Layout mit mehreren Zellen gestaltet werden.

Kompakte Darstellung vieler Datensätze auf engem Raum
Flexibles Grid-Layout mit konfigurierbaren Zeilen und Spalten pro Listeneintrag
Optionale Gruppierung nach einem Feld mit eigenem Header-Format
Individuelle CSS-Styles und Format-Strings pro Zelle
Sortierung über konfigurierbare Daten-Sortierregeln

Unser Beispiel für diese Anleitung

Aktuelle Aufgaben als Kompaktliste

Sie möchten eine Übersicht offener Aufgaben als kompakte Liste in einer Seitenleiste anzeigen. Jeder Eintrag zeigt den Titel in der ersten Zeile, darunter das Fälligkeitsdatum links und einen Status-Badge rechts — gestylt über individuelle CSS-Klassen.

2

Schritt-für-Schritt-Anleitung

Ansichtselement anlegen (Typ „Liste“)
Navigieren Sie im Admin-Client zu Ansichtselemente und legen Sie ein neues Element vom Typ „Liste“ an. Vergeben Sie einen sprechenden Namen, z. B. „Aufgaben Kompaktliste“.
Datenquelle zuweisen
Wechseln Sie in die Registerkarte „Daten“ und weisen Sie dem Ansichtselement eine Datenquelle zu. Die Datenquelle bestimmt, welche Datensätze in der Liste angezeigt werden. Stellen Sie sicher, dass die benötigten Felder (z. B. Titel, Fälligkeitsdatum, Status) in der Datenquelle verfügbar sind.
Anzeigefelder konfigurieren (Grid-Layout)
Wechseln Sie zur Unterseite „Einstellungen der Listenansicht“. Hier definieren Sie das Layout jedes Listeneintrags über ein Grid:
- Legen Sie die Anzahl der Zeilen und Spalten fest (z. B. 2 Zeilen, 2 Spalten)
- Weisen Sie jeder Zelle ein oder mehrere Felder zu (kommagetrennt)
- Definieren Sie optional einen Format-String für die Textdarstellung
- Vergeben Sie CSS-Styles pro Zelle für individuelle Formatierung
- Nutzen Sie RowSpan und ColSpan, um Zellen zu verbinden
Im visuellen Card Builder können Sie Zeilen und Spalten hinzufügen oder entfernen. Klicken Sie auf eine Zelle, um deren Felder und Stil zu bearbeiten.
Sortierung und Filterung festlegen
Im Bereich „Sortierung“ können Sie eine oder mehrere Sortierregeln definieren. Jede Regel besteht aus einem Feldnamen und der Sortierrichtung (aufsteigend oder absteigend). Die Regeln werden in der konfigurierten Reihenfolge angewendet.

Optional können Sie über das Feld „Gruppenfeld“ eine Gruppierung aktivieren. Die Liste zeigt dann Gruppen-Überschriften an, z. B. nach Status oder Kategorie, mit einem konfigurierbaren Format-String.

AdminClient → Einstellungen der Listenansicht (Card Builder & Sortierung)

Grunddaten

Titel

Aufgaben Kompaktliste

Typ

Liste

Datenquelle

DS_Aufgaben

Card Builder

Grid-Zeilen

2

Grid-Spalten

2

Zelle (1,1–1,2)

Titel · ColSpan 2

Zelle (2,1)

Fälligkeitsdatum

Zelle (2,2)

Status

Sortierung & Gruppierung

Sortierung

Fälligkeitsdatum aufsteigend

Gruppenfeld

Status

Feld-Liste aktiv

aktiv

3

Einstellungen der Listenansicht im Überblick

Einstellung	Beschreibung
Grid-Zeilen	Anzahl der Zeilen im Grid-Layout pro Listeneintrag (Standard: 1). Bestimmt die vertikale Struktur jeder Karte.
Grid-Spalten	Anzahl der Spalten im Grid-Layout pro Listeneintrag (Standard: 1). Bestimmt die horizontale Aufteilung jeder Karte.
Felder (pro Zelle)	Kommagetrennte Liste der Feldnamen, die in dieser Zelle angezeigt werden (z. B. `Titel,Beschreibung`).
Text-Format	Format-String für die Textdarstellung der Zelle. Ermöglicht individuelle Formatierung der Feldwerte.
CSS-Style	Inline-CSS-Stil für die Zelle (z. B. `font-weight: bold; color: #333`). Ermöglicht visuelle Hervorhebungen.
RowSpan / ColSpan	Verbindet Zellen über mehrere Zeilen oder Spalten. Nützlich für Titel-Bereiche, die die volle Breite nutzen sollen.
Gruppenfeld	Feldname, nach dem die Liste gruppiert wird. Jede Gruppe erhält eine eigene Überschrift.
Gruppen-Format	Format-String für die Gruppen-Überschriften (z. B. zur Datumsformatierung oder Textanpassung).
Sortierung	Liste von Sortierregeln (Feldname + aufsteigend/absteigend). Mehrere Regeln werden in Reihenfolge angewendet.

4

Erweiterte Optionen: Templates

Für fortgeschrittene Anpassungen stehen zusätzliche Template-Optionen zur Verfügung:

Option	Beschreibung
Header-Template	Eigenes HTML-Template für den Kopfbereich jedes Listeneintrags. Muss über die Option „Header-Template aktiv“ aktiviert werden.
Body-Template	Eigenes HTML-Template für den Hauptbereich jedes Listeneintrags. Muss über die Option „Body-Template aktiv“ aktiviert werden.
CSS-Template	Eigenes CSS für die gesamte Listenansicht. Muss über die Option „CSS-Template aktiv“ aktiviert werden.
Feld-Liste aktiv	Aktiviert den erweiterten Grid-Modus mit der Feld-Liste (Card Builder). Wenn deaktiviert, werden nur die einfachen Titel-/Body-Felder verwendet.

Tipp: Card Builder nutzen Der visuelle Card Builder erleichtert die Grid-Konfiguration erheblich. Klicken Sie auf eine Zelle im Grid, um deren Felder, Format und CSS-Style direkt zu bearbeiten. Über die Schaltflächen „Zeile/Spalte hinzufügen“ und „Zeile/Spalte entfernen“ passen Sie die Struktur an. Die Vorschau wird über die Aktion „Vorschau aktualisieren“ in der Toolbar aktualisiert.

Einfacher Modus vs. Feld-Liste Im einfachen Modus (ohne aktivierte Feld-Liste) verwenden Sie nur die Felder TitleFields und BodyFields. Dieser Modus eignet sich für schlichte Listen mit einer Titelzeile und optionalem Textinhalt. Für komplexere Layouts mit mehreren Zeilen, Spalten und individuellem Styling aktivieren Sie die Feld-Liste und nutzen den Card Builder.

Achtung: RowSpan und ColSpan Wenn Sie Zellen über RowSpan oder ColSpan verbinden, werden die überdeckten Zellen automatisch entfernt. Reduzieren Sie den Span-Wert später wieder, werden die fehlenden Zellen automatisch neu erstellt. Achten Sie darauf, dass Span-Werte nicht über die Grid-Grenzen hinausgehen.

5

Häufige Fragen

Frage	Antwort
Wie viele Zeilen und Spalten kann das Grid haben?	Das Grid muss mindestens 1×1 sein. Es gibt keine feste Obergrenze, aber für übersichtliche Darstellungen empfehlen sich maximal 3–4 Zeilen und 2–3 Spalten pro Listeneintrag.
Kann ich mehrere Felder in einer Zelle anzeigen?	Ja. Geben Sie die Feldnamen kommagetrennt ein (z. B. `Vorname,Nachname`). Der optionale Format-String bestimmt, wie die Werte zusammengesetzt werden.
Wie funktioniert die Gruppierung?	Tragen Sie im Feld „Gruppenfeld“ den Feldnamen ein, nach dem gruppiert werden soll. Die Liste zeigt dann automatisch Gruppen-Überschriften an. Über den Gruppen-Format-String können Sie die Darstellung der Überschrift anpassen.
Was ist der Unterschied zu einer Grid-/Tabellenansicht?	Die Listenansicht zeigt jeden Datensatz als eigenständige Karte mit frei gestaltbarem Layout. Eine Grid-Ansicht zeigt Daten in tabellarischer Spaltenstruktur. Die Liste eignet sich besser für kompakte, mobile Darstellungen.
Kann ich eigene HTML-Templates verwenden?	Ja. Aktivieren Sie die Optionen „Header-Template aktiv“ und/oder „Body-Template aktiv“ und hinterlegen Sie eigenes HTML. Zusätzlich können Sie über „CSS-Template aktiv“ eigenes CSS einbinden.
Wie aktualisiere ich die Vorschau?	Klicken Sie in der Toolbar auf die Aktion „Vorschau aktualisieren“. Die aktuellen Änderungen werden synchronisiert und die Vorschau neu gerendert — ohne dass Sie vorher speichern müssen.

UserClient → Aufgaben Kompaktliste (gruppiert nach Status, zwei-zeilige Einträge)

Offen 3
Angebot Acme überarbeiten fällig 06.05.2026		offen
Vertrag Beta AG prüfen fällig 08.05.2026		offen
Telefonat Gamma KG fällig 12.05.2026		offen
In Bearbeitung 1
Datenmigration Delta SE fällig 04.05.2026		in Arbeit
Erledigt 1
Onboarding Epsilon Ltd. erledigt 28.04.2026		erledigt