> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/kanban-component.md).

# Kanban-Komponente

Verfolge Arbeitsschritte in einem Kanban über verschiedene Phasen hinweg.

Nutze eine **Kanban-Komponente** auf einer Seite, wenn Datensätze klare Phasen durchlaufen. Sie eignet sich zum Beispiel für Aufgaben, Leads, Freigaben und Support-Tickets.

Bevor du die Komponente hinzufügst, stelle sicher, dass die Tabelle Folgendes enthält:

* ein Feld für Phase oder Status
* eindeutige Werte für jede Phase
* optionale Felder für Kartendetails, Farben oder Vorschaubilder

{% hint style="info" %}
Nutze ein klar definiertes Feld vom Typ **Einfachauswahl**, etwa **Status**, für die Spalten. So bleibt das Board leicht verständlich.
{% endhint %}

## Kanban-Komponente hinzufügen

{% stepper %}
{% step %}
**Tab Hinzufügen öffnen**

Öffne im **Einstellungsbereich** den Tab **Hinzufügen**.
{% endstep %}

{% step %}
**Kanban hinzufügen**

Ziehe die Komponente **Kanban** aus **Ansichten** an die gewünschte Stelle auf der Seite.
{% endstep %}

{% step %}
**Komponente benennen**

Die **Bezeichnung** und der **Interne Name** werden automatisch erstellt. Du kannst sie unter **Einstellungen** bei Bedarf ändern.
{% endstep %}

{% step %}
**Kanban mit Konstant konfigurieren**

Unter **Verhalten**:

* Lasse **Konstant** als Datenpunktoption ausgewählt.
* Wähle die Quell-**Tabelle**.
* Wähle in **Gruppieren nach Feld** das Feld vom Typ **Einfachauswahl** für die Spalten.
* Nutze bei Bedarf **Filtern**.
  {% endstep %}

{% step %}
**Ergebnis prüfen**

Prüfe die Spalten und Karten. Ziehe die Komponente, um sie zu verschieben. Nutze die Anfasser, um ihre Größe anzupassen.
{% endstep %}
{% endstepper %}

## Einstellungen der Kanban-Komponente

In **Einstellungen** legst du die grundlegenden Details fest:

* **Bezeichnung** zeigt den Titel der Komponente.
* **Interner Name** wird automatisch ausgefüllt. Ändere ihn nur bei Bedarf und mit Bedacht. Skripte verwenden den Internen Namen, nicht die Bezeichnung.

Unter **Verhalten** konfigurierst du das Kanban-Board:

* **Datenpunkt** richtet den Datenabruf ein. Nutze **Konstant** für die Konfiguration über Steuerelemente. Nutze **Logik** für ein Ninox Skript.\
  \
  Wenn **Datenpunkt** auf **Konstant** gesetzt ist:
* **Tabelle** bestimmt die Quelltabelle.
* **Gruppieren nach Feld** wählt das Feld vom Typ **Einfachauswahl** für die Spalten.
* **Filtern** begrenzt Datensätze mit einer oder mehreren Bedingungen.
* Klicke auf **Karten konfigurieren**, um Folgendes festzulegen:
  * **Titel**, um ein Textfeld für den Kartentitel zuzuweisen
  * **Bild**, um den Inhalt eines Dateifelds als Vorschaubild auf der Karte anzuzeigen
  * **Farbe**, um Kategorien anhand der Kartenfarbe schnell zu unterscheiden. Du kannst Farb- oder Auswahlfelder wählen.
  * Wähle zusätzliche Felder, deren Inhalt auf der Karte angezeigt werden soll.
* **Kartenradius** wird durch eine Zahl festgelegt.
* **Kartenrahmen** erwartet Linienbreite in `px`, Linientyp und Farbe im HEX-Code. Trenne die Werte durch Leerzeichen.\
  Beispiel: `4px solid #cb2010`
