#Kapitel 3: Seiten aufbauen - vom leeren Blatt zum produktiven Tool

Im vorigen Kapitel haben wir das Skelett der Datentabellen gebaut, doch die Daten existieren bisher nur „im Backend" - die Anwender sehen nichts. In diesem Kapitel bringen wir die Daten auf die Bühne: Wir bauen einen Tabellenblock für die Tickets, konfigurieren Spalten, Sortierung, Filter und Pagination, sodass eine echte Ticketliste entsteht.

#3.1 Was ist ein Block?

In NocoBase ist ein Block ein „Baustein" auf der Seite. Sie möchten eine Tabelle? Ein Tabellenblock. Ein Formular? Ein Formularblock. Auf einer Seite kombinieren Sie beliebig viele Blöcke und ordnen sie per Drag-and-Drop.

Häufige Block-Typen:

Merken Sie sich: Block = Baustein. Damit bauen wir die Ticket-Verwaltung.

#3.2 Menü und Seiten anlegen

Zunächst legen wir einen Einstieg „Ticket-Verwaltung" an.

1. Klicken Sie oben rechts auf UI Editor, um in den Konfigurationsmodus zu wechseln (orangefarbene Rahmen erscheinen).
2. In der oberen Navigation „Menüeintrag hinzufügen" klicken, „Gruppe hinzufügen" wählen und „Ticket-Verwaltung" als Namen eingeben.

3. Der Menüeintrag erscheint sofort oben. Klicken Sie ihn an, um die Untermenüleiste links zu öffnen.
4. In der linken Menüleiste auf den orangefarbenen Button „Menüeintrag hinzufügen" klicken, „Modern page (v2)" wählen und zwei Unterseiten anlegen:
   • Ticketliste - alle Tickets
   • Ticket-Kategorien - Kategorienverwaltung

Hinweis: Beim Hinzufügen sehen Sie „Legacy page (v1)" und „Modern page (v2)". Dieses Tutorial nutzt durchgehend v2.

#3.3 Tabellenblock hinzufügen

Auf der Seite „Ticketliste" fügen wir nun einen Tabellenblock hinzu:

1. Auf der leeren Seite „Block erstellen" klicken.
2. Datenblock → Tabelle wählen.
3. In der angezeigten Liste „Tickets" auswählen (die in Kapitel 2 angelegte tickets-Tabelle).

Ein leerer Tabellenblock erscheint.

Damit der Block einfacher zu testen ist, fügen wir schnell einen „Hinzufügen"-Button hinzu, mit dem wir Testdaten erfassen:

1. Oben rechts in der Tabelle „Aktionen konfigurieren" klicken und „Hinzufügen" aktivieren.

2. Auf den neu erschienenen Button „Hinzufügen" klicken; im Popup Block erstellen → Formular (Hinzufügen) → Aktuelle Tabelle wählen.

3. Im Popup „Felder konfigurieren" klicken und Titel, Status, Priorität etc. aktivieren; „Aktionen konfigurieren" öffnen und den „Senden"-Button aktivieren.

4. Geben Sie ein paar Tickets ein und senden Sie ab - in der Tabelle erscheinen Daten.

Die ausführliche Formularkonfiguration (Linkage, Bearbeitungsformular, Detail-Popups etc.) folgt in Kapitel 4. Hier reicht es, Daten einzutippen.

#3.4 Anzeige-Spalten konfigurieren

Standardmäßig werden nicht alle Felder angezeigt. Wir wählen die Spalten manuell aus:

1. Oben rechts neben den Spaltenüberschriften auf „Felder" klicken.
2. Folgende Felder aktivieren:
   • Titel - Themenüberschrift
   • Status - Bearbeitungsfortschritt
   • Priorität - Dringlichkeit
   • Kategorie - Beziehungsfeld, zeigt den Kategorienamen
   • Antragsteller - wer das Ticket erstellt hat
   • Bearbeiter - wer es bearbeitet
3. Felder wie ID oder Erstellungsdatum nicht aktivieren, damit die Tabelle übersichtlich bleibt.

