- Manufacturing
- Anywhere Mobility Studio
- Activities
For each process, you can set up a counter that is shown on the process tile on a menu.
A counter can give information on, for example, the workload or the escalation level of the process.
To set up a counter, you need a:
- Query to get the relevant data.
- CSS class to define the appearance of the counter on the process tile on the menu.
These predefined counter CSS classes are available:
- CounterLeftBottom (UI_Anywhere_Counter-leftBottom)
CounterLeftTop (UI_Anywhere_Counter-leftTop)
CounterRightBottom (UI_Anywhere_Counter-rightBottom)
CounterRightTop (UI_Anywhere_Counter-rightTop)
These CSS classes show a small counter number on the process tile. The counter number is shown in one of the corners of the tile.
Example CounterLeftTop:
- CounterLargeCentre (UI_Anywhere_Counter-large)
Shows a big counter number centered on the process tile.
Example:
- CounterAnalog(UI_Anywhere_Counter-analog)
Shows both a counter number and a gauge on the process tile. The gauge shows the counted number expressed in a percentage. The percentage is calculated based on the counter range.
For the gauge to work properly, you must enter this in the Custom style attributes field: counterRangeColors(#56d134, #eae43a, #d62828) counterRange(0, 100)
By default, the counter range is set to 0, 100. You can change these range numbers. In the example, the colors to be shown on the gauge are green, yellow, and red. You can change these colors to any color (in HEX code).
Example:
Standard procedure
1. |
Click Mobility design. |
2. |
Click the Processes tab. |
3. |
In the list, find and select the desired record. |
4. |
Click Edit. |
5. |
Click the General tab. |
6. |
Select Yes in the Use counters field. |
7. |
Define the query to get the data for the counter. |
  |
In the Query for counters field, enter or select a value. |
8. |
Define the CSS class to define the appearance of the counter on the process tile on the menu. |
  |
In the CSS for counters field, enter or select a value. |
9. |
If the counter CSS class is CounterAnalog, define the custom style attributes. You can define the gauge colors and counter range. Example: counterRangeColors(#56d134, #eae43a, #d62828) counterRange(0, 100) |
  |
In the Custom style attributes field, type a value. |
10. |
Close the page. |