Webitel Flow Diagram

1. Description

A graphical Low-Code editor for creating Flows that can be used for any maintenance scenario.

Represented by space to build, as well as:

1. Top bar (Fig.1(1));

2. Left panel (Fig.1(2));

3. Space for building (Fig.1(3)).

Fig. 1. Webitel Flow Diagram

1.1. Top bar

This bar displays the name of the Flow and also contains the following elements:

1. Logo (Fig. 2(1));

2. Design theme switch (Fig. 2(2));

3. Edit tool (Fig. 2(3));

4. Arrange (Fig. 2(4));

5. Flow Schema name (Fig. 2(5));

6. To start (Fig. 2(6));

7. JSONIFI (Fig. 2(7));

8. Save (Fig. 2(8));

9. Save as (Fig. 2(9));

10. Close (Fig. 2(10));

11. Application menu (Fig. 2(11));

12. User menu (Fig. 2(13));

13. Tabs (Fig. 2(13)).

Fig. 2. Top bar

1.1.1. Logo

Clicking on the logo opens the start page.

1.1.2. Design theme switch

Dark and light website design mode are available.

Use the   switch at the top of the page to change the theme.

1.1.3. Edit tool

It is designed to change the name and the tags of the Flow.

Click the button opens the Flow settings modal window (Fig. 3).

Fig. 3. Flow settings modal window

1.1.4. Arrange 

Clicking the button arranges the components of the Flow Schema.

1.1.5. Flow Scheme name

The scheme name is displayed here. You can change the name by clicking on the button (Fig. 2(3)).

1.1.6. To start

Clicking the  button returns the schematic to where the Start component is in the middle of the space for the build.

1.1.7. JSONIFY

The button is designed to display the JSON code that matches the generated flow schema in the console. To view it, you need to open the console.

1.1.8. Save

It is designed to save changes in the Flow Schema.

The Save failed modal window opens (Fig. 4) when the connection with the server disappears during the work in the constructor after clicking on the button.

Fig. 5. Save failed modal window

Retry button - repeated attempt to save changes.

Export to JSON button - downloading a JSON file of an unsaved schema.

Close button - closing the modal window.

1.1.9. Save as

It is designed to save a copy of the current Flow Schema. When clicking on , a modal window "Flow settings" (Fig. 3) opens, where you can change the Flow Schema's name and tags.

1.1.10. Close

When there are unsaved changes, the Save button is active, and when you click on the  button, the Warning modal window opens (Fig. 5).

Fig. 5. Warning modal window

The Warning modal window consists of an informational notification and buttons:

• Save - saves changes and closes the editor. The Flow page opens;

• Don't save - does not save changes and closes the editor. The Flow page opens;

• Cancel - cancel closing the editor. The modal window closes. You can continue working in the editor.

1.1.11. Application menu

Clicking on the   icon opens a list of available applications (Fig. 6). 

Fig. 6. Webitel applications

1.5. User menu

Clicking on the  icon opens the user menu (Fig. 7), which consists of:

• Username information;

• Docs - takes you to the Webitel documentation page;

• Settings - takes you to the Settings page;

• Logout - exit the system;

• Assembly version information.

Fig. 7. User menu

1.1.13. Tabs

Tabs are used for more convenient handling of large Flow Schema.

- main tab. Deleting this tab is not available.

Clicking the button adds a new tab. To change the name of an added tab, place the cursor in the name field and enter the new name.

- non-main tab.

- appears when hovering the cursor over the tab. Clicking this button opens a modal window to confirm the deletion of the tab.

1.2. Left Panel

Consists of the following tabs:

1. Bar of components

2. Tag registry

- collapses the left panel.

- expands the left panel.

1.2.1. Bar of components

This bar displays a list of components from which you can create Flow Schemes and a search field. The Flow Schema type is displayed at the top of the bar.

The list of displayed components depends on the type of Flow Schema selected when creating it. 

There are such components:

Each component has its settings bar.

The setting bar opens on the right side of the page when you click a component block in the space for building.

1.2.2. Tag Registry

Consists of a search field, a button for sorting, and a list of tag entries.

- sorting options.

Available sorting options:

• Alphabetical order;

• Sorting by validation — components with incorrect settings in the right panel are displayed first.

- indicates that there are incorrect settings for this component.

Clicking on an entry opens a tab with the component in the building space. When hovering over a registry entry, a button appears, which is used to change the entry name.

1.3. Space for building

This is the main workspace for building a Flow.

To select multiple components, you need to hold down the Ctrl key. Holding Ctrl allows you to move the selected component blocks.

You can clone or delete the selected block by right-clicking on a component block.

You can change the scale of the constructed flow using the mouse wheel.

In the lower right corner is a mini-map of the scheme with a zoom scale for ease of use. The scale is 50% by default and after clicking on button.

2. Opportunities

2.1. Add a Component to a Flow

3. Additional materials

3.1. Instructions

3.1.1. Flow examples