Webitel Flow Diagram

1. Описание

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

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

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

2. Левая панель (Рис.1(2));

3. Пространство для построения схемы (Рис.1(3)).

Рис. 1. Webitel Flow Diagram

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

В этой панели отображается название схемы, а также присутствуют такие элементы (Рис.2):

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

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

3. Инструмент редактирования (Рис.1(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. Вкладки (Рис.1(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" (Рис. 5).

Рис. 5. Модальное окно "Warning"

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

• Save - сохраняет изменения и закрывает редактор. Открывается страница "Схемы";

• Don't save - не сохраняет изменения, и закрывает редактор. Открывается страница "Схемы";

• Cancel - отмена. Модальное окно закрывается. Можно продолжать работу в редакторе.

1.1.11. Меню приложений 

Нажатие на иконку   открывает перечень приложений, которые доступны пользователю (Рис. 6).

Рис. 6. Меню приложений Webitel

1.1.12. Меню пользователя

Нажатие на иконку   открывает меню пользователя (Рис. 7), которое состоит из: 

• Информация об имени пользователя;

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

• Настройки — переводит на страницу "Настройки";

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

• Информация о версии сборки.

Рис. 7. Меню пользователя

1.1.13. Вкладки

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

- главная вкладка. Удаления этой вкладки недоступно.

Нажатье на кнопку добавляет новую вкладку. Для изменения названий добавленной вкладки установите в поле названия курсор и введите изменения.

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

- появляется при наведении курсора на вкладку. Нажатие на эту кнопку открывает модальное окно для подтверждения удаления данной вкладки.

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

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

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

2. Реестр тегов.

- сворачивает левую панель.

- разворачивает левую панель.

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

В этом блоке отображается перечень компонентов, из которых можно создавать схемы, и поле поиска.

Список отображаемых компонентов зависит от типа схемы выбранного при её создании. Вверху списка отображается тип схемы.

Существуют такие компоненты:

У каждого компонента есть своя панель настроек. Эта панель открывается в правой части страницы при нажатии на компонент, который находится в пространстве для построения схемы. Больше информации можно посмотреть на странице конкретного компонента.

1.2.2. Реестр тегов

Состоит из поля поиска, кнопки для сортирования и списка записей тегов.

- выбор опций для сортирования. Доступно сортирование:

• в алфавитном порядке;

• сортирование по валидации — первыми отображаются те компоненты у которых некорректно заданы настройки в правой панели. 

- обозначает наличие некорректно заданных настроек для данного компонента. 

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

1.3. Пространство для построения схемы

Является основным рабочим пространством. 

Для выбора нескольких компонентов необходимо удерживать кнопку Ctrl. Удерживание Ctrl позволяет перемещать выбранные блоки компонентов.

С помощью колесика мышки можно менять масштаб построенной схемы.

В правом нижнем углу находится уменьшенная версия карты схемы для удобства пользования. Также доступна возможность изменять масштаб схемы. По умолчанию и после нажатия на кнопку –  масштаб равен 50%.

2. Возможности

2.1. Добавление компонента в схему

3. Дополнительные материалы

3.1. Обучающее видео

3.1.1. Создание схемы маршрутизации

В данном видео вы узнаете, как создать первую схему маршрутизации и познакомитесь с 10 базовыми компонентами, а именно:

• Set variables;

• Export variables;

• Unset variables;

• String;

• Math;

• Log;

• Soft Sleep;

• If:

• Switch;

• Go to.

3.2. Инструкции

3.2.1. Примеры схем