Friday, April 17, 2009

Spiceworks Help Desk Customization Plugin

I use the Spiceworks helpdesk function every day for work to keep track of the things I need to do. I think that it is a great built in function that lets me use one piece of software to handle many different functions. I really love the helpdesk feature but still find it a little lacking compared to some of the more full featured helpdesks such as OTRS. With the invention of plugins with the 3.6 (maybe it was 3.5) line of Spiceworks, there are a whole bunch of new posibilities out there. Cat, a Spiceworks UI Developer, created a neat little plugin that let you customize a few options in the helpdesk.
  • ticket status in the toolbar
  • increased ticket window height
  • colors for past due tickets and private messages
  • information on devices in the Related To field
Well, that wasn't enough for me so I delved into the world of plugin making. I added:
  • custom color codes
  • enabling/disabling ticket window height
  • custom ticket window height
  • more refreshes in the ticket status toolbar
It's still not perfect and I have to rely on the API provided, but I think it is a good start.

If you have Spiceworks, you can install the plugin here. If not, what's wrong with you? Download Spiceworks

The following is the source code for the plugin. Feel free to borrow from it or use it as a tutorial to start programming plugins for Spiceworks.
// @name Help Desk Customizations Clone
// @description Adds minor enhancements to your Help Desk, including ticket status in the toolbar, increased ticket window height, colors for past due tickets and private messages, and information on devices in the Related To field. From Kat's plugin, I made the expanding height optional and put a refresh of the status bar on ticket close.
// @version 0.3

settingDefinitions: [
{name: 'past_due_color', label: 'Past Due Highlight Color', type: 'string', defaultValue: '#ffdede', example: 'Default: #ffdede'},
{name: 'private_note_color', label: 'Private Note Color', type: 'string', defaultValue: '#e3eaf2', example: 'Default: #e3eaf2'},
{name: 'expanded_height_enabled', label:'Enable Increased Window Height', type:'checkbox', defaultValue: false},
{name: 'expanded_height', label: 'Ticket Window Height (in px)', type: 'string', defaultValue: '500', example: 'Default: 500'}

function refreshToolbarTicketInfo(){
// display ticket stats
var numOpenTickets ='all', {filter:'open'}).length;
var numPastDue ='all', {filter:'past_due'}).length;

var toolbarTicketInfo = $('toolbar').down('span.advanced_controls span.toolbar_ticket_info');

if (toolbarTicketInfo){
$('toolbar').down('span.advanced_controls').insert('<span class="toolbar_ticket_info" style=" float: right; background: #e8e8e8; padding: 3px 5px; border: #888 1px solid;"><strong>Open Tickets:</strong> ' + numOpenTickets + ' <strong>Past Due:</strong> ' + numPastDue + '</span>');
// increase window size
SPICEWORKS.utils.addStyle(" #active_overview {height: " + plugin.settings.expanded_height + "px !important;}");

// mark past due ticket rows
item.up().setStyle({backgroundColor: plugin.settings.past_due_color});


// color private messages
item.setStyle({backgroundColor: plugin.settings.private_note_color})

// add device summary
var deviceLink = $('ticket_review_summary_view').down('p.related_to a');
if(deviceLink) {
var deviceURL = deviceLink.readAttribute('href');
var startIndex = deviceURL.indexOf('id-');
if(startIndex != -1) {
var substring = deviceURL.substring(startIndex);
var deviceID = substring.gsub(/[^\d]/, '');
var device =;
if(device) {
var displayInfo = '<div id="related_to_summary" style="display: none; clear: both; border:1px solid #ccc; padding: 10px; margin: 5px 0; overflow: hidden;"><ul style="margin: 0; padding: 0;">'
var listStyle = '<li style="float: left; width: 200px;">'
if(device.ip_address && !device.ip_address.empty()) {
displayInfo += listStyle + '<strong>IP:</strong> ' + device.ip_address + '</li>';
if(device.mac_address && !device.mac_address.empty()) {
displayInfo += listStyle + '<strong>MAC:</strong> ' + device.mac_address + '</li>';
if(device.manufacturer && !device.manufacturer.empty()) {
displayInfo += listStyle + '<strong>Vendor:</strong> ' + device.manufacturer + '</li>';
if(device.current_user && !device.current_user.empty()) {
displayInfo += listStyle + '<strong>Last Login:</strong> ' + device.current_user + '</li>';
if(device.primary_owner_name && !device.primary_owner_name.empty()) {
displayInfo += listStyle + '<strong>Owner:</strong> ' + device.primary_owner_name + '</li>';
if(device.asset_tag && !device.asset_tag.empty()) {
displayInfo += listStyle + '<strong>Asset Tag:</strong> ' + device.asset_tag + '</li>';
if(device.operating_system && !device.operating_system.empty()) {
displayInfo += listStyle + '<strong>OS:</strong> ' + device.operating_system + '</li>';
if(device.serial_number && !device.serial_number.empty()) {
displayInfo += listStyle + '<strong>Serial No:</strong> ' + device.serial_number + '</li>';
displayInfo += '</ul><p style="float: right;"><a href="#" onclick="new Effect.BlindUp(\'related_to_summary\', {duration:0.20}); return false;">hide</a></p></div>';
$('ticket_purchase_container').insert({after: displayInfo});
deviceLink.insert({after: ' (<a href="#" onclick="new Effect.BlindDown(\'related_to_summary\', {duration:0.20}); return false;">info</a>)'})


  1. Hi Brent,
    Thank you for sharing your plugin and writing it up on your blog. I'm sure it will be useful for others who want to build their own plugin.

    In the 4.0 release we're adding additional features to the help desk. I hope these will be useful to you.

  2. Such a great plugin, has given my helpdesk a new look :-)