1. Описание

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

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

1. Верхняя панель (Рис.1(1));
2. Блок компонентов (Рис.1(2));
3. Пространство для построения схемы (Рис.1(3)).

Image RemovedImage Added

Рис. 1. Webitel Flow Diagram

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

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

(Рис.2):

1. Переключатель тем;
2. Инструмент редактирования;
3. Инструменты отмены действий;
4. Кнопка "Go to To start";
5. Кнопка "Jsonify to console";
6. Кнопка "Save";
7. Кнопка "Close".

Image RemovedImage Added

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

1.1.1. Переключатель тем

Доступны темная и светлая тема сайта.

Для изменения темы используется переключательImage Added, который находится в верхней части страницы. 

1.1.2. Инструмент редактирования

Предназначен для изменения названия  и тегов схемы. Представлен в виде кнопки Image Removed Image Added, при нажатии на которую открывается модальное окно "Update nameFlow settings" (Рис.3).

Image RemovedImage Added

Рис. 3. Модальное окно для изменения названия схемыFlow settings 

1.1.3. Инструменты отмены действий

Состоит из двух кнопок:
Image Added - возвращает на одно действие назад;

Image Added - возвращает одно действие вперед, в случае если пользователь нажимал кнопку Image Added. В противном случае, эта кнопка неактивна.

1.1.

4. Кнопка "

To start"

Нажатие кнопки "Go to start" возвращает схему в положение, когда компонент "Start" находится посредине пространства для построения схемы.

1.1.

5. Кнопка "Jsonify

"

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

1.1.

6. Кнопка "Save"

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

Если есть несохраненные данные, то кнопка окрашена в оранжевый цвет. 

Image RemovedImage Added

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

В случаях, когда во время работы в конструкторе исчезло соединения с сервером, после нажатия на кнопку "Save" открывается модальное окно "Save failed" (Рис.5).

Image Added

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

Кнопка "Retry" - повторная попытка сохранить изменения.

Кнопка "Export to json" - скачивание JSON-файла несохраненной схемы.

Кнопка " Close" - закрытия модального окна.

1.1.

7. Кнопка "Close"

Кнопка "Close" предназначена для закрытия схемы без сохранения изменений. . В случае, когда есть несохраненные изменения - кнопка "Save" активна, при нажатии на кнопку "Close" открывается модальное окно "Warning" (Рис.6).

Image Added

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

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

• Save - сохраняет изменения и закрывает редактор. Открывается страница "Схемы";
• Don't save - не сохраняет изменения и закрывает редактор. Открывается страница "Схемы";
• Cancel - отмена. Модальное окно закрывается. Можно продолжать работу в редакторе.

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

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

Список отображаемых компонентов зависит от типа схемы выбранного при её создании. В таблице ниже указанно какие компоненты доступны при разных типах (Таб.1).

*Общие - доступны во всех типах

• Broadcast message
• Calendar
• Callback Queue
• Custom code
• Execute
• Export variables
• Function
• Get Email
• Get Queue Agents
• Go to
• HTTP Request
• If
• List
• List Add
• Log
• Math
• Member info
• Patch Members
• Schema
• Script
• Send email
• Set variables
• Soft Sleep
• String
• Switch
• Unset variables
• User info

• Answer
• Bridge
• Classifier
• Conference
• Flush DTMF
• Generate Link
• Get Queue Agents
• Hangup
• In-band DTMF
• Join Agent
• Join Queue
• Mark IVR
• Park
• Playback
• Pre answer
• Record file
• Record session
• Ringback
• Ring ready
• Set Grantee
• Sip redirect
• Text-to-Speech
• Trigger
• Update Cid

• Classifier
• Generate Link
• Join Agent
• Join Queue
• Menu
• Recv Message
• Send file
• Send text
• Trigger

• Attempt Result
• Form Datetime Picker
• Form Rich Text Editor
• Form Select
• Form Text
• Form Textfield
• Generate Form

• Attempt Result

Таб. 1. Список компонентов согласно с типами схемы

При нажатии на кнопку Image Added вверху блока сворачивает список компонентов; кнопка Image Added разворачивает список компонентов. 

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

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

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

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

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

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

В правом нижнем углу находится мини-карта схемы для удобства пользования. Также доступна возможность изменять масштаб схемы. По умолчанию и после нажатия на Go to start –  масштаб равен 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. Примеры схем