Answer
This article will show how to enhance the usability of the Helpdesk by adding some color to the grids that show the incidents. By adding appropriate colors to the grid, you can make it easier for the worker to distinguish incidents. This is done by creating a custom version of the subWorkItemTable template which builds the grids on the Helpdesk pages. A small block of javascript is added to the template and most of the computation is done on the client. The sample code shown here sets colors for the current worker name, ASAP, High Priority, and Open incidents.
Instructions
How It All Works
When the client computer renders the page, the javascript will look like:
<script language="javascript" for=_ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid event='CellChanged(nRow, nCol)'>
if(_ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(0, nRow, nCol) == 'ASAP')
{ _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(7, nRow, nCol) = 16777215; _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(6, nRow, nCol) = 255; _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(13, nRow, nCol) = true;}
else if(_ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(0, nRow, nCol) == 'Open')
{ _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(7, nRow, nCol) = 0; _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(6, nRow, nCol) = 9226892; _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(13, nRow, nCol) = true;}
else if(_ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(0, 0, nCol) == 'Priority') {
if(_ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(0, nRow, nCol) == 'High')
{ _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(7, nRow, nCol) = 0; _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(6, nRow, nCol) = 9950458; _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(13, nRow, nCol) = true;}}
else if(_ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(0, nRow, nCol) == 'Administrator')
{ _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(7, nRow, nCol) = 6762893; _ctl0__ctl39__ctl0__ctl1_wgWorkItems__baseGrid.Cell(13, nRow, nCol) = true;}
</script>
The name of the flexgrid instance on the page makes this a little difficult to read so I'll change it to make it a little easier to understand:
<script language="javascript" for=grid event='CellChanged(nRow, nCol)'>
if(grid.Cell(0, nRow, nCol) == 'ASAP')
{
grid.Cell(7, nRow, nCol) = 16777215;
grid.Cell(6, nRow, nCol) = 255;
grid.Cell(13, nRow, nCol) = true;
}
else if(grid.Cell(0, nRow, nCol) == 'Open')
{
grid.Cell(7, nRow, nCol) = 0;
grid.Cell(6, nRow, nCol) = 9226892;
grid.Cell(13, nRow, nCol) = true;
}
else if(grid.Cell(0, 0, nCol) == 'Priority')
{
if(grid.Cell(0, nRow, nCol) == 'High')
{
grid.Cell(7, nRow, nCol) = 0;
grid.Cell(6, nRow, nCol) = 9950458;
grid.Cell(13, nRow, nCol) = true;
}
}
else if(grid.Cell(0, nRow, nCol) == 'Administrator')
{
grid.Cell(7, nRow, nCol) = 6762893;
grid.Cell(13, nRow, nCol) = true;
}
</script>
The start of the block declares the language as javascript and tells the client that this code handles the cell changed event for the element called grid (this event fires every time the contents of a cell on the grid change, so as the Helpdesk fills the grid with information, we check what the value is and modify the attributes of the cell accordingly).
The Cell element on a flexgrid has a number of settings. The ones we are interested in here are
So to add the color coding to High Priority incidents, first check that the text in the first row is "Priority" [Cell(0,0,nCol) == 'Priority'] and then check if the text of the current cell is "High" [Cell(0, nRow, nCol) == 'High']. If so, set the attributes text color to black (0), background color to a pale ochre (9950458) and bold to false.