> 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/kontroly/uslovnye-komponenty-v2.md).
# Условные компоненты v2
Иконка компонента
Контрол для условной отрисовки компонентов на основе объекта унаследованных данных
#### Свойства:
* *placeholder* - текст, отображаемый в компоненте, если в нём отсутствуют данные *data*
* *dataConfig* - настройки отображения элементов:
* *identifierKey* - поле элемента массива, которое необходимо использовать в качестве идентификатора при вызове событий внутренних компонентов. При пустом значении будет использован индекс элемента массива.
* *defaultChild* - идентификатор дочернего компонента, который необходимо отрисовать по умолчанию, если ни одно из настроенных условий не выполняется
* *singleMode* - если активировано, выводить только первый компонент, чьё условие отображения выполнилось
* *components*- настройки компонентов и их условий
* *childId* - идентификатор дочернего компонента, для которого выполнять настройку условий
* *showCondition* - строка, отражающая условие отображения компонента. Формат строки определён логическим псевдо-языком, и имеет вид "{load} < 999 AND {type} = 'queue\_bread'". Для формирования условия предусмотрен графический редактор с возможностью добавлять/удалять/перемещать/группировать условия.
* *data* - массив данных, на основе которых будет отрисован список элементов
Пример данных *data* :
```javascript
{
"id": 124,
"name": "Очередь 1",
"type": "queue_all",
"timestartutc": "2023-05-20T12:45",
"timestoputc": "2023-05-20T12:55",
"status": "status_1",
"load": 90,
"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"
}
],
"meta": {
"author": "00F82-a2cc7-821so8m-00bb72d4",
"created": "2023-05-20T12:45",
"changed": "2024-02-08T18:45",
},
"tags": [
"queue",
"calls",
"sales",
"banking",
],
}
```
Формирование условия с помощью графического редактора:
1. Введите поле (или путь до поля) в объекте с данными, например type или meta.author. Данное значение будет сравниваться с указанным
2. Выберите оператор сравнения:
1. '=' - равно
2. '≠' - не равно
3. '<' - меньше
4. '≤' - меньше или равно
5. '>' - больше
6. '≥' - больше или равно
7. 'IN' - содержится в указанном
8. 'HAS' - содержит указанное
3. Введите значение для сравнения. Например tags + HAS + queue - будет сериализовано в условие вида {tags} HAS 'queue'. Что интерпретируется как "значение поля tags содержит значение 'queue'". В нашем случае данное условие выполняется.
4. Далее необходимо добавить условие к сравнению, либо нажав кнопку "добавить" , либо перетащив заполненное условие в соответствующую рабочую зону, расположенную ниже, используя пиктограмму поля  в качестве "рукоятки" перетаскивания.
5. Чтобы добавить группировку условий, выберите необходимое условие, и также перетащите его в зону "+ добавить в группу". Зона отобразиться после начала перетаскивания условия из рабочей зоны.
6. Чтобы удалить условие нужно нажать на пиктограмму  внутри условия
Также поддерживается ряд доп. действий с перетаскиванием условий:
* Поменять условия местами - перетащить одно условие в другое
* Добавить условие в существующую группу - перетащить условие в зону, обозначающую границу группы
* Расформировать группу - перетащить группу в любое пустое место в границах рабочей зоны
* Поменять местами условие и группу условий - т.к. перетаскивание условия в группу уже назначено на действие добавления условия в группу, необходимо перетащить группу в целевое условие
* Поменять местами группы условий - то же, что и поменять местами условия
Для большей визуальной ясности - при перетаскивании, текущая цель перетаскивания "подсвечивается" цветной обводкой.
Приоритет условий определяется их порядком отображения в графическом редакторе/группе - верхнее условие имеет наивысший приоритет, нижнее - наименьший
Отношения между условиями регулируются логическими операторами И / ИЛИ
Например, в данном случае, компонент будет отображён в случае, если выполняется ОДНО ИЗ условий:
* поле status имеет значение status\_1 или status\_2
* массив поля tags содержит значение queue, А ТАКЖЕ, значение поля load меньше или равно 999
Сериализованное условие в таком случае будет иметь вид:\
{status} IN \['status\_1', 'status\_2'] AND ({tags} HAS 'queue' AND {load} <= 999)
