1. Опис

Графічний Low-Code редактор для створення схем, які можуть бути використані для будь-яких сценаріїв обслуговування.

Примечание!

Мінімальні вимоги до роздільної здатності екрана: 1280x768 і більше!

Представлений простором для побудови, а також:

1. Верхня панель (Рис. 1(1));

2. Блок компонентів (Рис. 1(2));

3. Простір побудови схеми (Рис. 1(3)).

Рис. 1. Webitel Flow Diagram

1.1. Верхня панель

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

1. Логотип (Рис. 2(1));

2. Перемикач тем (Рис. 2(2));

3. Інструмент редагування (Рис. 2(3));

4. Інструмент для упорядкування (Рис. 2(4));

5. Назва схеми (Рис. 2(5));

6. Кнопка "To start" (Рис. 2(6));

7. Кнопка "Jsonify"(Рис. 2(7));

8. Кнопка Save (Рис. 2(8));

9. Кнопка "Save as" - Інструмент редагування (Рис. 2(9));

10. Кнопка Close (Рис. 2(10));

11. Меню застосунків (Рис. 2(11));

12. Меню користувача (Рис. 2(12));

13. Вкладки (Рис. 2(13)).

Рис. 2. Верхня панель Webitel Flow Diagram

1.1.1. Логотип

Натискання на логотип перекладає стартову сторінку.

1.1.2. Перемикач тем

Доступні темна та світла тема сайту.

Для зміни теми використовується перемикач у верхній частині сторінки.

1.1.3. Інструмент редагування

Призначений для зміни назви та тегів схеми. Представлений кнопкою

, при натисканні яку відкривається модальне вікно "Flow settings" (Рис. 3).

Рис. 3. Модальне вікно "Flow settings"

1.1.4. Інструмент для упорядкування

Натиснення на кнопку

упорядковує розміщення компонентів схеми.

Якщо вибрано один або кілька компонентів у просторі для побудови схем, то біля інструмента для впорядкування відображається кнопка

. Натискання кнопки

видаляє вибрані компоненти.

1.1.5. Назва схеми

Тут відображається назва схеми. Змінити назву можна натиснувши кнопку

(Рис. 2(3)).

 1.1.6. Кнопка "To start"

Натискання кнопки

повертає схему в положення, коли компонент "Start" знаходиться всередині простору для побудови схеми.

1.1.7. Кнопка "Jsonify"

Кнопка

призначена для відображення json-коду, який відповідає створеній схемі, в консолі. Для перегляду необхідно відкрити консоль.

1.1.8. Кнопка Save

Кнопка

призначена для збереження змін у схемі.

У випадках, коли під час роботи в конструкторі зникло з'єднання із сервером, після натискання на кнопку

відкривається модальне вікно "Save failed" (Рис. 4).

Рис. 4. Модальне вікно "Save failed"

Кнопка "Retry" - це повторна спроба зберегти зміни.

Кнопка "Export to json" - завантаження JSON-файлу незбереженої схеми.

Кнопка "Close" – закриття модального вікна.

1.1.9. Кнопка "Save as"

Призначений для збереження копії даної схеми. При натисканні

відкривається модальне вікно "Flow settings" (Рис. 3), в якому можна змінити назву схеми й теги.

1.1.10. Кнопка "Close"

Кнопка

призначена для закриття схеми. Якщо є незбережені зміни — кнопка

активна, при натисканні на кнопку

відкривається модальне вікно "Warning" (Рис. 6).

Рис. 6. Модальне вікно "Warning"

Модальне вікно "Warning" складається з інформаційного повідомлення та кнопок:

• Save - зберігає зміни та закриває редактор. Відкривається сторінка "Схеми";

• Don't save - не зберігає зміни та закриває редактор. Відкривається сторінка "Схеми";

• Cancel – скасування. Модальне вікно зачиняється. Можна продовжувати роботу у редакторі.

1.1.11. Меню застосунків

Натискання на іконку

відкриває перелік застосунків, які доступні користувачеві (Рис. 6).

Рис. 6. Меню застосунків

1.1.12. Меню користувача

Натискання на іконку

відкриває меню користувача (Рис. 7), яке складається з таких елементів:

• Інформація про ім'я користувача;

• Документація — переводить на сторінку документації Webitel;

• Налаштування — перекладає на сторінку "Налаштування";

• Вихід — вихід із системи;

• Інформація про версію збірки.

Рис. 7. Меню користувача

1.1.13. Вкладки

Вкладки використовуються для зручнішого виконання великих схем.

- головна вкладка. Видалення цієї вкладки недоступне.

Натискання кнопки

додає нову вкладку. Щоб змінити назву доданої вкладки, встановіть курсор у полі назви та введіть зміни.

- неосновна вкладка.

- з'являється під час наведення курсора на вкладку. Натискання цієї кнопки відкриває модальне вікно для підтвердження видалення цієї вкладки.

1.2. Ліва панель

Складається з таких вкладок:

1. Блок компонентів;

2. Реєстр тегів

- згортає ліву панель.

- розвертає ліву панель.

1.2.1. Блок компонентів

У цьому блоці відображається перелік компонентів, з яких можна створювати схеми, та поле пошуку.

Список компонентів, що відображаються, залежить від типу схеми обраного при її створенні. Вгорі списку відображається тип схеми.

Існують такі компоненти:

Компонент "Start" може бути лише один і при створенні нової схеми знаходиться у просторі для побудови схеми. Є стартом схеми.

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

1.2.2. Реєстр тегів

Складається з поля пошуку, кнопки для сортування та списку записів тегів.

- вибір опцій для сортування.

Доступне сортування:

• в алфавітному порядку;

• сортування за валідацією – першими відображаються ті компоненти, у яких некоректно задані налаштування у правій панелі.

 - позначає наявність некоректно заданих налаштувань даного компонента.

Натискання на запис відкриває у просторі для побудови схем вкладку з цим компонентом. Під час запису реєстру відображається кнопка 

, яка використовується для зміни назви запису.

1.3. Простір для побудови схеми

Є основним робочим простором.

Щоб вибрати кілька компонентів, необхідно утримувати кнопку Ctrl. Утримування Ctrl дає змогу переміщати вибрані блоки компонентів.

Для користувачів MacOS для виділення та перетаскування елементів використовували кнопку Command.

За допомогою натискання правої кнопки миші на блок компонента можна клонувати, або видалити, вибраний блок.

За допомогою коліщатка мишки можна змінювати масштаб побудованої схеми.

У правому нижньому кутку знаходиться мінікарта схеми для зручності користування. Також є можливість змінювати масштаб схеми. За замовчуванням та після натискання на

– масштаб дорівнює 50%.

2. Можливості

2.1. Додавання компонентів у схему

3. Додаткові матеріали

3.1. Інструкції

Приклади схем: