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

  • On mouse enter handler. You can specify the widget’s behavior when the user hovers the mouse over it. For example, a pop-up window with a tip can open. To do this, you need to add a script. Click the Create button, enter a name for the script, and click Open. The Scripts tab where you can write the required script will open.
  • On mouse leave handler. You can specify the widget’s behavior when the user moves the mouse outside the counter. For example, the window that opened when the mouse was on the widget will now close. Just like for the On mouse enter handler, add a script. It is recommended to configure these two events in conjunction.

To learn more about context variables see Context types.

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