Zum Hauptinhalt springen

Konfiguration

Das Aussehen und die Funktionalität von Kanban können Sie mit den folgenden Eigenschaften konfigurieren:

Karten​

Das Kanban-Board besteht aus Karten, die auf Spalten und Zeilen verteilt sind. Verwenden Sie die cardShape Eigenschaft, um das Erscheinungsbild und die integrierten Felder der Karten zu konfigurieren:

  • label: boolean | { show } — Kartenbezeichnung, bearbeitet mit dem Typ text
  • description: boolean | { show } — Kartenbeschreibung, bearbeitet mit dem Typ textarea
  • progress: boolean | { show } — Kartenfortschritt, bearbeitet mit dem Typ progress
  • start_date: boolean | { show, format } — Startdatum der Karte, bearbeitet mit dem Typ date
  • end_date: boolean | { show, format } — Enddatum der Karte, bearbeitet mit dem Typ date
  • menu: boolean | { show, items } — Kontextmenü der Karte
  • attached: boolean | { show } — Dateianhang der Karte, bearbeitet mit dem Typ files
  • color: boolean | { show, values } — obere Farblinie der Karte, bearbeitet mit dem Typ color
  • cover: boolean | { show } — Vorschaubild der Karte
  • comments: boolean | { show } — Kommentare zur Karte
  • confirmDeletion: boolean | { show } — Bestätigungsdialog zum Löschen der Karte
  • votes: boolean | { show, clickable } — Abstimmungsmöglichkeit bei der Karte
  • users: boolean | { show, values, maxCount } — der Karte zugewiesene Benutzer, bearbeitet mit den Typen combo, select oder multiselect
  • priority: boolean | { show, values } — Kartenpriorität, bearbeitet mit dem Typ combo oder select
  • css: (card) => string — Funktion, die eine CSS-Klasse zurückgibt, die bedingt auf eine Karte angewendet wird
  • headerFields: [{ key, label, css }] — benutzerdefinierte Kartenfelder
Tipp

Wenn Sie ein Feld in cardShape aktivieren, zeigt der Editor das entsprechende Steuerelement automatisch an. Konfigurieren Sie jedes Steuerelement über die editorShape Eigenschaft — verfügbare Typen finden Sie unter Editor.

Das folgende Code-Beispiel konfiguriert Karten mit benutzerdefinierten Benutzern, Prioritäten und einem benutzerdefinierten Header-Feld:

const users = [ // Nutzerdaten
    { id: 1, label: "John Smith", avatar: "../assets/user.jpg" },
    { id: 2, label: "Aaron Short" }
];

const  cardPriority = [ // Prioritätsdaten für Karten
    { id: 1, color: "#FF5252", label: "high" },
    { id: 2, color: "#FFC975", label: "medium" },
    { id: 3, color: "#0AB169", label: "low" }
];

const cardShape = { // Karteneinstellungen
    label: true,
    description: true,
    progress: true,
    start_date: true,
    end_date: true,
    menu: true,
    attached: true,
    priority: {
        show: true,
        values: cardPriority
    },
    users: {
        show: true,
        values: users
    },
    headerFields: [
        {
            key: "sprint",
            label: "Custom field",
            css: "custom_css_class"
        }
    ]
};

new kanban.Kanban("#root", {
    // Kartendaten
    columns,
    cards,
    // Karteneinstellungen
    cardShape
});
Hinweis

Sofern Sie keine Karteneinstellungen über die cardShape Eigenschaft angeben, greift das Widget auf defaultCardShape zurück.

Editor​

Der Kanban-Editor enthält Felder zur Verwaltung der Kartendaten. Verwenden Sie die editorShape Eigenschaft, um Editor-Felder zu konfigurieren. Folgende Feldtypen stehen zur Verfügung:

Info

Zeigen Sie den Editor als Seitenleiste oder modales Fenster an, indem Sie die editor.placement Eigenschaft verwenden.

Combo-, Select- und Multiselect-Typen​

