Webitel Flow Diagram

Owned by Olesya Tantsyura
Last updated: Dec 10, 2024
10 min read

1. Description

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

Note

Minimum screen resolution requirements: 1280×768 or more!

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.

 

If one or more components are selected in the space for building, a  button appears next to the arrange tool. Clicking the  button deletes the selected components.

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:

There can be only one Start component, and when creating a new Flow, it is located in the space for building. It is the start of the Flow.

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

Goal

Add a Component to a Flow

Goal

Add a Component to a Flow

Preconditions

  1. Access to the Admin application;

  2. Access to the Flow section in the Admin application;

  3. Permission to create in the Flow section.

Steps

 

  1. Open Webitel Flow Diagram - create a new Flow or edit an existing one.

  2. Please select the required component in the components bar by clicking the left mouse button. A component block appears in the middle of the space for a building.

  3. Connect the out branch of the block, whose conditions must be fulfilled first, with the in branch of the block, the condition of which must be fulfilled next.

  4. Left-click on the added block. The settings bar for this component opens. The component settings bar can be viewed on the page of a specific component.

  5. Enter the required data.

  6. Click the

    button.

Result

Data saved. The component is added to the Flow.

3. Additional materials

3.1. Instructions

3.1.1. Flow examples

 

Англійська

Положення діалогуСтандартніПраворучЛіворучПоради32Бали за текст91Ретельний режимІгнорувати в цьому текстіГраматичнаFlowsПоказати в текстіA graphical Low-Code editor for creating Flows that can be used for any maintenance scenario.flowsOnly proper nouns start with an uppercase character (there are exceptions for headlines).Відключити правило всюдиІгнорувати в цьому текстіПунктуаційнаDiagramПоказати в текстіFig. 1. Webitel Flow DiagramDiagram.Diagram!Diagram?Diagram:Diagram,Please add a punctuation mark at the end of paragraph.Відключити правило всюдиІгнорувати в цьому текстіОрфографічнаJSONIFIПоказати в текстіJSONIFI (Fig. 2(7));JSON IFIPossible spelling mistake found.додати "JSONIFI" до персонального словникаІгнорувати в цьому текстіПунктуаційнаbarПоказати в текстіFig. 2. Top barbar.bar!bar?bar:bar,Please add a punctuation mark at the end of paragraph.Відключити правило всюдиІгнорувати в цьому текстіПунктуаційнаwindowПоказати в текстіFig. 3. Flow settings modal windowwindow.window!window?window:window,Please add a punctuation mark at the end of paragraph.Відключити правило всюдиІгнорувати в цьому текстіГраматичнаarrangeПоказати в тексті...d in the space for building, a ⁣ button appears next to the arrange tool. Clicking the ⁣ button deletes the selected components...arrangementThe word ‘arrange’ is not a noun. Did you mean “arrangement”?Відключити правило всюдиІгнорувати в цьому текстіПунктуаційнаwindowПоказати в текстіFig. 5. Save failed modal windowwindow.window!window?window:window,Please add a punctuation mark at the end of paragraph.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіRetry button - repeated attempt to save changes. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіExport to JSON button - downloading a JSON file of an unsaved schema. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіClose button - closing the modal window. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіSmart quotes"Flow settings"Показати в тексті...the current Flow Schema. When clicking on ⁣, a modal window "Flow settings" (Fig. 3) opens, where you can change the Flow Schema's name...“Flow settings”Consider using typographic quotation marks here.Відключити правило всюдиІгнорувати в цьому текстіГраматичнаWarningПоказати в тексті...e button is active, and when you click on the ⁣ button, the Warning modal window opens (Fig. 5).warningOnly proper nouns start with an uppercase character (there are exceptions for headlines).Відключити правило всюдиІгнорувати в цьому текстіПунктуаційнаwindowПоказати в текстіFig. 5. Warning modal windowwindow.window!window?window:window,Please add a punctuation mark at the end of paragraph.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіSave - saves changes and closes the editor. The Flow page opens; — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіDon't save - does not save changes and closes the editor. The Flow page... — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіCancel - cancel closing the editor. The modal window closes. You can... — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіПунктуаційнаapplicationsПоказати в текстіFig. 6. Webitel applicationsapplications.applications!applications?applications:applications,Please add a punctuation mark at the end of paragraph.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіDocs - takes you to the Webitel documentation page; — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіSettings - takes you to the Settings page; — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіLogout - exit the system; — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіПунктуаційнаmenuПоказати в текстіFig. 7. User menumenu.menu!menu?menu:menu,Please add a punctuation mark at the end of paragraph.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в тексті - main tab. Deleting this tab is not available. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в тексті - non-main tab. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в тексті - appears when hovering the cursor over the tab. Clicking this... — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в тексті - collapses the left panel. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в тексті - expands the left panel. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіГраматичнаStartПоказати в текстіThere can be only one Start component, and when creating a new Flow, it is located in t...startOnly proper nouns start with an uppercase character (there are exceptions for headlines).Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в тексті - sorting options. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в тексті - indicates that there are incorrect settings for this compone... — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиІгнорувати в цьому текстіГраматичнаMacOSПоказати в текстіFor MacOS users, the Command key is used to select and drag component...macOSThe operating system from Apple is written “macOS”.Відключити правило всюдиІгнорувати в цьому текстіГраматичнаlower rightПоказати в текстіIn the lower right corner is a mini-map of the scheme with a zoom scale for ea...lower-rightConsider adding a hyphen.Відключити правило всюдиІгнорувати в цьому текстіEm dash - Показати в текстіOpen Webitel Flow Diagram - create a new Flow or edit an existing one. — —: To join two clauses or introduce examples, consider using an em dash.Відключити правило всюдиСимволів: 6 664

ДовідкаПерейти до довідкового центруНадіслати відгукСтатистика використанняВимкнути перевіркуВідключити тільки до наступного разуВідключити на цьому вебсайтіНалаштуванняResults are incomplete: Text checking was stopped due to too many errors.