Компонент "Form Table" | Официальная документация Webitel

1. Описание

Позволяет отобразить таблицу с внешними данными в форме схемы.

Данный компонент присутствует в схемах типа:

Формы.

Блок (Рис. 1.(1)) размещается в поле для построения схемы. При нажатии на блок открывается панель настроек компонента (Рис. 1.(2)).

2. Блок "Form Table"

Блок "Form Table" (Рис. 1.(1)) состоит из следующих элементов:

Название компонента;
Ветка "In" — входящая (соединяет с предыдущим блоком);
Ветка "Out" — исходящая (соединяет со следующим блоком).

При наведении на поле "Out" появляется переключатель, который позволяет соединить компонент с блоком, уже имеющим соединение.

Наличие иконки означает, что переключатель включен, и компонент можно соединить с другим, уже подключенным блоком.

Изменение положения переключателя удаляет исходящую ветку компонента.

Кнопка удаляет блок из схемы.

3. Панель настроек "Form Table"

Панель настроек компонента "Form Table" (Рис. 2) состоит из следующих элементов:

Описание компонента Form Table.png — *Рис. 2. Панель настроек "Form Table”*

3.1. Поле "ID"

Уникальный идентификатор компонента в схеме (Рис. 2.(1)).

Значение, выбранное оператором в поле выбора сервиса, будет сохранено в переменной с этим идентификатором. Его можно использовать на следующих этапах схемы.

3.2. Поле “Source”

Текстовое поле ввода (Рис. 2.(2)), в которое можно передать переменную с JSON-объектом. Таблица будет сформирована на его основе.

3.3. Переключатель “Use system sources”

Если включен – — активируется поле System sources, а поле Source блокируется (Рис. 2.(3)).

3.4. Поле “System sources”

Выбор системных объектов Webitel (Рис. 2.(4)):

"Users";
"Roles";
“Contacts“;
“Calendars“;
“Lists“;
“Queues“;
“Communication Types“;
“Cases“;
“Contact Groups“;
“Case Sources“;
“Agents“;
“Priorities“.

Данные из этого источника используются для построения таблицы.

3.5. Блок “View”

Блок (Рис. 2.(5)) используется для настройки внешнего вида таблицы в форме постобработки. Позволяет задать заголовок таблицы и определить, будет ли она развернута или свернута по умолчанию.

Поля блока:

Table header;
Collapsed by default.

3.5.1. Table header

Текстовое поле, необязательное. В нем можно указать название таблицы, которое будет отображаться в форме постобработки Workspace. Если поле не заполнено, по умолчанию отображается название Table.

3.5.2. Collapsed by default

Переключатель:

если выключен (по умолчанию) — таблица в форме постобработки Workspace сразу отображается развернутой;
если включить — таблица будет показана в свернутом виде.

3.6. Блок "Display columns"

В этом блоке (Рис. 2.(5)) настраиваются колонки, которые будут отображены в таблице:

Display column;
Display name;
Format;
Width (px).

3.7. Поле "Display column"

Название колонки (например, phone_number), которая будет выводиться (Рис. 2.(7)).

Если в колонку передается массив значений, в этом поле можно указать не только сам массив, но и конкретный элемент из него.

Пример:

phones.data.number — выводит весь массив номеров;
phones.data.1.number — выводит только второй элемент массива.

Это позволяет отображать в таблице нужное значение, а не весь список.

3.8. Поле "Display name"

Название системной колонки для выбора, которая отображается в форме (Рис. 2.(8)).

3.9. Поле "Format"

Поле (Рис. 2.(9)) используется для определения формата отображения данных в колонке таблицы. Является обязательным для каждой колонки.

Доступные форматы:

text — значение отображается как текстовая строка. Если атрибут содержит массив (например, список номеров), он будет показан в текстовом виде через запятую;
number — числовое значение;
bool — используется для логических значений. В таблице они автоматически отображаются в виде иконок:
- – если значение равно true ("да");
- – если значение равно false ("нет");
datetime — используется для отображения даты и времени. Если в данных сохранён timestamp (например, 1727936700), система автоматически покажет его в понятном формате даты и времени (например, 03.10.2025 09:25:00);
link — значение отображается как кликабельная ссылка.

