Компонент "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.(6)) налаштовуються колонки, які відображатимуться у таблиці:

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). Після цього стає доступною іконка для її видалення.

*Рис. 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).

Відкрийте інструменти розробника (“DevTools”) та перейдіть на вкладку “Network” (Рис. 5).

*Рис. 5. Вкладка “Network“ в інструменті DevTools*

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

*Рис. 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.15).
Якщо є помилка, результат може не відобразитися.

3.17. Поле "Response"

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

Поле слугує лише для перегляду та не є редагованим.

Кожне нове натискання на кнопку “Test” оновлює вміст поля.

Якщо запит був коректним — відображаються об’єкти зі значеннями (Рис. 10).

*Рис. 10. Приклад виведення значень у форматі JSON у полі “Response“*

Ці значення потім підставляються у таблицю у формі постобробки (Рис. 11).

*Рис. 11. Вигляд компонента у формі постобробки у Workspace*

3.18. Блок "Action buttons"

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

Містить поля:

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

Кнопки керування:

Add — додає кнопку до таблиці;
Cancel — скасовує дію.

Додані дії відображаються у вигляді позначок під блоком (Рис. 14). На кожну з них можна натиснути для редагування або видалити . При редагуванні з’являється кнопка 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" (Рис. 18).

У полі "Description" вказується опис — коментар до компонента.

Натискання на кнопку "Delete description" видаляє опис, повертаючи кнопку "Add description".

4. Відображення компонента у формі постобробки (Workspace)

У формі постобробки компонент "Form Table" відображається як розділ, який:

спочатку згорнутий, якщо перемикач “Collapsed by default” не увімкнено (Рис. 17);
або розгорнутий, якщо перемикач “Collapsed by default” увімкнено.

*Рис. 17. Згорнутий елемент "Form Table" у формі постобробки*

Щоб розгорнути таблицю у випадку, коли вона відображається згорнутою, натисніть на іконку — після цього відкриється таблиця з даними (Рис. 18).

*Рис. 18. Розгорнутий елемент "Form Table" у формі постобробки*

4.1. Вміст таблиці

У таблиці відображаються ті колонки, які були задані в налаштуваннях схеми через блок “Display columns” (див. розділ 3.6). Наприклад, id та name.

4.2. Структура рядків

Кожен рядок містить значення, які відповідають обраним полям JSON-об’єкта, що надійшов у результаті фільтрації.

4.3. Кнопка дії

Якщо налаштовано кнопки (через блок “Action buttons” (див. розділ 3.18)), у кожному рядку буде також відображатися відповідна кнопка (наприклад, “CALL” або “CLICK”). Її натискання викликає в схемі подію, пов’язану з поточним рядком.