# Counter

> [HTML Version](counter.html)

This widget helps you to set up an indicator showing the number of current tasks, deals, leads, etc. that a particular system element stores.

To add the widget to a form, drag it from the side panel of the [interface designer](interface_designer.md) to the canvas or use the **+Widget** button. To learn more, see [Form templates](360029250931.md). Set up the widget in the window that opens.

## Main tab

**(counter1.png)**

- **Value**. Here you can set the numeric value of the counter manually. Alternatively, you can click on the link icon on the right side of the field and select a widget or app variable of the **Number** type. The value of the variable will determine the counter’s value.

- **Text**. In addition to the numeric value, you can add a caption to the indicator. You can do it in two ways: by entering the text manually or by clicking on the link icon on the right side of the field and selecting a **String** variable from the widget or app context. The value of the variable will determine the counter’s caption.

- **Color\***. Here you can choose the indicator’s color.

## Events tab

**(counter2.png)**

This tab allows you to customize the widget’s behavior by selecting functions from scripts that will be called when various events occur. **On mouse enter handler** and **On mouse leave handler** are available for any widget. Find out more in [System widget settings](common_widget_settings.md).

For the **Counter** widget, you can also set up:

- **Counter mouse enter handler**. It will occur when the user hovers over the counter. For example, you can customize the display of a pop-up window with a tooltip.

- **Counter mouse leave handler**. It will occur when the user moves the cursor outside the counter. For example, you can configure the closing of a window called earlier when was hovered over. 

It is recommended to configure these events in conjunction with each other.

## System tab

System settings are similar for all widgets. They allow you to set the widget’s visibility and access permissions, configure the widget’s behavior when the user hovers over it, etc. To learn more about these settings, see [System widget settings](common_widget_settings.md).

To finish configuration, click **Save**. To make the form available to users, click **Save** and **Publish** in the designer's toolbar.

## Example

In this example, the **Counter** is attached to the **New transactions** button and shows the total amount of new transactions.

**(Cou2.png)**