> 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/dinamicheskii-spisok.md).

# Динамический список

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

Разберём принцип работы компонента на основе построения интерфейса "Карточки очереди"

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FowSnkYSV0GpZSJy1hgve%2Fimage.png?alt=media&amp;token=153784fa-ff38-4b91-9767-c5807b913afa" alt=""><figcaption><p>Карточка очереди</p></figcaption></figure>

Добавим компонент в рабочую зону конструктора:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FdSlqpUNeeiq9wmlpkgkG%2Fimage.png?alt=media&amp;token=21a2076d-9f31-489c-af69-0006c4975c4e" alt=""><figcaption></figcaption></figure>

По умолчанию в компоненте используются следующие данные *<mark style="color:purple;">data</mark>*&#x20;

```javascript

[
      {
        "id": 123,
        "name": "Очередь 1",
        "type": "queue_all",
        "timestartutc": "2023-05-23T12:45",
        "timestoputc": "2023-05-23T12:55",
        "description": "Описание очереди 1",
        "status": "status_1",
        "load": 80,
        "calls": [
          {
            "id": "248852",
            "timestartutc": "2023-10-02T09:07:49+00:00",
            "timestoputc": "2023-10-02T09:12:34+00:00",
            "duration": 20,
            "avatar": "https://placehold.co/60x60",
            "title": "Морозов А.",
            "direction": "out",
            "calltype": "waiting"
          },
          {
            "id": "952774",
            "timestartutc": "2023-10-02T11:05:49+00:00",
            "timestoputc": "2023-10-02T12:45:11+00:00",
            "duration": 115,
            "avatar": "https://placehold.co/60x60",
            "title": "Гаспарян Э.",
            "direction": "in",
            "calltype": "ivr"
          }
        ],
        "summary": [
          {
            "title": "Активные",
            "value": "25"
          },
          {
            "title": "В очереди",
            "value": "5"
          },
          {
            "title": "На этапе IVR",
            "value": "2"
          }
        ],
        "graphData": {
          "datasets": [
            {
              "label": "Последние 7 дней",
              "data": [
                -1500,
                -2000,
                -1100,
                500,
                1000,
                2500,
                1800,
                250
              ],
              "color": {
                "background": "#36a2eb",
                "backgroundAlpha": "0"
              }
            },
            {
              "label": "За полный период 02.2024",
              "data": [
                -1300,
                -1800,
                -1000,
                300,
                1200,
                2100,
                1400,
                850
              ],
              "color": {
                "background": "#ff6384",
                "backgroundAlpha": "0"
              }
            }
          ],
          "labels": [
            "2.02.2024",
            "3.02.2024",
            "4.02.2024",
            "5.02.2024",
            "6.02.2024",
            "7.02.2024",
            "8.02.2024"
          ]
        }
      },
      {
        "id": 124,
        "name": "Очередь ожиданияя",
        "type": "queue_waiting",
        "timestartutc": "2023-05-23T13:15",
        "timestoputc": "2023-05-23T14:20",
        "description": "Описание очереди ожидания",
        "status": "status_2",
        "load": 150,
        "calls": [
          {
            "id": "282241",
            "timestartutc": "2023-10-02T09:05:49+00:00",
            "timestoputc": "2023-10-02T09:45:11+00:00",
            "duration": 97,
            "avatar": "https://placehold.co/60x60",
            "title": "Прокопчук Д.",
            "direction": "in",
            "calltype": "ivr"
          }
        ],
        "summary": [
          {
            "title": "Активные",
            "value": "5"
          },
          {
            "title": "В очереди",
            "value": "2"
          }
        ]
      },
      {
        "id": 125,
        "name": "Очередь за хлебом",
        "type": "queue_bread",
        "timestartutc": "2023-05-23T11:45",
        "timestoputc": "2023-05-23T18:00",
        "description": "Описание очереди за хлебом (очень интересно)",
        "status": "status_3",
        "load": 280,
        "summary": [
          {
            "title": "Активные",
            "value": "12"
          },
          {
            "title": "В очереди",
            "value": "0"
          }
        ]
      }
    ]
```

Далее, на основе макета создадим карточку очереди (в рамках примера, интерфейс создаваемой карточки будет  упрощён)

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FEq1CriaK2JH9WTDyBt2g%2Fimage.png?alt=media&amp;token=45a1279b-7631-4dc4-92cd-0f92e0c13097" alt=""><figcaption><p>Макет карточки очереди</p></figcaption></figure>

Для демонстрации работы компонента приведённого UI будет достаточно.

Для динамических значений карточки  настроим *<mark style="color:purple;">injection</mark>* аналогично примерам Грид и Канбан.

Для списка звонков и списка параметров очереди также используем вложенные компоненты "Динамический список". Для того, чтобы отрисовать компоненты на основе данных полей **calls** и **summary**, добавим в настройки дочерних  "Динамических списков" пути до необходимых массивов относительно родительского элемента, на основе данного примера:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F929zIpHtkCqsX824sa87%2Fimage.png?alt=media&amp;token=af8703f4-46ba-4d8d-a436-96a381dafa14" alt=""><figcaption><p>Настройки дочернего списка summary</p></figcaption></figure>

Для инъекции данных графиков, добавим в поле *<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%2F4vWRLSMxvf9T2uHzPJiG%2Fimage.png?alt=media&amp;token=6da9166a-be03-46c9-ba02-170ef615623c" alt=""><figcaption><p>Настройки подмены данных блока "график"</p></figcaption></figure>

Полный список настроек и компонентов:

{% file src="/files/7nOU4nsUvlHxZx7lWAp5" %}

После настройки элементов карточки очереди, переместим этот компонент в рабочую зону "Динамического списка".

Если все настройки заданы корректно, то должно получиться следующее отображение UI:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F9qo6gNgObBenIJsacd1v%2Fimage.png?alt=media&amp;token=c27c6b02-8e55-4b26-a8da-4e3313a313c3" alt=""><figcaption></figcaption></figure>

#### Обновление данных

Обновление данных с помощью событий и запросов API происходит также, как и в других компонентах. Для минимизации размеров payload-ов запроса, следует использовать существующую функцию "слияния" данных. Для чего необходимо передавать полный путь до данных, которые необходимо обновить, например, чтобы обновить только summary поле одного из элементов, необходимо отправить payload вида:

```javascript
...
"37dfbb19-0182-255b-0095-00505601100f#dynamic_list": {
  "data": {
    "0": {
      "summary": [
        {
          "title": "Активные",
          "value": 25,
        },
        {
          "title": "IVR",
          "value": 6,
        },
      ],
    },
  },
},
...
```

Аналогично и с другими полями.

{% hint style="info" %}
Важно:&#x20;

Если дочерние "Динамические списки" настроены на использование данных родительского списка - обновлять необходимо только данные  родительского "Динамического списка", т.к. передаваемые ему данные имеют приоритет отображения.
{% endhint %}

Итог: Данный компонент позволяет гибко отрисовать много повторяющихся элементов без дупликации "реальных" компонентов. Настроив всего один экземпляр компонента, мы можем "клонировать" его необходимое количество раз на основе исходного массива данных, что позволяет сократить как количество элементов в основном JSON приложения, так и количество событий, запросов и размер их payload-ов для обновления данных интерфейса.