Конфигурация

Вы можете настраивать внешний вид и функциональность Kanban с помощью соответствующего API. Доступные параметры позволят вам:

настроить внешний вид карточек через свойство cardShape
настроить поля редактора через свойство editorShape
настроить поведение редактора через свойство editor
настроить рендеринг и прокрутку через свойства renderType и scrollType
настроить историю Kanban через свойство history
кастомизировать внешний вид карточек через свойство cardTemplate
- Смотрите раздел Кастомизация для подробностей!
применить нужную локализацию через свойство locale
- Смотрите раздел Локализация для подробностей!
загрузить данные для карточек, колонок, строк и связей через соответствующие свойства cards, columns, rows и links
- Смотрите раздел Работа с данными для подробностей!

Карточки

Доска Kanban состоит из карточек, распределённых по колонкам и строкам. Вы можете настроить внешний вид карточек с помощью свойства конфигурации cardShape. Доступно несколько предустановленных полей, которые можно включить или исключить из шаблона карточки, а именно:

метка карточки через конфиг label: boolean
описание карточки через конфиг description: boolean

совет
Вы можете управлять полями label и description любой карточки через соответствующие поля редактора Kanban. Если эти поля активированы, соответствующие инпуты автоматически появятся в редакторе. Для их настройки используйте типы text и textarea.
прогресс карточки через конфиг progress: boolean

совет
Вы можете управлять полем progress любой карточки через соответствующий контрол редактора Kanban. Если поле активировано, контрол появится в редакторе автоматически. Для настройки используйте тип progress.
дата начала через конфиг start_date: boolean
дата окончания через конфиг end_date: boolean

совет
Вы можете управлять полями start date и end date любой карточки через соответствующие контролы редактора Kanban. Если поля активированы, контролы появятся в редакторе автоматически. Для их настройки используйте тип date.
контекстное меню карточки через конфиг menu: boolean
вложения карточки через конфиг attached: boolean

совет
Вы можете прикреплять файлы к любой карточке через соответствующее поле редактора Kanban. Для настройки этого поля используйте тип files.
цвет карточки через конфиг color: boolean

совет
Вы можете управлять верхней цветной полоской любой карточки через соответствующий контрол редактора Kanban. При активации color контрол (colorpicker) появится в редакторе автоматически. Для настройки используйте тип color.
обложка карточки (превью-изображение) через конфиг cover: boolean
комментарии к карточке через конфиг comments: boolean
диалог подтверждения удаления карточки через конфиг confirmDeletion: boolean
голосование по карточке через конфиг votes: boolean | { show: boolean, clicable: true }
назначение пользователей на карточку через конфиг users: boolean | { show: boolean, values: object, maxCount: number | false }

совет
Вы можете назначать одного или нескольких пользователей на любую карточку через соответствующий контрол редактора Kanban. Для назначения одного пользователя используйте типы редактора combo или select, для нескольких — multiselect.
приоритет карточки через конфиг priority: boolean | { show: boolean, values: object }

совет
Вы можете управлять приоритетом любой карточки через соответствующий контрол редактора Kanban. Если priority активирован, контрол появится в редакторе автоматически. Для настройки используйте только типы combo или select.
кастомное поле через конфиг headerFields: [ { key: string, label: string, css: string } ]

const users = [ // данные пользователей
    { id: 1, label: "John Smith", avatar: "../assets/user.jpg" },
    { id: 2, label: "Aaron Short" }
];

const  cardPriority = [ // данные приоритета карточек
    { id: 1, color: "#FF5252", label: "high" },
    { id: 2, color: "#FFC975", label: "medium" },
    { id: 3, color: "#0AB169", label: "low" }
];

const cardShape = { // настройки карточек
    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", {
    // данные карточек
    columns,
    cards,
    // настройки карточек
    cardShape
});

заметка

Если вы не укажете настройки карточек через свойство cardShape, виджет применит набор параметров defaultCardShape!

Редактор

информация

Вы можете отображать редактор как боковую панель или модальное окно с помощью свойства editor.placement!

