FROM RELEASE 3.34
It is possible to setup thresholds for values in table columns in the supervisor.
The mechanism to perform this involves a combination of setting the threshold values - i.e. setting up values to go into "buckets", and then configuring CSS styles to color these elements.
Example
To make our example easy to understand, we will take the Availability and Service Level counters from the ACD groups.
We want the service level to be colored green when it is 80% or above, yellow when it is 60% or above and red otherwise.
Buckets
The first step is to define buckets into which values are placed. Each bucket will ultimately be used to define the CSS used (e.g. for foreground and background colors) with which the value will be rendered.
Tip
CSS experts: you can add whatever you want including animations and effects.
The number of buckets you configure is not restricted, however, to keep the CSS simple, we will consider three buckets in the following examples.
The CSS definition which will be used by each bucket is shown in the table below. (We will see how to apply this later).
Bucket | Colouring | CSS Definition |
---|---|---|
0 | Green | background-color: #169A13; |
1 | Yellow | background-color: #FCC10F; |
2 | Red | background-color: #BB0F18; |
Example
The following shows an example of values rendered using the three definitions above:
Bucket Definition
First of all, we will consider a three bucket definition using the buckets 0, 1 and 2 above (green, yellow, red - like a traffic light).
A bucket definition is a comma separated list of integers. The first value in the list is bucket 0, and so on.
When the system renders a value in a column, in order to decide what CSS rules to apply, it compares the value with the threshold all of the buckets defined using the following algorithm:
Bucket Algorithm
- A value can be put into a bucket if it is greater than or equal to the threshold value of the bucket.
- The value is placed in the bucket with the highest threshold possible.
- All of the defined buckets are processed from left to right - hence the value actually goes into the last bucket whose threshold is greater or equal to any previous threshold.
For our example, the bucket definition 80,60,0 can be used - defining three buckets with thresholds of 80, 60 and 0 respectively.
- If the value is >= 80 it will be placed in bucket 0. Whilst it could fit into all buckets, the bucket with the highest threshold is bucket 0, and this one will "win".
- If the value is >= 60 but < 80, it will be placed in bucket 1. If could fit into buckets 1 or 2, but bucket 1 hast the highest threshold and will "win".
- If the value is < 60 it can only fit into the third bucket.
Note: in our example if the value was negative, it would not fit into any bucket and no CSS rules would be applied.
Since a service level should never be less than 0, this will not matter.
However, the principle of not having a bucket which fits a value can be used safely - if a value is not placed in a bucket, no CSS rules will be applied and the value will appear as usual (black text on the grey zebra striped background).
Attaching Buckets to Columns
Buckets are attached to columns, by defining:
- A User Setting (these can be defined by each user individually in User Master Data)
- An ACD Group Parameter (only used for values associated with ACD Groups - in the ACD Groups ... Parameters Tab for each ACD Group individually).
- A Client Parameter setting (these can be defined for the client account as a whole in Client Master Data)
The order of processing is as follows:
- If the user has defined a setting, use this setting.
- Otherwise: If the value is associated with an ACD group, check the ACD group parameters and use the setting if found.
- Otherwise: Check the Client Parameters and use this setting if found.
- Otherwise: no setting is configured, no processing will occur.
The actual settings required are documented in the table further below.
For our example, we need to configure the settings:
- Thresholds.AcdSupervisor.InboundStatus.Realtime.ServiceLevelAvailability
- Thresholds.AcdSupervisor.InboundStatus.Realtime.ServiceLevelInService
- Thresholds.AcdSupervisor.InboundStatus.Statistics.ServiceLevelAvailability
- Thresholds.AcdSupervisor.InboundStatus.Statistics.ServiceLevelInService
For example, here the 4 example settings are shown configured in the User Settings for the logged in user:
Columns
The columns which are available to be highlighted are shown in the supervisor with a grey bar underneath them.
Example - here the Agent Status Duration column is available.
When you mouse over the column, you are shown the relevant settings:
Threshold
This is the name of the setting required - see the previous section on how to create the settings.
CSS
This is the name of the CSS definition required. You will use this further below.
ID
This is the associated ID for the CSS setting.
The purpose of the ID is to enable different coloring for different rows of data.
Example:
- Assume that you want to highlight the Agent Status Duration column
- You might want to color the agent status duration only for the "Pause" status if it is longer than a certain time.
- The ID of the standard Pause status in the system is 2 - so you would use the fact that AcdAgentStatusID = 2 for Pause to achieve this
Special Columns
This section documents some columns which have special behaviour.
Column | Notes |
---|---|
Busy / No Ans. | This column contains two values - the number of busy calls to the agent, and the number of no answer calls to the agent. The values are added together and then the corresponding bucket is determined. |
Login Duration |
CSS and Rendering
All elements displayed in the table are child div elements of the corresponding td (table data) element in the DOM.
For example:
<td class="iceDatTblCol1 fullWidthTableCol1"> <div class="icePnlGrp TableThreshold_Level_2 AcdLoginTotalCallsAllGroups_Level_2 AcdLoginTotalCallsAllGroups_1_Level_2" id="M:elementAgentsAll_dTAgents:2:j_idt1335"> <span class="iceOutTxt alignRight" id="M:elementAgentsAll_dTAgents:2:j_idt1336">1</span> </div> </td>
The div element rendered is given three special CSS classes to allow for coloring:
Global CSS Class
In the example above: TableThreshold_Level_X
This is a global style available which can be used by any table column. X will be replaced by the bucket number in which the value is placed. In the example above, the bucket used is bucket 2.
Column Specific CSS Class
In the example above: AcdLoginTotalCallsAllGroups_Level_2
This is a column specific style applied to a particular column. The name for this threshold is shown in the mouse-over help as "Column".
Column and ID Specific CSS Class
In the example above: AcdLoginTotalCallsAllGroups_1_Level_2
This is a column and ID specific style applied to a particular column, when the associated ID has a particular value. In our example, the CSS style is associated with the