Page History

...

When you mouse over the grey bar in the column header, you are shown the relevant settings:

Image RemovedImage Added

Setting

This is the name of the setting required - see the previous section on how to create the settings.

...

<td class="iceDatTblCol1 fullWidthTableCol1" style=";text-align:right;">
	<div class="icePnlGrp Global_Bucket_1 Stats_ServiceLevelAvailability_Bucket_1 Stats_ServiceLevelAvailability_235_Bucket_1" id="M:elementTodaysGroupData_dataTableTodaysGroupData:0:j_idt3875">
		<span class="iceOutTxt alignRight" id="M:elementTodaysGroupData_dataTableTodaysGroupData:0:j_idt3877">100.00 %<00 %</span>
	</div>
</td>

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

...

Column Specific CSS Class - Column_Bucket_X

In the example above: Stats_ServiceLevelAvailability_Bucket_1

This is a column specific style applied to the column. The name for the start of the CSS class name is shown in the mouse-over help as "Column". After the name comes _Bucket_ followed by the number of the bucket. In our example, the column is Stats_ServiceLevelAvailability, and the bucket is 1.

Column and ID Specific CSS Class - Column_ID_Bucket_X

In the example above: Stats_ServiceLevelAvailability_235_Bucket_1

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 = Stats_ServiceLevelAvailability, for AcdGroupsID = 235, and the Bucket used is 1.

...

First we write the CSS 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.Stats_ServiceLevelAvailability_Bucket_0) {
	background-color: #169A13;
	color: white;
}

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

td:has(> div.Stats_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 RemovedImage Added

...