3.10. Поле "Width (px)"

Ширина колонки в пикселях. Если не задана, рассчитывается автоматически (Рис. 2.(10)).

3.11. Кнопка "Add"

Нажатие на кнопку "Add" (Рис. 2.(11)) добавляет новую колонку (Рис. 3). После этого становится доступная иконка для ее удаления.

Display columns.png — *Рис. 3. Добавление новой колонки после нажатия на кнопку “Add”*

3.12. Блок “Fields”

Блок (Рис. 2.(12)) предназначен для сохранения в переменной дополнительных полей системного объекта. Эти значения не обязательно отображаются в таблице, но доступны для дальнейшей обработки в других компонентах схемы.

Таким образом можно разделить данные для пользователя (например, имя, отображаемое в таблице) и технические данные (например, внутренний номер).

3.13. Поле “Field”

Поле (Рис. 2.(13)) используется для ввода названия системного атрибута из источника данных, который необходимо сохранить в переменной.

Пользователь может добавлять несколько таких полей, чтобы в дальнейшем иметь доступ к нужным значениям, даже если они не выводятся в таблицу.

Добавление новых полей осуществляется через иконку , удаление — через иконку .

Примечание. Сохранённые в этом блоке поля могут использоваться в других элементах схемы, например, через настройки кнопок действий “Action buttons” для отображения конкретных значений.

3.14. Блок "Filters"

Блок (Рис. 2.(14)) появляется только при включенном переключателе "Use system sources" (см. раздел 3.3). Позволяет задать условия, по которым данные из выбранного источника будут отображаться в таблице.

3.15. Поле "Filter"

Поле “Filter” (Рис. 2.(15)) позволяет вручную задать условие для фильтрации данных из выбранного источника.

Чтобы правильно заполнить это поле:

Перейдите в раздел, где находится нужная вам сущность (например, CRM → Контакты).
Примените нужный фильтр в обычном интерфейсе (Рис. 4).

CRM_Контакты.png — *Рис. 4. Применение фильтров*

Откройте инструменты разработчика ("DevTools") и перейдите на вкладку "Network" (Рис. 5).

Network_Контакты.png — *Рис. 5. Вкладка "Network" в DevTools*

Найдите запрос добавления фильтров (Рис. 6.(1)) и перейдите на вкладку “Payload” (Рис. 6.(2)).

payload_контакты.png — *Рис. 6. Поиск запроса и переход на вкладку “Payload” в DevTools*

Скопируйте имя параметра и значение (например, user true) (Рис. 7).

Перейдите к компоненту схемы и впишите значение в поле “Filter” в следующем формате

user=true

Обязательно удалите пробелы и используйте знак "=" между полем и значением (Рис. 8).

*Рис. 8. Пример ввода значения в поле “Filters”*

Иконка позволяет создать дополнительное поле “Filter” в блоке “Filters”. Это дает возможность задать несколько условий фильтрации (Рис. 9).

Важно! Если указано несколько условий, все они выполняются одновременно — система ищет только те записи, которые соответствуют всем условиям.

*Рис. 9. Пример применения нескольких условий фильтрации*

Чтобы удалить условие, нажмите на иконку рядом с соответствующим полем.

Альтернативный способ добавить несколько условий — не создавать новые поля вручную через кнопку “Add”, а записать их в одном поле через символ “&”, например:

user=true&label=df

Такая запись также означает, что все условия должны выполняться одновременно.

3.16. Кнопка "Test"

Кнопка (Рис. 2.(16)) позволяет проверить, возвращает ли запрос результаты, которые будут отображены в форме постобработки.

После нажатия кнопки “Test” система отправляет запрос с учетом всех введенных условий.
Если условия корректны — результат будет показан в поле “Response” (см. 3.14).
Если есть ошибка — результат может не отобразиться.

3.17. Поле "Response"