Редактор Kanban состоит из полей для управления данными карточек. Для настройки полей (контролов) редактора используйте свойство editorShape. Доступны следующие типы полей редактора:

combo, select и multiselect
color
text и textarea
progress
files
date и dataRange
comments
links

Типы Combo, Select и Multiselect

Поля редактора типов combo, select и multiselect можно задать следующим образом:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "combo", // или "select" и "multiselect"
            key: "priority", // ключ "priority" используется при настройке свойства "cardShape"
            label: "Priority",
            values: [
                { id: 1, label: "high" },
                { id: 2, label: "medium" },
                { id: 3, label: "low" }
            ]
        },
        // настройки других полей
    ]
});

информация

Для поля редактора типа "multiselect" и "combo" вы также можете указать путь к превью-изображению через свойство avatar:

editorShape: [
    {
        type: "multiselect", // или "combo"
        key: "users", // ключ "users" используется при настройке свойства "cardShape"
        label: "Users",
        values: [
            { 
                id: 1, label: "Alan", 
                avatar: "preview_image_path_1.png" 
            },
            { 
                id: 2, label: "John", 
                avatar: "preview_image_path_2.png" 
            }
        ]
    },
    // настройки других полей
]

Kanban. Ограничение назначения только одним пользователем

Тип Color

Поле редактора типа color можно задать следующим образом:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "color", 
            key: "color", // ключ "color" используется при настройке свойства "cardShape"
            label: "Card color",
            values: ["#65D3B3", "#FFC975", "#58C3FE"],
            config: {
                clear: true,
                placeholder: "Select color"
            }
        },
        // настройки других полей
    ]
});

Типы Text и Textarea

Поля редактора типов text и textarea можно задать следующим образом:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "text", // или "textarea"
            key: "label",
            label: "Label",
            config: {
                placeholder: "Type your tips here", 
                readonly: false, 
                focus: true,
                disabled: false,
                inputStyle: "height: 50px;"
            }
        },
        // настройки других полей
    ]
});

Тип Progress

Поле редактора типа progress можно задать следующим образом:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "progress", 
            key: "progress", // ключ "progress" используется при настройке свойства "cardShape"
            label: "Progress",
            config: {
                min: 10,
                max: 90,
                step: 5
            }
        },
        // настройки других полей
    ]
});

Тип Files

Поле редактора типа files можно задать следующим образом:

Настройка uploadURL как строки

const url = "https://docs.dhtmlx.com/kanban-backend";
new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "files", 
            key: "attached", // ключ "attached" используется при настройке свойства "cardShape"
            label: "Attachment",
            uploadURL: url + "/uploads", // указать url как строку
            config: {
                accept: "image/*", // "video/*", "audio/*"
                disabled: false,
                multiple: true,
                folder: false
            }
        },
        // настройки других полей
    ]
});

Настройка uploadURL как функции

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 или другие заголовки
                    }
                };

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

Типы Date и DateRange

Поле редактора типа date можно задать следующим образом:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "date", 
            key: "start_date",
            label: "Start date",
            format: "%d/%m/%y"
        },
        // настройки других полей
    ]
});

Поле редактора типа dateRange можно задать следующим образом:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "dateRange", 
            key: {
                start: "start_date",
                end: "end_date"
            },
            label: "Date Range",
            format: "%d/%m/%y"
        },
        // настройки других полей
    ]
});

Тип Comments

Поле редактора типа comments можно задать следующим образом:

new kanban.Kanban("#root", {
    editorShape: [
       {
            type: "comments",
            key: "comments",
            label: "Comments",
            config: {
                dateFormat: "%M %d",
                placement: "page", // или "editor"
                html: true,
                confirmDeletion: true
            }
        },
        // настройки других полей
    ]
});

Тип Links

Поле редактора типа links можно задать следующим образом:

new kanban.Kanban("#root", {
    editorShape: [
        {
            type: "links",
            key: "links",
            label: "Links",
            config: {
                confirmDeletion: true
            }
        },
        // настройки других полей
    ]
});

Привязка полей редактора к полям карточки

информация

Чтобы связать поле редактора с соответствующим полем карточки, укажите специальный key в объекте свойства editorShape (key: "editor_field_key"). Значение этого ключа должно быть установлено в true в свойстве cardShape (для встроенных полей карточки) или указано в массиве headerFields (для кастомных полей карточки). Начальные данные любого поля также можно задать через этот ключ.

// настройки редактора
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"
        }
    }
];
// настройки карточек
const cardShape = {
    label: true, // ключ встроенного поля
    headerFields: [
        {
            key: "note", // ключ кастомного поля 
            label: "Note"
        }
    ]
};
// данные карточек
const cards = [
    {
        label: "Volvo",
        note: "It is the swedish car",
        column: "backlog"
    },
    {
        label: "Audi",
        note: "It is the german car",
        column: "backlog"
    }
];
// создать Kanban
new kanban.Kanban("#root", {
    editorShape,
    cardShape,
    cards,
    columns
    // другие параметры конфигурации
});

заметка

Если вы не укажете настройки редактора через свойство editorShape, виджет применит набор параметров defaultEditorShape. В этом случае стандартные контролы и поля появятся в редакторе только после активации соответствующих полей карточек через свойство cardShape.

Настройка редактора

С помощью свойства editor вы можете настроить редактор следующим образом:

включить/отключить режим автосохранения редактора через свойство editor.autoSave
указать задержку автосохранения данных через свойство editor.debounce (работает только с параметром autoSave: true)

// создать Kanban
new kanban.Kanban("#root", {
    columns,
    cards,
    editorShape,
    editor: {
        autoSave: true,
        debounce: 2000
    }
    // другие параметры
});

Toolbar Kanban состоит из строки поиска для поиска карточек и контролов для сортировки карточек и добавления новых колонок и строк. Для отображения Toolbar необходимо инициализировать его в отдельном контейнере с помощью конструктора kanban.Toolbar().

// создать Kanban
const board = new kanban.Kanban("#root", {
    // данные
    columns,
    cards,
    rows,
    // настройки карточек
    cardShape,
    // настройки редактора
    editorShape
});

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

Вы можете управлять (скрывать/отображать/кастомизировать) контролами Toolbar с помощью свойства items:

// создать Kanban
const board = new kanban.Kanban("#root", {...});

new kanban.Toolbar("#toolbar", {
    api: board.api,
    items: [
        { // кастомная строка поиска
            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", // пустое пространство
        "undo", // контрол для отмены операций с карточками из истории
        "redo", // контрол для повтора операций с карточками из истории
        { // кастомный контрол сортировки
            type: "sort",
            options: [
                {
                    text: "Sort by label",
                    by: "label",
                    dir: "asc"
                },
                {
                    text: "Sort by description",
                    by: "description",
                    dir: "desc"
                }
            ]
        },
        "addColumn", // контрол для добавления новых колонок
        "addRow", // контрол для добавления новых строк
        // кастомные элементы
    ]
});

совет

Чтобы скрыть некоторые контролы Toolbar, удалите соответствующие строки из массива items.

Пример

В этом сниппете показано, как настроить Карточки, Редактор и Toolbar Kanban:

Карточки​

Редактор​

Типы Combo, Select и Multiselect​

Тип Color​

Типы Text и Textarea​

Тип Progress​

Тип Files​

Настройка uploadURL как строки​

Настройка uploadURL как функции​

Типы Date и DateRange​

Тип Comments​

Тип Links​

Привязка полей редактора к полям карточки​

Настройка редактора​

Toolbar​

Пример​

Карточки

Редактор

Типы Combo, Select и Multiselect

Тип Color

Типы Text и Textarea

Тип Progress

Тип Files

Настройка uploadURL как строки

Настройка uploadURL как функции

Типы Date и DateRange

Тип Comments

Тип Links

Привязка полей редактора к полям карточки

Настройка редактора

Toolbar

Пример