Showing images in Service Desk Express

A colleague of mine recently asked me to take a look at a request a customer had that involved wanting to be able to view an image of the client on the Incident screen when the Client ID was selected.

My immediate suggestion was to create a calculated field in the clients module that was a concatenation of a URL and the Client ID field and then make that calculated field available in the Incident module via the Clients foreign key and use the Display Link functionality to view the image. The advantage of this scenario is that a) it is completely supported by BMC and b) the image is only downloaded when the service desk agent wants to see the client’s mugshot.

Unfortunately, this was not what the client wanted. They wanted the image to actually show on the incident screen. This is how I managed it…

Using the customisation wizard I added a standard image to Incident form, saved the form and then viewed it in Service Desk Express (SDE). I then viewed the source code produced by SDE for this form and noticed that it gave my new image the ID of IMAGE2. I needed a directory where I could save the clients images so I created a subdirectory of the Images folder called Clients and saved each client’s image as a jpg using their Client ID such that mine would be ABARBER.jpg. What I now needed was a couple of simple Javascript functions that would swap my image with the client’s image:

function ImageSwap(sClientID)
{
var clientImage = document.getElementById('IMAGE2');
if (clientImage)
{
clientImage.onerror = ImageSwapError;
clientImage.src="images/Clients/" + sClientID + ".jpg";
}
}

function ImageSwapError()
{
this.src="images/NoImage.gif";
}

All the ImageSwap function does is check if IMAGE2 exists on the form (as you may have a form where it does not exist) and swaps the image appropriately. If the client’s image does not exist in the directory then it will throw an error and hence call the ImageSwapError function that just replaces the image with simple NoImage.gif. Notice that the NoImage.gif is to be located in the images folder NOT the images/Clients folder. This allows you to use that image on the form by default.

That was the easy bit. Now I needed to know where to put this function and also how to call it to make it do something. The answer came from the commonscript.js file located (by default) in D:Program FilesBMCApplication ServerScripts. I added my little functions just before another function that I was going to need – function FieldTabOut(). Now if you scroll all the way to the bottom of this function FieldTabOut(), after the …

//END - #Bug 30044

… line but before the closing }, I added my call to my ImageSwap function:

if(CommonModuleObj.ViewName == "24") ImageSwap(document.all("36").value)

Ok, so what does that do. Well basically it says, if the form is an incident form (that’s the ViewName == “24” bit) call my ImageSwap function passing the value of the Client ID textbox (that’s the document.all(“36”).value bit). Perfect, or so I thought. I saved the commonscript.js file and gave my server an IISRESET just in case and tested my “amazing” solution. It worked – sort of…

The problem was that it only worked when I tabbed out, not when I clicked on the popup button to find the client. Another hunt around commonscript.js provided my answer. In the top third of the file there is a function called function OpenPopup(). Once again I scrolled right to the bottom of this function, after the …

//38223 - End
}
strAddWhereClause = ""

…line and before the closing }, I added my call to my ImageSwap function again:

if(CommonModuleObj.ViewName == "24") ImageSwap(document.all("36").value)

I saved the file and gave my server another unnecessary IISRESET and it worked. I guess it goes without saying that this is a completely unsupported hack but it did achieve the desired effect.

• images
• Javascript
• Service Desk Express