* **Karteninnenabstand** wird durch eine Zahl festgelegt.
* **Kartenschrift** wird durch Text wie `bold italic` festgelegt.
* **Bildposition** wird durch Text wie `center`, `left` oder `right` festgelegt.
* **Bildgröße** wird durch Text wie `cover` festgelegt.
* **Leere Spalte anzeigen** zeigt Spalten ohne Datensätze.
* **Suchfeld anzeigen** zeigt ein Suchfeld über dem Board.\
  \
  Wenn **Datenpunkt** auf **Logik** gesetzt ist:
* Füge in **Logik** das Ninox Skript für den Datenabruf hinzu.\
  In diesem Fall erwartet Ninox die Werte und optionalen Layout-Einstellungen als Schlüssel-Wert-Paare im JSON-Stil in geschweiften Klammern `{...}`.\
  \
  Erforderliche `data`-Bezeichner:
  * `column` ordnet die Karte einer Spalte zu.
  * `record` enthält den zugrunde liegenden Datensatz, damit sich die Karte öffnen lässt.
  * `tableId` wird mit `tableId(...)` erstellt.
  * Optional: `title`, `subtitle`, `color`, `image`, `badge`, `sort`.\
    Optionale `settings`-Bezeichner:
  * `columns` legt die Reihenfolge der Spalten fest. Einträge können Text oder `{label, value}` sein.
  * `value` ist erforderlich, um Karten in dynamischen Auswahl- oder Tabellen-Gruppierungsspalten zu verschieben.
  * `design` unterstützt `radius`, `border`, `padding`, `font` und `imagePosition`.
  * `allowDrag` erlaubt das Verschieben einer Karte in eine andere Kanban-Spalte.
  * `columnField` erhält den neuen Spaltenwert, wenn du eine Karte verschiebst.\
    \
    Ein Beispiel dafür findest du im nächsten Absatz.

Unter **Sichtbarkeit** wählst du, wie die Komponente auf der Seite angezeigt wird:

* **Sichtbar** zeigt die Komponente auf der Seite.
* **Versteckt** blendet die Komponente auf der Seite aus.
* **Bedingt** definiert eine **Sichtbarkeitsbedingung**, die steuert, wann die Komponente angezeigt oder ausgeblendet wird.\
  Nutze **Bedingt**, wenn das Kanban nur in bestimmten Fällen erscheinen soll.\
  Erstelle die Bedingung anhand von **Feldern** und **Tabellen**.\
  Dies wirkt sich nur auf die Anzeige auf der Seite aus. Datensätze und Berechtigungen bleiben unverändert.

{% hint style="info" %}
Um eine Komponente zu entfernen, wähle sie aus und klicke im blauen Menü darüber auf <i class="fa-trash-can">:trash-can:</i> **Komponente löschen**.
{% endhint %}

#### **Schauen wir uns ein Beispiel an:**

Wenn du den Datenabruf über **Logik** ausführst, strukturiere das Script so:

{% code lineNumbers="true" %}

```
{
	data: for r in select filme do
		{
			column: text(r.genre),
			title: r.title,
			record: r,
			tableId: tableId(r),
			subtitle: if r.director != "" then r.director else null end,
			badge: if r.release_year != 0 then text(r.release_year) else null end,
			image: r.poster,
			color: if r.watch_status = "1" then
				color("#c8e6c9")
			else
				if r.watch_status = "2" then
					color("#bbdefb")
				else
					if r.watch_status = "3" then color("#fff9c4") else null end
				end
			end,
			sort: r.title
		}
	end,
	settings: {
		columns: ["Action", "Komödie", "Drama", "Horror", "Sci-Fi", "Thriller", "Romanze", "Animation", "Dokumentation", "Fantasy"],
		design: {
			radius: 8,
			border: "1px solid #e2e2e2",
			padding: 12
		},
		columnField: "genre"
	}
}
```

{% endcode %}

Nutze diesen Prompt, um das Skript mit Ninox AI zu erstellen:\
"Erstelle eine Kanban-Ansicht mit allen Filmen aus der Tabelle „Movies“, gruppiert nach Genre."


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/kanban-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.