Das folgende Code-Beispiel konfiguriert ein Dropdown zur Auswahl einer Kartenpriorität:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "combo", // oder "select" und "multiselect"
            key: "priority", // Den "priority"-Schlüssel in der "cardShape"-Eigenschaft verwenden
            label: "Priority",
            values: [
                { id: 1, label: "high" },
                { id: 2, label: "medium" },
                { id: 3, label: "low" }
            ]
        },
        // Einstellungen anderer Felder
    ]
});
Info

Für Felder vom Typ multiselect und combo können Sie über die Eigenschaft avatar einen Pfad zum Vorschaubild angeben:

editorShape: [
    {
        type: "multiselect", // oder "combo"
        key: "users", // Den "users"-Schlüssel in der "cardShape"-Eigenschaft verwenden
        label: "Users",
        values: [
            { 
                id: 1, label: "Alan", 
                avatar: "preview_image_path_1.png" 
            },
            { 
                id: 2, label: "John", 
                avatar: "preview_image_path_2.png" 
            }
        ]
    },
    // Einstellungen anderer Felder
]

Kanban. Limiting assignments to one user only

Color-Typ​

Das folgende Code-Beispiel konfiguriert das Editor-Feld zur Auswahl einer Kartenfarbe:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "color", 
            key: "color", // Den "color"-Schlüssel in der "cardShape"-Eigenschaft verwenden
            label: "Card color",
            values: ["#65D3B3", "#FFC975", "#58C3FE"],
            config: {
                clear: true,
                placeholder: "Select color"
            }
        },
        // Einstellungen anderer Felder
    ]
});

Text- und Textarea-Typen​

Das folgende Code-Beispiel konfiguriert das Editor-Feld zur Eingabe einer Kartenbezeichnung:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "text", // oder "textarea"
            key: "label",
            label: "Label",
            config: {
                placeholder: "Type your tips here", 
                readonly: false, 
                focus: true,
                disabled: false,
                inputStyle: "height: 50px;"
            }
        },
        // Einstellungen anderer Felder
    ]
});

Progress-Typ​

Das folgende Code-Beispiel konfiguriert das Editor-Feld zur Festlegung des Kartenfortschritts:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "progress", 
            key: "progress", // Den "progress"-Schlüssel in der "cardShape"-Eigenschaft verwenden
            label: "Progress",
            config: {
                min: 10,
                max: 90,
                step: 5
            }
        },
        // Einstellungen anderer Felder
    ]
});

Files-Typ​

Setzen Sie den Parameter uploadURL auf einen String für einen einfachen Upload oder auf eine Funktion für eine benutzerdefinierte Anfrage.

Upload-URL als String konfigurieren​

Das folgende Code-Beispiel verwendet eine String-URL für den Datei-Upload:

const url = "https://docs.dhtmlx.com/kanban-backend";
new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "files", 
            key: "attached", // Den "attached"-Schlüssel in der "cardShape"-Eigenschaft verwenden
            label: "Attachment",
            uploadURL: url + "/uploads", // URL als String angeben
            config: {
                accept: "image/*", // "video/*", "audio/*"
                disabled: false,
                multiple: true,
                folder: false
            }
        },
        // Einstellungen anderer Felder
    ]
});

Upload-URL als Funktion konfigurieren​

Übergeben Sie eine Funktion an uploadURL, um benutzerdefinierte Header, Tokens oder eine eigene Antwortverarbeitung hinzuzufügen. Das folgende Code-Beispiel sendet jede Datei mit einem Bearer-Token:

const url = "https://docs.dhtmlx.com/kanban-backend";
new kanban.Kanban("#root", {
    editorShape: [
        ...defaultEditorShape,
        {
            key: "attached",
            type: "files",
            label: "Files",
            uploadURL: rec => {
                const formData = new FormData();
                formData.append("upload", rec.file);

                const config = {
                    method: "POST",
                    body: formData,
                    headers: {
                        'Authorization': 'Bearer ' + token  // token oder andere Header hier
                    }
                };

                return fetch(url + "/uploads", config) // URL hier
                    .then(res => res.json())
                    .then(
                        data => {
                            return { id: rec.id, ...data };
                        },
                        () => ({ id: rec.id, status: "error" })
                    )
                    .catch();
            }
        }
    ]
});

Date- und DateRange-Typen​

Das folgende Code-Beispiel konfiguriert das Editor-Feld für ein einzelnes Datum:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "date", 
            key: "start_date",
            label: "Start date",
            format: "%d/%m/%y"
        },
        // Einstellungen anderer Felder
    ]
});

Das folgende Code-Beispiel konfiguriert das Editor-Feld für einen Start-/Enddatumsbereich:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "dateRange", 
            key: {
                start: "start_date",
                end: "end_date"
            },
            label: "Date Range",
            format: "%d/%m/%y"
        },
        // Einstellungen anderer Felder
    ]
});

Comments-Typ​

Das folgende Code-Beispiel konfiguriert das Kommentarfeld des Editors:

new kanban.Kanban("#root", {
    editorShape: [
       {
            type: "comments",
            key: "comments",
            label: "Comments",
            config: {
                dateFormat: "%M %d",
                placement: "page", // oder "editor"
                html: true,
                confirmDeletion: true
            }
        },
        // Einstellungen anderer Felder
    ]
});

Das folgende Code-Beispiel konfiguriert das Verknüpfungsfeld des Editors:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "links",
            key: "links",
            label: "Links",
            config: {
                confirmDeletion: true
            }
        },
        // Einstellungen anderer Felder
    ]
});

Editor-Felder an Kartenfelder binden​

Jedes Editor-Feld ist über einen gemeinsamen key mit einem Kartenfeld verknüpft. Setzen Sie denselben key-Wert im editorShape-Eintrag und in der cardShape Eigenschaft. Bei integrierten Kartenfeldern setzen Sie den Schlüssel auf true. Bei benutzerdefinierten Feldern tragen Sie den Schlüssel im headerFields-Array ein. Derselbe Schlüssel liefert auch die Anfangsdaten der Karte.

Das folgende Code-Beispiel bindet die Editor-Felder label und note an die entsprechenden Kartenfelder:

// Editor-Einstellungen
const editorShape = [ 
    { 
        type: "text",
        key: "label",
        label: "Label",
        config: {
            placeholder: "Enter new label here"
        }
    },
    { 
        type: "textarea",
        key: "note",
        label: "Note",
        config: {
            placeholder: "Enter usefull note here"
        }
    }
];
// Karteneinstellungen
const cardShape = {
    label: true, // Schlüssel eines eingebauten Feldes
    headerFields: [
        {
            key: "note", // Schlüssel eines benutzerdefinierten Feldes
            label: "Note"
        }
    ]
};
// Kartendaten
const cards = [
    {
        label: "Volvo",
        note: "It is the swedish car",
        column: "backlog"
    },
    {
        label: "Audi",
        note: "It is the german car",
        column: "backlog"
    }
];
// Kanban erstellen
new kanban.Kanban("#root", {
    editorShape,
    cardShape,
    cards,
    columns
    // andere Konfigurationsparameter
});
Hinweis

Sofern Sie keine Editor-Einstellungen über die editorShape Eigenschaft angeben, greift das Widget auf defaultEditorShape zurück. Die Standard-Steuerelemente und Eingaben werden im Editor erst angezeigt, nachdem Sie die entsprechenden Kartenfelder über die cardShape Eigenschaft aktiviert haben.

Editor-Verhalten konfigurieren​

Die editor Eigenschaft steuert Sichtbarkeit, Autosave und Platzierung des Editors:

Das folgende Code-Beispiel aktiviert Autosave mit einer Verzögerung von 2 Sekunden:

// Kanban erstellen
new kanban.Kanban("#root", {
    columns,
    cards,
    editorShape,
    editor: {
        autoSave: true,
        debounce: 2000
    }
    // weitere Parameter
});

Rendering und Scrollen​

