...

Example

To make our example easy the following documentation easier to understand, we will take the Availability column as our example.

We want the Availability to be colored colour this green when it the availability is 80% or above, yellow when it is 60% or above and red otherwise.

...

The CSS definition which will be used by each bucket in our example is shown in the table below. (We will see how to apply this later).

background-color: #169A13;
color: white;

background-color: #FCC10F;
color: black;

background-color: #BB0F18;
color: white;

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).

...

Here it is shown in Client Master Data ... Parameters:

CSS and Rendering

All elements displayed in the table are child div elements of the corresponding td (table data) element in the DOM. The div element may contain other elements - such as a span.

...

The div element rendered is with three special CSS classes to allow for coloring:

CSS Classes

Global CSS Class - Global_Bucket_X

...

This is a column and ID specific style applied to a particular column, and an associated ID for a particular row of data. In our example, the CSS style is associated with the Column = ServiceLevelAvailability, for AcdGroupsID = 235, and the Bucket used is 1.

Defining the CSS

The last step is to define the CSS. The CSS you define here will be used for the whole supervisor page, and so it must be capable of matching all of the elements you want to match in the DOM.

...

Now First we will write the CSS for the selectors we need. In this example, we are selecting all td elements in the DOM which contain a direct child div styled with the appropriate ServiceLevelAvailability bucket.

td:has(> div.ServiceLevelAvailability_Bucket_0) {
	background-color: #169A13;
	color: white;
}

td:has(> div.ServiceLevelAvailability_Bucket_1) {
    background-color: #FCC10F;
	color: white;
}

td:has(> div.ServiceLevelAvailability_Bucket_2) {
    background-color: #BB0F18;
	color: black;
}

Now we setup the parameter. Here you can see the parameter associated with Client Master Data:

Image Added

Result

If you have set all of this up correctly, you should see a result similar to the following:

Image Added