Elements of the UI
Introduction
EI-Flow Web application runs inside a browser's page. The elements of the UI are described below, but see also the article about moving around and perform operations with UI elements.
Main pages
EI-Flow UI is organized in the following main pages:
| Page | Icon | Description |
|---|---|---|
| Login | N/A | The initial page where you can log in. |
| Projects |  |
Where you manage projects. |
| Workflows |  |
Where you manage public workflows. |
| Runtimes |  |
Where you manage runtime items. |
| Models |  |
Where you manage public models. |
| API keys |  |
Where you manage publi API keys. |
| Administration | N/A | Available only to users with an Admin or Owner role. It's the page where you manage accounts and groups. |
| Custom components |  |
Where you manage custom workflow components. |
| JavaScript templates |  |
Where you can explore JavaScript templates that can be used in worflows. |
| Labels |  |
Where you manage labels. |
Workspaces
Workspaces are very dynamic pages where you manage the details and the operation of a complex object.
There are two types of workspaces in EI-Flow UI:
- Project workspace
- Workflow workspace
In the project workspace you can find everything you need to manage a project.
The workflows workspace is the place where you edit and test a workflow.
User menu
The user menu is associated with the user's initials icon button of the top toolbar in every page. It gives access to the Administration page and to general commands.
Lists
You can find lists of objects—projects, workflows, models, etc.—in many places inside EI-Flow UI. There are two types of lists: tables and card lists.
Info
Sometimes you can find the number of items displayed above the list.
Tables have rows and columns while card lists are made of cards, that is boxes containing several pieces of information about an object. Card lists can have a grid or vertical (single column) layout.
Sort controls
A table can be sorted on the values of a column when there is a triangle icon beside the name of the column.
Card lists typically have two controls above them that allow sorting:
- A toggle switch the determines the direction os the sorting, that is ascending or descending
- A paired drop-down list that determines the property of the object on which the list is sorted.
Filter controls
Filter controls are typically located immediately above the list and can be:
- Checkboxes and tabs: when checked, only objects with the corresponding property or feature are shown.
- Drop-down lists: they refer to a property or feature of the listed objects. They can allow single or multiple selection, done with clicks or checkboxes. The list is filtered to show only objects with the corresponding property or feature set to the selected value(s).
- Search boxes: they allow to display only items with one or more property—for example, the object name—matching the search criterion.
Pop-ups
EI-Flow UI makes use of pop-ups, that is boxes with text and graphics that are displayed on top of the other contents of the page for a limited time or for a required interaction with the user. For example, pop-up messages can appear when editing a workflow, to notify you about events or situations.
Dialogs
A dialog is a kind of pop-up that doesn't go away until you move the focus elsewhere or interact with it. It can simply display information or allow/require input.
Examples:
- The user menu.
- When you delete a workflow, a dialog appears asking for confirmation.
- In the workflow editor, if you double-clik a block in the diagram, a dialog with all the properties of the blocks appears.
- Again in the workflow editor, if you hover over a component with multiple versions, a dialog appears showing component details and allowing you to choose a specific version of it.
Wizards
EI-Flow UI uses wizards.
Wizards are multi-window dialogs that guide you through a complex task. Each dialog corresponds to a step of the task.
Dialogs provide controls to go to the next step or back to the previous.
Examples are the workflow creation wizard and the workflow publication wizard.
Toolbars
Toolbars are very common in EI-Flow UI. They are horizontal or verticals strips of buttons and other types of controls. Every page of EI-Flow UI apart from the login page has a top toolbar, while more toolbar can be present based on the context. Some controls of the top toolbar, like the Expert.ai icon button and the user's initials icon button are are always present while other controls vary from page to page.
Tooltips
A tooltip is a small pop-up that gives information about a graphical element of the UI when you hover over it.