Знакомьтесь: Kanban — продвинутый, настраиваемый и красивый

Когда речь заходит о слове «Kanban», что приходит вам в голову? Трекеры задач, CRM, маркетплейсы и карточки, которые можно перемещать из одного статуса в другой.

Мы уже как-то упоминали, почему Trello нас не устроил (в нашем конкретном случае), и это ситуация, знакомая многим компаниям. Перебирать трекеры задач — то же самое, что перебирать приложения для коммуникаций: Slack, WhatsApp, Teams, что угодно. Найти хороший вариант получается не сразу.

Древние греки сетовали на поиск подходящего поставщика трекера задач еще 2500 лет назад. Проблема, по всей видимости, гораздо старше.

Зачем продолжать искать что-то похожее на Kanban-доску, если можно просто создать её самому? Давно пора было сделать no-code функциональность Kanban элементом drag-n-drop в Directual — и вот, наконец, это случилось.

Что умеет Kanban в Directual?

Практически всё, на что способно стандартное приложение с Kanban-доской, и даже больше. А вот в чём вся соль: в зависимости от конфигурации, как только карточка перетаскивается в следующий статус, может запускаться сценарий (любой сложности) по вашему выбору.

Например: вы перемещаете карточку в другой статус, и Directual может..

• Уведомить ответственного менеджера
• Обратиться к внешнему API
• Изменить права доступа
• Выполнить действия на основе разных баз данных, ролей и внешних систем
• Отменить drag-n-drop, если возникает логический конфликт

Если хотите посмотреть, как это работает вживую, попробуйте прямо здесь (или посетите страницу live-demo):

Примеры выше доступны в шаблоне Kanban demo:

Компонент Kanban можно (и определённо стоит) использовать не только для базовых внутренних приложений и досок задач. Мыслите масштабно: создавайте CRM, обогащайте свой SaaS Kanban-досками и автоматизируйте бизнес-процессы.

Как настроить Kanban

Давайте посмотрим, как можно запустить собственную Kanban-доску всего за 5 минут.

Шаг 1: настройте эндпоинт

Сначала нужно выбрать эндпоинт со следующими полями:

• Stage (столбец): это поле типа «связь», подключённое к структуре справочника
• Weight: поле десятичного типа для сортировки данных внутри столбца от меньшего к большему. Как только пользователь перетаскивает элемент, значение веса сохраняется от 0 до N для всего столбца.

Шаг 2: настройте Kanban-доску

Здесь тоже всё довольно просто:

• Выберите поле stage (столбец)
• Выберите поле weight
• Включите или отключите drag-n-drop
• Нажмите «Reset the list», чтобы получить этапы из связанной структуры данных

Шаг 3: настройте отображение карточек и дополнительные параметры

Весь этот процесс очень похож на настройку нашей стандартной карточки, которая также занимает всего пару минут.

Та-даам, готово! Но это ещё не всё…

Создание карточек Kanban с кастомным дизайном

Помимо всего прочего, вы можете настраивать внешний вид карточек Kanban, конфигурируя HTML на основе данных объекта так, как вам нужно. Взгляните на пример того, как могут выглядеть ваши карточки Kanban ниже:

Выглядит неплохо, правда? Чтобы дать вам представление о сложности, вот как выглядит структура данных:

А теперь давайте посмотрим на настройки страницы. Здесь всего два компонента:

Настройки карточки Kanban, в свою очередь, выглядят вот так. Наконец, именно здесь HTML-код компонента дополняется собственным CSS (кстати, эту же функцию можно использовать на любой странице!):

Если вам понравился красивый дизайн Kanban выше (посмотрите live-demo), у вас есть возможность забрать его себе прямо здесь:

Послесловие

Kanban — неотъемлемая часть множества разных компаний и рабочих процессов по всему миру. Иногда стоит иметь собственный Kanban, созданный именно так, как вам нужно, без риска простоя. Попробуйте сами, и если у вас возникнут вопросы или предложения, вы знаете, где нас найти: hello@directual.com