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. Read more in the Form templates article. 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.

Read more about context variables in the Context types article.

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. Read more about these settings in the System widget settings article.

To finish configuring the widget, click Save and then Publish on the interface designer toolbar.

Example

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

Cou2

Found a typo? Highlight the text, press ctrl + enter and notify us