> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/primery/kanban.md).

# Канбан

Пример использования компонента

Рассмотрим пример создания типового канбана в  конструкторе: 

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FODKCW7eGwq2xPYvcHCyY%2Fimage.png?alt=media&amp;token=d5280e5d-c429-4503-bb48-3b7305803b60" alt=""><figcaption></figcaption></figure>

Добавим компонент ![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FewQoj2lARVb7YfioTuIg%2Fimage.png?alt=media\&token=8a87fb68-520d-4357-8180-e079904003df) в рабочую область конструктора.

По умолчанию в качестве API данных для формирования списка вкладок канбана установлен тестовый набор данных, аналогичный компоненту Грид, который имеет вид:

```javascript
[
    {
      "id": 124,
      "name": "Очередь 1",
      "type": "queue_all",
      "timestartutc": "2023-05-20T12:45",
      "timestoputc": "2023-05-20T12:55",
      "status": "status_1",
      "load": 90
    },
    {
      "id": 123,
      "name": "Очередь ожидания",
      "type": "queue_waiting",
      "timestartutc": "2023-05-24T13:15",
      "timestoputc": "2023-05-24T14:20",
      "status": "status_2",
      "load": 150
    },
]
```

Для того, чтобы установить собственный набор данных, необходимо добавить их напрямую  во вкладке редактора **JSON** (форматирование также должно быть **JSON**). Либо получить их с бекенда и установить в значение соответствующего поля таблицы (*<mark style="color:purple;">data</mark>*).

Исходный вид канбана после его добавления в рабочую зону:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2Fr8lQjAIinaw2YgkA9clE%2Fimage.png?alt=media&amp;token=a3fd5c1a-19cc-4cd7-a608-f3fce2f846ec" alt=""><figcaption></figcaption></figure>

Сперва настроим внешний вид вкладок канбана. Для упрощения этого процесса воспользуемся контролом ![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FA7T5lsEoC0Rju3Mtxb41%2Fimage.png?alt=media\&token=a57749fb-73a7-424a-86b6-531ae0227133)

{% hint style="info" %}
Для удобства работы с компонентами, использующими "динамичные" параметры, имеет смысл создать отдельный контейнер, в котором располагать все подобные компоненты, связанные с канбаном, и держать его рядом для быстрого доступа к их настройкам. Также это позволит скрыть данную "зону" и показывать её только в режиме **Designtime** конструктора
{% endhint %}

Добавим вышеописанный контрол в рабочую зону и настроим его следующим образом:

1\) Укажем в поле *<mark style="color:purple;">mockData</mark>* массив данных, аналогичный тому, что будет использован в поле *<mark style="color:purple;">data</mark>* канбана.

2\) Создадим основу компонента, который будет использован в качестве интерфейса вкладки канбана.

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FP7gMSFjxqTL3RalhB9Oo%2Fimage.png?alt=media&amp;token=accb675e-3315-4e31-be52-f34a2288cf01" alt=""><figcaption></figcaption></figure>

3\) "Перетащим" данный компонент внутрь ранее добавленного "Условные компоненты". После чего для каждого элемента массива *<mark style="color:purple;">mockData</mark>* должна будет появится отдельная копия элемента.

{% hint style="info" %}
Во внутренних компонентах таких контролов, как  кабан (вкладки, столбцы) и "Условные компоненты" используется механизм "инъекции данных". Т.е. для этих компонентов активируются соответствующие настройки и становятся доступны для использования данные элементов из массива *<mark style="color:purple;">data</mark>* родительского компонента, на основе которых мы и будем настраивать отображение отдельных элементов
{% endhint %}

**4)** Настроим условия отображения параметров компонента UI вкладки.

**4.1)** Выведем название вкладки из динамичных данных. Для чего в соответствующем текстовом компоненте добавим настройки *<mark style="color:purple;">injection</mark>*:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FYsECBXuzucCaHRldHNoQ%2Fimage.png?alt=media&amp;token=79310831-7655-4760-8af1-1f1f66442d47" alt=""><figcaption></figcaption></figure>

Более подробно про  данные настройки:

* **key** - название параметра элемента из массива динамических данных. Значение данного параметра будет заменять значение текстового поля
* **conditionType** - тип условия для срабатывания замены значения.
* **conditionValue** - значение условия срабатывание замены значения. В данном случае это работает так: при указанном типе *<mark style="color:blue;">boolean</mark>* и значении *<mark style="color:blue;">true</mark>*, замена будет срабатывать всегда, когда параметр **name** будет присутствовать в элементе массива
* **injectionProp** - параметр настройки компонента, значение которого будет подменяться на динамические данные. В данном случае, указанное нами значение текста *<mark style="color:purple;">value:</mark>*  "**Название вкладки"** будет заменено на значение поля **name** из массива данных

В результате мы должны получить список UI элементов с разными заголовками, в соответствии с указанными в *<mark style="color:purple;">mockData</mark>* данными:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2Ft2xaSx84hjGZmGdO0705%2Fimage.png?alt=media&amp;token=b0363fda-e92d-48c7-8a59-961ab7c9bb53" alt=""><figcaption></figcaption></figure>

**4.2)** Добавим инъекцию уровня загрузки очереди для текстового поля "Индикатор загрузки" аналогично предыдущему пункту.

**4.3)** Заменим настройку цвета текста в зависимости от уровня загрузки, для чего добавим следующие настройки:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FLsUYkqOFf9s9WvP8aL7U%2Fimage.png?alt=media&amp;token=33f3ba0f-db3e-4378-a1e7-f5a5cd0b42e5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FkXOELrtlJyd0wW35pqjL%2Fimage.png?alt=media&amp;token=0173e84e-da35-4245-96fa-4bb2aacf16d9" alt=""><figcaption></figcaption></figure>

Данные настройки работают следующим образом:

Из элемента массива извлекается значение поля **load**, проверяется условие, при котором значение находится в диапазоне, указанном в поле *<mark style="color:purple;">conditionValue</mark>* и, если это значение попадает в выбранный диапазон, к текстовому элементу применяется настройка *<mark style="color:purple;">color</mark>* со значением **colorDanger**&#x20;

**4.4)** Для текстового поля символа % используем отдельный элемент (можно копировать предыдущее текстовое поле, чтобы не устанавливать его настройки повторно, т.к. они идентичны полю "Индикатор загрузки", в данном случае потребуется лишь удалить условие замены параметра *<mark style="color:purple;">value</mark>*)

Результатом должен стать список следующий список элементов:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FQyhcwT3V66EgsPWKnC70%2Fimage.png?alt=media&amp;token=9d8d8c03-8d37-4433-9b5c-067268184d53" alt=""><figcaption></figcaption></figure>

**5)** Добавим кнопку меню очереди и настроим требуемые пункты выпадающего списка (работа с событиями по нажатию на пункты меню описана в примере создания компонента Грид. Данный функционал в канбане реализован аналогично).

**6)** После того, как мы настроили необходимым образом визуальное отображение компонента вкладки, перетащим  элемент "Условные компоненты" в рабочую зону канбана. При необходимости настройте стили компонентов в соответствии с требуемым визуальным отображением вкладок.&#x20;

{% hint style="info" %}
Компоненты "Контейнер" по умолчанию имеют фон, соответствующий переменной темы bgPrimary, для задания прозрачного фона необходимо дополнить настройки *<mark style="color:purple;">customStyles</mark>* контейнера - *<mark style="color:purple;">cssProperty</mark>*: **background**, *<mark style="color:purple;">cssValue</mark>*: **transparent**
{% endhint %}

&#x20;В результате интерфейс канбана должен принять вид:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F7HPUNehwdVG1stPZ1KWe%2Fimage.png?alt=media&amp;token=b0851cb1-f821-47d7-9bcf-6c33ba3cd600" alt=""><figcaption></figcaption></figure>

Далее добавим необходимые настройки вкладок/сортировки:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FvClQgkmnVME1k4xO53aN%2Fimage.png?alt=media&amp;token=2c879419-8cbb-4a2d-847d-788cd85cee8d" alt=""><figcaption></figcaption></figure>

