REQUEST A DEMO

Hiding Empty Queues in Dovetail Agent

I was recently at a customer site, and while sitting down with one of their agents, noticed that this agent belonged to over 100 queues.

Because of this, the left column of the console within DovetailAgent, which shows all of the queues, had a scrollbar that seemed to scroll forever.

One of the features I like about Dovetail Mobile is that it only shows the queues that have stuff in them.

I immediately said: why don’t we do a similar thing within DovetailAgent?

And because we have more screen real estate to work with on a desktop (as opposed to the limited screen real estate on a mobile device), I thought about allowing the empty queues to be toggled on and off.

Easy enough to do.

Here’s what I ended up with. (I’m showing the end result with pictures first, so the non-techies don’t immediately run away screaming upon seeing code)

Screenshots

Here’s what it looks like with the empty queues hidden:

hidden

and once you click that link, the empty queues are shown, and then the link changes to allow the empty queues to be hidden.

Like so:

shown

 

Code

Within console_left.asp, I added a variable to count the number of empty queues:

var numberOfHiddenQueues = 0;

While looping through the list of queues, I increment this counter if we have an empty queue, and also add a class of "hidden" to the queue item.

while(boQueue.EOF != true) {

…

if (NumItems == 0)
{

Class+= ‘ hidden ‘;
numberOfHiddenQueues++;
}

} //end while loop

If we have any empty queues, we’ll add 2 links. One to show the hidden (empty) queues, and one to hide them:

if (numberOfHiddenQueues > 0)
{
    Response.Write(‘<a id="showEmptyQueues"  onclick=toggleEmptyQueues(); class="queueItem toggleEmpty" >’);
    Response.Write(‘and ‘ + numberOfHiddenQueues + ‘ more empty queues</a>’);

    Response.Write(‘<a id="hideEmptyQueues" onclick=toggleEmptyQueues(); class="queueItem toggleEmpty hidden" >’);
    Response.Write(‘ hide the empty queues</a>’);
}

A bit of Javascript (using jQuery) to toggle the empty queues and the opposing links when we click:

function toggleEmptyQueues()
{
    $(".hidden").toggle();   
    $("#showEmptyQueues").toggle();       
}

And finally a bit of styling:

.clsConsole-left #queues .queueItem{
    padding-left:5px;
    width:100%;
    cursor:hand;
    display:inline-block;
}
.clsConsole-left #queues .hidden
{
    display:none;
}   
.clsConsole-left #queues .toggleEmpty
{
    margin-top:10px;
}
.clsConsole-left #queues .toggleEmpty:hover
{
background-color:lightblue;
}

 

Why would I want to show empty queues?

One reason is so that you can drag & drop items into a queue, so you need a drop target.

 

And there you have it. Less clutter. Less noise. Hope this helps.