Kapitel 5: Tabs und dynamische Blocks

Willkommen zu Kapitel 5! Dieses Kapitel hat es in sich: Wir erweitern die Aufgabenverwaltungsseite um zusätzliche Funktionen und unterstützen verschiedene Ansichten. Sicher haben Sie schon darauf gewartet! Keine Sorge, wir machen das wie immer Schritt für Schritt – locker und souverän.

5.1 Tab-Container, der verschiedene Blocks aufnimmt

Wir haben die Aufgabenverwaltungsseite bereits erstellt. Damit das System noch übersichtlicher wird, sollen Aufgaben innerhalb der Seite zwischen verschiedenen Darstellungen wechseln können – etwa Tabelle, Kanban, Kalender oder sogar Gantt-Diagramm. Mit den Tabs von NocoBase können wir auf derselben Seite zwischen verschiedenen Block-Arrangements wechseln. Wir gehen das ruhig an.

  • Tabs erstellen Zuerst legen wir die Tabs an.
  1. Neuen Sub-Tab anlegen:

    • Öffnen Sie Ihre Aufgabenverwaltungsseite und legen Sie einen Sub-Tab an. Den ersten Tab nennen wir „Tabellenansicht“. In dieser Ansicht zeigen wir den bereits konfigurierten Tabellen-Block der Aufgaben.
  2. Einen weiteren Tab anlegen:

    • Erstellen Sie nun einen weiteren Tab namens „Kanban-Ansicht“. Hier legen wir den Kanban-Block für die Aufgaben an. Tabs anlegen

Bereit? Auf zu den verschiedenen Blocks!

Blocks kurz erklärt: Ein Block ist der Träger von Daten und Inhalten. Er stellt Daten passend auf der Website dar und kann auf Seiten (Page), in Dialogen (Modal) oder in Drawern (Drawer) platziert werden. Mehrere Blocks lassen sich frei per Drag-and-Drop arrangieren; durch fortlaufende Operationen in Blocks können verschiedenste Konfigurationen und Darstellungen entstehen. Mit Blocks lassen sich Seiten und Funktionen unseres Systems wesentlich schneller umsetzen und verwalten. Außerdem können Sie Blocks als Vorlagen speichern und so kopieren oder referenzieren – das spart enorm viel Zeit beim Anlegen neuer Blocks.

5.2 Kanban-Block: Aufgabenstatus auf einen Blick

Das Kanban ist eine sehr wichtige Funktion in einem Aufgabenverwaltungssystem: Per Drag-and-Drop verwalten Sie den Status von Aufgaben anschaulich. So können Sie Aufgaben nach Status gruppieren und sofort sehen, in welcher Phase sich eine Aufgabe befindet.

5.2.1 Kanban-Block anlegen

  1. Neuen Kanban-Block erstellen:
  • Klicken Sie im Tab Kanban-Ansicht auf „Block erstellen“ und wählen Sie die Aufgabentabelle aus. Es erscheint eine Auswahl, nach welchem Feld die Aufgaben gruppiert werden sollen.
  1. Gruppierungsfeld auswählen:
  1. Sortierfeld hinzufügen:
  • Die Karten im Kanban lassen sich über ein Sortierfeld in eine bestimmte Reihenfolge bringen. Dafür legen wir ein neues Sortierfeld an. Klicken Sie auf „Feld hinzufügen“ und legen Sie das Feld Statussortierung (status_sort) an.
  • Dieses Feld bestimmt beim Drag-and-Drop die vertikale Reihenfolge der Karten – wie eine Koordinate: Links und rechts unterscheiden sich die Status (Spalten), oben und unten der Sortierwert. Beim Verschieben der Karten können Sie später im Formular sehen, wie sich der Sortierwert ändert. Kanban-Block anlegen

5.2.2 Felder und Actions auswählen

  • Vergessen Sie nicht, im Kanban-Block die anzuzeigenden Felder auszuwählen, etwa Aufgabenname und Status, damit jede Karte alle wichtigen Informationen enthält.

Kanban-Felder anzeigen

5.3 Vorlagen verwenden: Kopieren oder Referenzieren

Nach dem Anlegen des Kanban-Blocks brauchen wir ein Hinzufügen-Formular. NocoBase bietet hier eine sehr praktische Funktion – Sie können das vorhandene Formular kopieren oder referenzieren und müssen es nicht jedes Mal neu konfigurieren.

5.3.1 Formular als Vorlage speichern

  • Bewegen Sie im vorherigen Hinzufügen-Formular den Mauszeiger auf die Formularkonfiguration und klicken Sie auf „Als Vorlage speichern“. Geben Sie der Vorlage einen Namen, etwa „Aufgabentabelle_Formular Hinzufügen“.

Formular als Vorlage speichern

5.3.2 Vorlage kopieren oder referenzieren

Wenn Sie in der Kanban-Ansicht ein neues Formular anlegen, sehen Sie zwei Optionen: „Vorlage kopieren“ und „Vorlage referenzieren“. Wo liegt der Unterschied?

  • Vorlage kopieren: Erstellt eine eigenständige Kopie des Formulars. Änderungen wirken sich nicht auf das Original aus.
  • Vorlage referenzieren: „Leiht“ das ursprüngliche Formular. Änderungen werden in alle Stellen synchronisiert, die diese Vorlage referenzieren. Wenn Sie z. B. die Feldreihenfolge ändern, ändern sich alle referenzierenden Formulare entsprechend.

Vorlage kopieren und referenzieren

Wählen Sie je nach Bedarf zwischen Kopieren und Referenzieren. Im Allgemeinen ist Vorlage referenzieren komfortabler: Sie ändern nur an einer Stelle und alle abhängigen Formulare werden automatisch aktualisiert – sehr zeitsparend.

5.4 Kalender-Block: Aufgabenfortschritt auf einen Blick

Als Nächstes erstellen wir einen Kalender-Block, um die Zeitplanung von Aufgaben besser zu organisieren.

5.4.1 Kalenderansicht anlegen

5.4.1.1 Datumsfelder anlegen:

Die Kalenderansicht muss die Start- und Enddaten der Aufgaben kennen. Daher legen wir in der Aufgabentabelle zwei neue Felder an:

  • Startdatum (start_date): Markiert den Beginn der Aufgabe.
  • Enddatum (end_date): Markiert das Ende der Aufgabe.

Datumsfelder anlegen

5.4.2 Kalender-Block anlegen:

Wechseln Sie zurück in die Kalenderansicht und legen Sie einen Kalender-Block an. Wählen Sie die Aufgabentabelle und nutzen Sie die soeben erstellten Felder Startdatum und Enddatum. Aufgaben werden dann als Zeitspanne im Kalender dargestellt – ein anschaulicher Überblick.

Kalender-Ansicht aufbauen

5.4.3 Kalender ausprobieren:

Im Kalender können Sie Aufgaben frei verschieben oder anklicken, um Details zu bearbeiten (denken Sie an das Kopieren oder Referenzieren der Vorlage).

Kalender bedienen

5.5 Gantt-Block: das Werkzeug für die Aufgabenplanung

Der letzte Block ist der Gantt-Block – ein bekanntes Werkzeug aus dem Projektmanagement, mit dem Sie Fortschritt und Abhängigkeiten von Aufgaben verfolgen können.

5.5.1 Tab „Gantt-Ansicht“ anlegen

5.5.2 Feld „Fertigstellungsgrad“ anlegen:

Damit das Gantt-Diagramm den Aufgabenfortschritt gut darstellen kann, legen wir ein neues Feld Fertigstellungsgrad (complete_percent) an. Dieses Feld speichert den Fortschritt der Aufgabe, Standardwert 0 %.

Feld „Fertigstellungsgrad“ anlegen

5.5.3 Gantt-Block erstellen:

In der Gantt-Ansicht legen Sie einen Gantt-Block an, wählen die Aufgabentabelle und konfigurieren die zugehörigen Felder Startdatum, Enddatum und Fertigstellungsgrad.

Gantt-Ansicht aufbauen

5.5.4 Drag-and-Drop im Gantt-Block ausprobieren:

Im Gantt-Block können Sie Aufgaben durch Verschieben in Fortschritt und Zeit anpassen – Startdatum, Enddatum und Fertigstellungsgrad werden entsprechend aktualisiert.

Gantt-Drag-and-Drop

Zusammenfassung

Großartig! Sie können nun in NocoBase verschiedene Blocks zur Darstellung von Aufgabendaten verwenden, darunter Kanban-Block, Kalender-Block und Gantt-Block. Diese Blocks machen die Aufgabenverwaltung anschaulich und sehr flexibel.

Aber das ist erst der Anfang! Stellen Sie sich ein Team vor, in dem Mitglieder unterschiedliche Aufgaben haben. Wie sorgen Sie dafür, dass alle reibungslos zusammenarbeiten? Wie stellen Sie sicher, dass Daten geschützt sind und jeder nur das sieht und bearbeitet, was ihn betrifft?

Bereit? Dann auf zum nächsten Kapitel: Kapitel 6: Mit den richtigen Mitstreitern – Zusammenarbeit ohne Reibungsverluste, flexibel im Griff.

Wir zeigen Ihnen, wie Sie mit einfachen Schritten die Zusammenarbeit Ihres Teams auf das nächste Level heben!


Erkunden Sie weiter und lassen Sie Ihrer Kreativität freien Lauf! Bei Problemen können Sie jederzeit in der offiziellen NocoBase-Dokumentation nachlesen oder in der NocoBase-Community diskutieren.