Webitel: Documentation

Form Select

1. Description

The component is designed to add a dropdown list to a dynamic page (Form).

This component is present in flow types like:

  • Forms.

The block (Fig.1(1)) is used in space to build the Flow. The settings panel for this component opens (Fig.1(2)) when you click on the block.

image-20250424-191644.png
Fig.1. Form Select component

1.1. Form Select block

The block consists of the following elements:

  1. The name of the component;

  2. In branch — receiving (connecting with the previous block) branch;

  3. Out branch — outgoing (connecting with the following block) branch. When hovering over the Out field, a switch appears. The switch allows this component to be connected to a component that already has a connection.

The presence of an 109ece9b-a615-4e9a-8feb-4572affaa9dc icon indicates that the switch is on, and this component can be connected to a component that already has a connection.

Changing the switch position removes the outgoing branch of this component.

The 2e1f33e5-b3bc-412d-bde8-18ed2572556e button deletes the block from the Flow Schema.

1.2. Form Select settings panel

It consists of the following elements:

  1. Id;

  2. View;

  3. Options;

  4. Multiple;

  5. Break;

  6. Limit;

  7. Add description.

1.2.1. Id

Here, you enter the name* (unique within the Flow) – a service name that is not displayed on the page. It is used as a variable for further access to values.

1.2.2. View

It is designed to customize the view.

It consists of the following field:

  1. Initial value;

  2. Label;

  3. Hint.

1.2.2.1. Initial value

In this field, you can specify a value that will be automatically selected when the form is opened.
If a value from the existing Options is passed to the value field, the system will automatically display the corresponding item. Even if no change is initiated by the user, the system will save the selected result and store the key in the variable defined in the Id field.

1.2.2.2. Label

You can enter a mark in this field.

1.2.2.3. Hint

You can enter a hint in this field.

1.2.3. Options

It is designed to add options to the dropdown list.

It consists of the following field:

  1. Options source;

  2. Options input.

1.2.3.1. Options source

Here, you choose the type of option source.

Only the input type is currently available — manual options input.

The ability to set options through a variable is under development.

1.2.3.2. Options input

It is designed for manual input of options.

A row is added when you click on the Add button. The row consists of (Fig. 2):

Options input.png

Fig. 2. Options input

  • Key — what is displayed to the agent;

  • Value — what is stored in the Form;

  • Remove tool — to remove a row.

1.2.4. Multiple

It defines the ability to select one or more options in the drop-down list:

image2024-1-26_13-47-15.png  — only one option can be chosen;

image2024-1-26_13-47-47.png  — you can choose several options.

1.2.5. Break

Responsible for the completion of the flow execution.

  • image-20250627-120834.png — initiates the end of the flow execution after the given component.

  • image-20250627-120816.png — the switch is in the off position.

1.2.6. Limit

It is intended to determine the maximum number of passes through this component.

The failover branch appears in the edited component when the limit is set image2024-1-26_12-1-12.png .

The failover branch will be used if more passes are passed through the component than entered in the Max field.

Clicking on the Add Limit button adds a Max field and a Delete limit button.

The number of possible passes is indicated in the Max field.

Clicking on the Delete limit button removes the limit and returns the Add limit button.

Limit.png


Fig. 3. Setting a limit

1.2.7. Add description

When you click the Add description button, a Description field and a Delete description button will be added.

The Description field is used to add comments to the component.

Clicking the Delete description button removes the description field and brings back the Add description button.

Description.png

Fig. 4. Add description