Low-code designer > Set up interfaces > Widget types > Element layout / Counter

Counter

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 to the canvas or use the +Widget button. To learn more, see Form templates. Set up the widget in the window that opens.

Main tab

counter1

  • 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

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.

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.

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