Tipp: Die Reihenfolge lässt sich per Drag-and-Drop anpassen. Stellen Sie wichtige Felder wie „Titel" und „Status" nach vorne.

#Problem: Beziehungsfelder zeigen die ID

Wenn Sie „Kategorie" aktivieren, sehen Sie die ID, nicht den Namen. Das liegt daran, dass Beziehungsfelder standardmäßig die ID als Titel-Feld nutzen. Es gibt zwei Lösungen:

Variante 1: Spaltenkonfiguration ändern (gilt nur lokal)

Klicken Sie auf die Konfiguration der Spalte „Kategorie", suchen Sie „Title field" und stellen Sie es von ID auf Name um. Wirkung nur in diesem Tabellenblock.

Variante 2: In der Datenquelle ändern (global, empfohlen)

Gehen Sie zu Einstellungen → Datenquelle → Datentabelle → Kategorien-Tabelle und stellen Sie das „Title field" auf Name. Damit zeigen alle Verwendungen der Kategorien-Tabelle den Namen - dauerhaft. Nach der Änderung müssen Sie das Feld in der Seite neu hinzufügen, damit es greift.

#3.5 Filter und Sortierung

Mit wachsenden Ticketzahlen brauchen wir gezielte Filter. NocoBase bietet mehrere Optionen, beginnend mit dem Filterformular-Block.

#Filterformular hinzufügen

1. Auf der Ticketliste-Seite „Block erstellen" klicken und Filterblock → Filterformular wählen.
2. v2-Seiten verlangen keine Tabellenwahl - das Formular wird direkt eingefügt.
3. Im Filterformular „Felder" klicken; es zeigt alle filterbaren Datenblöcke der Seite, z. B. Table: Tickets #c48b (UID dahinter unterscheidet mehrere Blöcke der gleichen Tabelle).

4. Mauszeiger auf den Blocknamen → die filterbaren Felder erscheinen. Klicken Sie auf Status, Priorität, Kategorie, um sie als Filter zu aktivieren.

5. Der Anwender gibt Filterbedingungen ein, die Tabelle reagiert in Echtzeit.

#Suche über mehrere Felder

Wie kombiniert man die Suche über mehrere Felder?

Klicken Sie oben rechts in einem Suchfeld auf die Konfiguration und wählen „Connect fields". Dort sehen Sie die anschlussfähigen Felder pro Block - standardmäßig nur „Titel".

Wir können weitere Felder ergänzen, z. B. Beschreibung, sodass die Suche beide Felder einbezieht.

Sogar Felder verknüpfter Tabellen sind möglich - klicken Sie auf „Kategorie" und aktivieren Sie auf der nächsten Ebene „Kategoriename"; die Suche prüft dann auch die Kategorienamen.

„Connect fields" sind sehr mächtig: Sie wirken über mehrere Blöcke und Felder. Wenn die Seite mehrere Datenblöcke enthält, probieren Sie es ruhig aus.

#Kein Auto-Filter gewünscht?

Soll der Filter erst per Klick auslösen? Klicken Sie unten rechts im Filterformular auf „Aktionen", aktivieren Sie „Filter" und „Reset". Anwender geben Bedingungen ein und klicken erst dann auf den Filter-Button.

#Alternative Filtermethode: Filter-Aktion in der Tabelle

Neben dem Filterformular bietet auch der Tabellenblock einen „Filter"-Button als Aktion. Über „Aktionen" oben in der Tabelle aktivieren Sie „Filter"; ein Filter-Button erscheint in der Tools-Leiste, beim Klicken öffnet sich ein Bedingungspanel.

Möchten Sie nicht jedes Mal die Felder einzeln auswählen, können Sie in der Konfiguration des Filter-Buttons Standardfelder vorbelegen.

Hinweis: Die Tabellen-Filter-Aktion unterstützt aktuell keine Mehrfeld-Suche. Für diese verwenden Sie den oben gezeigten Filterformular-Block mit „Connect fields".

#Standard-Sortierung

Neue Tickets sollen oben stehen:

