Low-Code Designer > Setting up interfaces > Widget types > Element Layout / Counter

Counter

This widget helps you to set up an indicator that shows the number of the current tasks, transactions, contracts, etc., in a particular app item.

To configure the widget, drag it to the canvas or click +Widget. Enter the settings in the pop-up window.

counter1

  • Value. Enter the number manually or click on the link button on the right side of the field and select a variable of the Number type. The value of the variable determines the counter value.
  • Text. In addition to the number value, you can add the text to the indicator. You can do it in two ways: enter the text manually or click on the link button on the right side of the field and select the String context variable. The value of the variable determines the counter text.
  • Color*. Here you can choose the indicator color.

counter2

  • On mouse enter handler. You can set an event that occurs when the user hovers the mouse over the counter. For example, a pop-up window with a tip will open. To do this, add the appropriate 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 set an event that will occur when the user moves the mouse outside the counter. For example, the window that was previously called upon hovering the cursor will close. Just like for the On mouse enter handler event, add a script. It is recommended to configure these events in conjunction.

Read more about context variables in this article.

The Hide, Read only, HTML styles, On mouse enter handler, On mouse leave handler settings are the system widget settings. Read more about them in this article.

To finish the configuration, click Save and Publish.

Use case