Поле (Рис. 2.(17)) отображает данные в формате JSON, которые вернулись после нажатия кнопки Test. Чтобы увидеть все содержимое поля — нажмите иконку для разворачивания или сворачивания .

Поле предназначено только для просмотра и не является редактируемым.

Каждое новое нажатие на кнопку “Test” обновляет содержимое поля.

Если запрос был корректным — отображаются объекты со значениями (Рис. 10).

*Рис. 10. Пример вывода значений в формате JSON в поле “Response”*

Эти значения затем отображаются в таблице формы постобработки (Рис. 11).

Form Table развернутый компонент.png — *Рис. 11. Вид компонента в форме постобработки в Workspace*

3.18. Блок "Action buttons"

Этот блок (Рис. 2.(18)) позволяет создать кнопки в таблице, которые будут размещены в указанных колонках.

Содержит поля:

Column name;
Action;
Button name;
Button color;
Variable.

Управление кнопками:

Add — добавляет кнопку в таблицу;
Cancel — отменяет действие.

Добавленные действия отображаются в виде меток под блоком (Рис. 12). Каждую можно отредактировать или удалить . При редактировании появляется кнопка Save, активная после внесения изменений.

Відображення доданих дій.jpg — *Рис. 12. Созданные действия*

3.19. Поле "Column name"

Колонка (Рис. 2.(19)), в которой будет отображаться кнопка. Может быть существующей или отдельной.

3.20. Поле "Action"

Название события (выход в схеме) (Рис. 2.(20)), активируемое при нажатии кнопки. Также используется как переменная для сохранения строки.

3.21. Поле "Button name"

Текст на кнопке (Рис. 2.(21)).

3.22. Поле "Color"

Цвет кнопки (Рис. 2.(22)), выбирается из списка (Рис. 13):

3.23. Переключатель "Break"

Переключатель (Рис. 2.(23)), определяющий, завершится ли выполнение схемы после этого шага.

– инициирует завершение выполнения схемы после этого компонента;
– переключатель выключен.

3.24. Элемент "Add limit"

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

Нажатие кнопки "Add limit" (Рис. 2.(24)) добавляет поле "Max" и кнопку "Delete limit" (Рис. 14). В поле "Max" указывается допустимое количество проходов.

Если количество проходов превышает значение в поле "Max", используется ветка "failover" (Рис. 15), которая появляется в блоке после установки лимита.

*Рис. 15. Отображение ветки "Failover" после установки лимита на компонент*

Нажатие кнопки "Delete limit" удаляет лимит и возвращает кнопку "Add limit".

3.25. Элемент "Add description"

Нажатие кнопки "Add description" (Рис. 2.(25)) добавляет поле "Description" и кнопку "Delete description" (Рис. 16).

В поле "Description" указывается комментарий к компоненту.

Нажатие кнопки "Delete description" удаляет описание и возвращает кнопку "Add description".

4. Отображение компонента в форме постобработки (Workspace)

В форме постобработки компонент “Form Table” отображается как раздел, который:

изначально свернут, если переключатель “Collapsed by default” не включён (Рис. 17);
или развёрнут, если переключатель “Collapsed by default” включён.

Form Table свернутый компонент в форме постобработки.png — *Рис. 17. Свернутый элемент "Form Table" в форме постобработки*

Чтобы развернуть таблицу в случае, когда она отображается свернутой, нажмите на иконку — после этого откроется таблица с данными (Рис. 18).

4.1. Содержимое таблицы

В таблице отображаются те колонки, которые были заданы в настройках схемы в блоке "Display columns" (см. раздел 3.6). Например, id и name.

4.2. Структура строк

Каждая строка содержит значения, соответствующие выбранным полям JSON-объекта, полученного в результате фильтрации.

4.3. Кнопка действия

Если настроены кнопки (через блок "Action buttons" (см. раздел 3.15)), в каждой строке отображается соответствующая кнопка (например, "CALL" или "CLICK"). Нажатие активирует событие в схеме, связанное с текущей строкой.