Standardmäßig rendert das Kanban-Widget alle Karten und scrollt das gesamte Board. Bei Boards mit vielen Karten können Sie auf Lazy Rendering oder spaltenweises Scrollen umschalten:

  • renderType — auf "lazy" setzen, um nur die auf dem Board sichtbaren Karten zu rendern
  • scrollType — auf "column" setzen, um jede Spalte unabhängig zu scrollen

Das folgende Code-Beispiel aktiviert Lazy Rendering und spaltenweises Scrollen:

new kanban.Kanban("#root", {
    columns,
    cards,
    rows,
    renderType: "lazy",
    scrollType: "column",
    cardHeight: 150
});
important

Wenn Sie renderType: "lazy" mit einem beliebigen scrollType kombinieren, legen Sie über die cardHeight Eigenschaft eine statische Höhe für Karten fest. Ohne cardHeight werden Karten beim Lazy Rendering nicht korrekt angezeigt.

Änderungsverlauf​

Kanban verfolgt Kartenoperationen und stellt Undo- und Redo-Steuerelemente in der Toolbar bereit. Verwenden Sie die history Eigenschaft, um dieses Verhalten zu deaktivieren.

Das folgende Code-Beispiel deaktiviert die Verlaufsverfolgung:

new kanban.Kanban("#root", {
    columns,
    cards,
    history: false
});
Tipp

Um einzelne Operationen aus dem Verlauf auszuschließen, übergeben Sie den $meta Parameter an Methoden oder Events.

Toolbar​

Die Kanban-Toolbar bietet eine Suchleiste, Sortiersteuerelemente sowie Steuerelemente zum Hinzufügen von Spalten und Zeilen. Initialisieren Sie die Toolbar in einem separaten Container mit dem Konstruktor kanban.Toolbar().

Das folgende Code-Beispiel erstellt eine Toolbar, die an die Kanban-Instanz gebunden ist:

// Kanban erstellen
const board = new kanban.Kanban("#root", {
    // Daten
    columns,
    cards,
    rows,
    // Karteneinstellungen
    cardShape,
    // Editor-Einstellungen
    editorShape
});

new kanban.Toolbar("#toolbar", { api: board.api });

Verwenden Sie die items Eigenschaft, um Toolbar-Steuerelemente anzuzeigen, auszublenden oder anzupassen. Das folgende Code-Beispiel setzt eine benutzerdefinierte Suchleiste, Undo- und Redo-Steuerelemente, eine benutzerdefinierte Sortierung sowie Spalten- und Zeilensteuerelemente:

// Kanban erstellen
const board = new kanban.Kanban("#root", {...});

new kanban.Toolbar("#toolbar", {
    api: board.api,
    items: [
        { // benutzerdefinierte Suchleiste
            type: "search",
            options: [
                {
                    id: "label",
                    label: "By label"
                },
                {
                    id: "start_date",
                    label: "By date",
                    searchRule: (card, value, by) => {
                        const date = card[by];
                        return date?.toString().includes(value);
                    }
                }
            ],
            resultTemplate: kanban.template(searchResult => {
                return `<div className="list-item">
                            <div className="list-item-text">${searchResult.result.label}</div>
                            ${searchResult.result.description ? `<div className="list-item-text item-description">${searchResult.result.description}</div>` : ""}
                        </div>`
            })
        },
        "spacer", // Leerraum
        "undo", // Kartenaktionen in der Historie rückgängig machen
        "redo", // Kartenaktionen in der Historie wiederherstellen
        { // benutzerdefiniertes Sortier-Steuerelement
            type: "sort",
            options: [
                {
                    text: "Sort by label",
                    by: "label",
                    dir: "asc"
                },
                {
                    text: "Sort by description",
                    by: "description",
                    dir: "desc"
                }
            ]
        },
        "addColumn", // Steuerelement zum Hinzufügen neuer Spalten
        "addRow", // Steuerelement zum Hinzufügen neuer Zeilen
        // benutzerdefinierte Elemente
    ]
});
Tipp

Entfernen Sie ein Steuerelement aus dem items-Array, um es auszublenden.

Beispiel​

Das folgende Beispiel konfiguriert Karten, Editor und Toolbar von Kanban:

Need more help?Contact Support