Webitel Flow Diagram

Owned by Olesya Tantsyura
Last updated: Sept 18, 2023
4 min read

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. Кнопка "To start";
  4. Кнопка "Jsonify";
  5. Кнопка Save;
  6. Кнопка Close.

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

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

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

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

1.1.2. Інструменти скасування дій

Складається із двох кнопок:
 - повертає на одну дію назад;

- повертає одну дію вперед, якщо користувач натиснув кнопку . Інакше ця кнопка неактивна.

Кількість доступних для скасування дій – 100.

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

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

1.1.4. Кнопка "Jsonify"

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

1.1.5. Кнопка Save

Призначена для збереження змін у схемі. При натисканні стрілочки відкривається можливість вибрати варіант Save as (Рис.4). При виборі "Save as" відкривається модальне вікно "Flow settings" (Рис.3), в якому можна змінити назву схеми.

Якщо є незбережені дані, кнопка пофарбована в помаранчевий колір.

Рис. 4. Кнопка "Save"

У випадках, коли під час роботи в конструкторі зникло з'єднання з сервером, після натискання на кнопку "Save" відкривається модальне вікно "Save failed" (Рис.5).

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

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

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

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

1.1.6. Кнопка "Close"

Клавіша "Close" призначена для закриття схеми. Якщо є незбережені зміни - кнопка "Save" активна, при натисканні на кнопку "Close" відкривається модальне вікно "Warning" (Рис.6).

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

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

  • Save - зберігає зміни та закриває редактор. Відкривається сторінка "Схеми";
  • Don't save - не зберігає зміни та закриває редактор. Відкривається сторінка "Схеми";
  • Cancel – скасування. Модальне вікно зачиняється. Можна продовжувати роботу у редакторі.

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

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

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

Компоненти:

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

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

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

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

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

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

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

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

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

ЦільДодати компонент до схеми
Передумови
  1. Доступ до застосунку "Admin";
  2. Доступ до розділу "Схеми" в Admin;
  3. Дозвіл на перегляд и редагування у розділі "Схеми";
  4. Наявність щонайменше однієї схеми типу діаграма.

Сценарій:


  1. Знайти схему (з типом діаграма), яку необхідно редагувати.
  2. Натиснути кнопку редагування в записі цієї схеми. Відкривається графічний редактор із схемою.
  3. Вибрати необхідний компонент у блоці компонентів натисканням лівої кнопки мишки та, утримуючи,
  4. перетягнути в поле для побудови схеми.
  5. З'єднати гілку "out" блоку, умови якого повинні виконуватися першими, з гілкою "in" блоку, умова якого повинні виконуватися другими.
  6. Натиснути на блок доданого в схему компонента. Відкривається панель налаштувань цього компонента. Панель параметрів компонента можна переглянути на сторінці конкретного компонента.
  7. Внести потрібні дані.
  8. Натисніть кнопку Save (Зберегти).

Результат

Компонент додано до схеми.

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

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

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