* **tabId** - поле в массиве данных, которое будет использовано в качестве *<mark style="color:green;">**идентификатора**</mark>*. Необходимо для событий, вызываемых внутри вкладки, чтобы на *backend-e* можно было идентифицировать из какой именно вкладки оно было вызвано
* **tabSortKey** - ключ поля, по которому выполняется сортировка вкладок. В данном случае вкладки отображаются отсортированными от большей нагрузки к меньшей.
* **sortDirection** - направление сортировки - по возрастанию / по убыванию
* **bgColor** - цвет фона неактивной вкладки

Теперь приступим к добавлению столбцов канбана

Основные настройки столбца выглядят следующим образом:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2Fpt0N95kEeusFFSbP6Gn6%2Fimage.png?alt=media&amp;token=c535ffd8-7499-422e-94bc-4466326e7bf1" alt=""><figcaption></figcaption></figure>

* **color** - цвет шапки столбца
* **icon** - иконка в заголовке столбца
* **key** - уникальный *<mark style="color:green;">**идентификатор**</mark>* столбца
* **title** - заголовок столбца
* **group** - название группы столбца, используется для группировки столбцов в меню выбора типа столбца
* **order** - приоритет при определении порядка отображения столбцов
* **data** - массив данных для отображения списка элементов столбца

Остальные настройки рассмотрим позднее на соответствующих примерах

Таким же образом добавим несколько столбцов. Далее, выберем столбцы, которые необходимо отобразить в меню канбана:

&#x20;

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FSwYpi5CJGIympDNceI5x%2Fimage.png?alt=media&amp;token=4464a8df-b5ef-439e-beb4-a5537617f6fe" alt=""><figcaption></figcaption></figure>

В результате должно получиться следующее:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FNmdni4aDDszEWfPwALGM%2Fimage.png?alt=media&amp;token=7bcd2254-f638-4233-afa7-0425e78bc0ee" alt=""><figcaption></figcaption></figure>

Каждый столбец использует отдельное поле *<mark style="color:purple;">data</mark>* в своих настройках для отрисовки компонентов внутри.

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

* Настройка полей *<mark style="color:purple;">request</mark>*
* Установка поля *<mark style="color:purple;">data</mark>* столбца вручную методами стандартных [событий конструктора](/ui-konstruktor-oktell/rabota-s-api.md)

Поскольку работа с событиями конструктора уже разбиралась в других примерах компонентов, рассмотрим настройку с использованием отдельного запроса на получение данных&#x20;

В качестве **API** в рамках примера, используем сервис [https://jsonplaceholder.typicode.com/](https://jsonplaceholder.typicode.com/users)

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FDSORa0byluciktjHxIMY%2Fimage.png?alt=media&amp;token=cb30622a-edeb-43a1-9645-be7bfd631eaf" alt=""><figcaption></figcaption></figure>

Поля настроек:

* **method** - стандартные типы методов запроса: **GET**, **POST, PATCH, OPTIONS, DELETE**
* **url** - адрес запроса
* **params** - список параметров запроса (для **GET** запросов - из них формируется строка **query**-параметров, для остальных - **body** запроса)
  * **key** - ключ параметра. Можно указывать с учётом уровней вложенности данных
  * **value** - значение параметра. Есть возможность брать значения из localStorage или настроек колонки, для чего необходимо в качестве первого символа использовать $ или # соответственно

В случае **GET** запроса, url примет вид [https://jsonplaceholder.typicode.com/users?user\_id=275d40si8sld92fa10\&entity=operators\_free\&method=get](https://jsonplaceholder.typicode.com/users?user_id=e7adf0aa-05b7-8163-948c-275d40f7b205\&entity=operators_free\&method=get)

В остальных случаях, **url** останется тем, что указан в настройках, но к запросу добавится **body** вида:

<pre class="language-javascript"><code class="lang-javascript">    {
      entity: "operators_free",
      method: "get",
<strong>      user_id: "275d40si8sld92fa10",
</strong>    }
</code></pre>

если указать в **value** параметра значение с указанием иерархии вложенности, например ***options.user\_id***, то оно также будет учтено при формировании тела запроса

```javascript
{
  entity: "operators_free",
  method: "get",
  options: {
    user_id: "275d40si8sld92fa10",
  }
}
```

{% hint style="info" %} <mark style="color:red;">Важно!</mark>: Ответ сервера на настроенный запрос должен быть непосредственным массивом объектов
{% endhint %}

Настройка UI элементов списка внутри столбца производится аналогичным образом, как и для элементов вкладок канбана. Отличается только способ привязки элементов, ввиду архитектурных особенностей "ядра" конструктора

Создадим ещё один элемент "Условные компоненты" используя в поле *<mark style="color:purple;">mockData</mark>* формат данных, соответствующий ожидаемому ответу сервера. Далее, по аналогии с компонентами вкладок, настроим требуемый внешний вид.

После чего скопируем *<mark style="color:purple;">id</mark>* элемента "Условные компоненты", и привяжем его к нужной колонке:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2Fk6XWYCsMvsR6FmaR6LE6%2Fimage.png?alt=media&amp;token=07e18df6-a191-4fdd-8b18-10bead558c50" alt=""><figcaption></figcaption></figure>

где:&#x20;

* **controlId** - *<mark style="color:purple;">id</mark>* привязываемого компонента
* **dynamic** - *включено:* компонент будет отрисован для каждого элемента массива данных столбца *<mark style="color:purple;">data.</mark> выключено:* компонент будет отрисован один раз
* **order** - приоритет отрисовки компонента внутри колонки
* **uniqueKey** - ключ параметра элемента массива *<mark style="color:purple;">data</mark>*, который будет использован  в качестве *<mark style="color:green;">**идентификатора**</mark>* при отправке событий, вызванных внутри элементов столбца на сервер. Таким образом, при отправке события внутри элемента столбца, будут отправлен ряд параметров, необходимых для точной идентификации активированного действия, например, событие нажатия на кнопку отправит данные вида:

```javascript
{
  value: {
    column: "operators_free",
    tab: 126
    element: 8,
  },
  values: {...другие значения, указанные в событии },
}
```

Если всё настроено верно и запрос возвращает корректные данные, то получим интерфейс:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2Faigh2nfwLcwApueQKqFq%2Fimage.png?alt=media&amp;token=8c3cb9b3-c09c-4d80-9bfa-ee48581be71c" alt=""><figcaption></figcaption></figure>

Также имеется возможность настроить список доступных сортировок столбца, для этого в его настройках нужно указать следующие параметры:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FfCXMuGXixZlbBJIL1iZC%2Fimage.png?alt=media&amp;token=54db1a5d-a3fa-4fdd-8087-d75849869529" alt=""><figcaption></figcaption></figure>

Где:

* **title** - Заголовок сортировки
* **order** - приоритет отображения сортировки в списке сортировок
* **sortKey** - поле, по которому будет выполнятся сортировка
* **sortDirection** - направление сортировки
* **sortMatch** - значение параметра, с которым будет сравниваться значение в поле, указанном в **sortKey**. Например, нам требуется отобразить сначала пользователей из города *"South Elvis"*. Для этого в sortKey укажем **address.city** а в **sortMatch** *"South Elvis"*. В **sortDirection** укажем **desc**. Таким образом, при активации данной сортировки, вверху списка элементов будут выведены пользователи с соответствующим значением поля:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FB2z1lib0HapsQwA0I2wH%2Fimage.png?alt=media&amp;token=d04c98a8-3d86-4a7a-8088-43893317e484" alt=""><figcaption></figcaption></figure>

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FMEXC73ikVF5WBOYDAImr%2Fimage.png?alt=media&amp;token=6353b2bf-d9c2-412b-a18f-3e7dc6a1a416" alt=""><figcaption></figcaption></figure>

Добавление "статичных" элементов внутри колонки производится также, как и динамичных, только без включенной настройки **dynamic**. Элемент будет отрисован один раз, без учёта массива данных *<mark style="color:purple;">data</mark>*:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FDN3uEFk7JSDxyjePqwEW%2Fimage.png?alt=media&amp;token=24efc080-7fc3-47cd-b2bd-06f5f42fafb4" alt=""><figcaption></figcaption></figure>

События из действий "статичных" элементов также будут отправлять необходимые идентификаторы колонки и вкладки.