1. Oben rechts im Tabellenblock auf Block-Einstellungen (drei Querstriche) klicken.
2. „Sortierregeln festlegen" aufrufen.
3. Sortierfeld: Erstellungsdatum, Reihenfolge: absteigend.

So stehen neue Tickets immer oben.

#3.6 Zeilen-Aktionen

Reine Listen reichen nicht - wir möchten Tickets ansehen und bearbeiten.

1. Über der Aktionsspalte auf das zweite „+" klicken.
2. Aktionen aktivieren: Anzeigen, Bearbeiten, Löschen.
3. Pro Zeile erscheinen die Buttons „Anzeigen", „Bearbeiten" und „Löschen".

Beim Klick auf „Anzeigen" öffnet sich ein Drawer; darin können wir später einen Detailblock platzieren. Klick auf „Löschen" entfernt den Datensatz.

#3.7 Layout anpassen

Aktuell stapeln sich Filterformular und Tabelle untereinander - nicht ideal. NocoBase erlaubt das Drag-and-Drop.

Im Konfigurationsmodus erscheint links oben am Block ein Verschiebe-Symbol; Cursor wird zum Kreuzpfeil, dann ziehen.

Filterformular oberhalb der Tabelle platzieren: Filterformular auf den oberen Rand der Tabelle ziehen, blaue Linie erscheint, dann loslassen.

Filterfelder in eine Zeile: Innerhalb des Filterformulars sind Felder ebenfalls untereinander. Ziehen Sie „Priorität" rechts neben „Status", bis eine vertikale Hilfslinie erscheint - die beiden Felder stehen dann nebeneinander.

Praktisch alle Elemente in NocoBase sind ziehbar - Buttons, Spalten, Menüs ... Probieren Sie es aus!

#3.8 Seite „Ticket-Kategorien" konfigurieren

Vergessen Sie nicht die Unterseite „Ticket-Kategorien" aus 3.2. Konfiguration läuft analog - Tabellenblock anlegen, Felder aktivieren, Aktionen einrichten. Ein Unterschied:

Erinnern Sie sich an die Tabelle „Ticket-Kategorien" aus Kapitel 2? Sie ist eine Baumtabelle. Damit der Tabellenblock die Hierarchie korrekt anzeigt, müssen Sie eine Option aktivieren:

1. Auf der Seite „Ticket-Kategorien" einen Tabellenblock mit Tabelle „Ticket-Kategorien" anlegen.
2. Block-Einstellungen öffnen, „Tree table" aktivieren.

Die Tabelle zeigt die Eltern-Kind-Beziehung dann eingerückt, statt alle Datensätze flach zu zeigen.

3. Felder wie Name, Beschreibung aktivieren, Aktionen konfigurieren (Hinzufügen, Bearbeiten, Löschen).
4. Layout: Stellen Sie „Name" als erste Spalte und „Aktionen" als zweite Spalte ein. Da die Tabelle wenige Felder hat, wirkt eine Zwei-Spalten-Anordnung übersichtlicher.

#Fazit

Glückwunsch! Das Ticket-System hat eine ansehnliche Verwaltungsoberfläche:

• klare Menüstruktur (Ticket-Verwaltung → Ticketliste / Ticket-Kategorien)
• ein Tabellenblock für Ticketdaten
• ein Filterformular mit schnellen Filtern für Status, Priorität, Kategorie
• Sortierregel nach Erstellungsdatum absteigend
• Aktionen pro Zeile zum Anzeigen und Bearbeiten
• ein Baum-Tabellenblock für Kategorien

Einfacher als gedacht? Alles ohne eine Zeile Code, nur per Drag-and-Drop und Konfiguration.

#Vorschau auf das nächste Kapitel

Nur „Ansehen" reicht nicht - Anwender müssen neue Tickets erfassen können. Im nächsten Kapitel bauen wir Formularblöcke, konfigurieren Linkage-Regeln und aktivieren Record-History für die Änderungsverfolgung.

#Verwandte Ressourcen

• Block-Übersicht - alle Block-Typen
• Tabellenblock - Detailkonfiguration
• Filterblöcke - Filterformulare