Color coding the Helpdesk incident grids

Products

Management Platform (Formerly known as Notification Server)

Issue/Introduction

Resolution

Question
How do I add color coding to the Helpdesk incident grids? For example, I want ASAP to show up in a bold white font on a red background so workers will see it immediately.

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

Locate the AeXHD folder on your Helpdesk server. It should be under C:\Program Files\Altiris\Helpdesk, though this will depend on your choice when you installed Altiris software on the server.
Create a new folder called custom under the AeXHD directory.
Copy the file subWorkItemTable.ascx from the folder AeXHD\templates to the folder you created in the previous step.
Make sure the copied template in the custom folder is no longer Read Only and rename it to custSubWorkItemTable.ascx.
Open the file with a text editor like Notepad and browse down until you find the line containing </script>.
Add the following code just before this line:

Public Overrides Sub FinalizeTemplate()
If Not Console.DownlevelBrowser Then
   Dim grid as String = DirectCast(wgWorkItems.BaseGrid,WrappedFlexGrid).ClientID
   Dim s as String
   s = vbCrLf & "<" & "script language=""javascript"" for=" & grid & " event='CellChanged(nRow, nCol)'" & ">" & vbCrLf
   s = s & "if(" & grid & ".Cell(0, nRow, nCol) == '" & TryString("ASAP") & "') " & vbCrLf
   s = s & "    { " & grid & ".Cell(7, nRow, nCol) = 16777215; " & grid & ".Cell(6, nRow, nCol) = 255; " & grid & ".Cell(13, nRow, nCol) = true;}" & vbCrLf
   s = s & "else if(" & grid & ".Cell(0, nRow, nCol) == '" & TryString("Open") & "') " & vbCrLf
   s = s & "    { " & grid & ".Cell(7, nRow, nCol) = 0; " & grid & ".Cell(6, nRow, nCol) = 9226892; " & grid & ".Cell(13, nRow, nCol) = true;}" & vbCrLf
   s = s & "else if(" & grid & ".Cell(0, 0, nCol) == '" & TryString("sidColPriority") & "') {" & vbCrLf
   s = s & " if(" & grid & ".Cell(0, nRow, nCol) == '" & TryString("High") & "') " & vbCrLf
   s = s & "    { " & grid & ".Cell(7, nRow, nCol) = 0; " & grid & ".Cell(6, nRow, nCol) = 9950458; " & grid & ".Cell(13, nRow, nCol) = true;}}" & vbCrLf
   s = s & "else if(" & grid & ".Cell(0, nRow, nCol) == '" & CurrentWorker.worker_name & "') " & vbCrLf
   s = s & "    { " & grid & ".Cell(7, nRow, nCol) = 6762893; " & grid & ".Cell(13, nRow, nCol) = true;}" & vbCrLf
      s = s & "<" & "/script" & ">" & vbCrLf
   Console.RegisterClientScriptBlock("cellchanged",s)
End If
End Sub
Save the file.
In the AeXHD folder, create a file called custom.config and add the following code to it:

<?xml version="1.0" encoding="utf-8" ?>
<custom.configuration>
            <files path="~/custom/">
                        <file id="subWorkItemTable" file="custSubWorkItemTable.ascx" />
            </files>
</custom.configuration>
Restart IIS on the server.

How It All Works

First, we check that we are not dealing with a low level browser.
We retrieve the name of the flexgrid control and store this in a variable called grid.
We build the javascript code as a string.
We register the string on the page which will be sent to the client.

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

0: the text
6: the background color
7: the text color
13: the font attribute for bold

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.