Deliver Order from Chaos

A common customization within Clarify is to highlight priority cases in a wipBin or queue by setting their color. For example, make High Priority cases really stand out by coloring them red.

Clarify Classic Client

The ClearBasic Customization Guide has a couple of examples on how to do this with the Clarify Classic Client.

However, the customization was commonly applied to the Queue and wipBin forms - not the console.

As a reminder: to view the wipBin form, simply double-click a wipBin from the list in the left side of the console. Similarly, for the Queue form.

However, since about Clarify version 4, no one typically used these forms - the new console form was what was used. However, the console form can't be customized. I did a search on this to confirm my memory, and found my own post from 7 years ago. I hate when that happens.

Dovetail Agent

Highlighting rows in the console is really easy to do within Dovetail Agent.

1. Add a CSS class to the case rows
2. Add this class to the stylesheet, setting whatever styles/colors you want.

1. Add a CSS class to the case rows

Looking at $dovetailAgent/pages/console/console_main.asp, you'll see where the list of cases is looped over, writing out each one:

<%
  while(boCaseView.EOF != true) {
%>
  <tr  id="...

Simply modify that, adding a new class to each row.

<%
  while(boCaseView.EOF != true) {
%>
  <tr class="casePriority<% =boCaseView('priority') %>" id="...

I've called mine casePriority + the priority. So if you have defined case priorities of High, Medium, and Low, then your class names will be casePriorityHigh, casePriorityMedium, and casePriorityLow.

2. Add this class to the stylesheet, setting whatever color you want.

Here, we'll simply modify $dovetailAgent/pages/stylesheets/webagent.css, and set the color of High priority cases to red. Notice that we're also setting any children anchors to the same color.

.casePriorityHigh, .casePriorityHigh a{
    color:red;
}

And here's what it looks like:

How about a different style?

Lets set the background color and the font color to make it stand out even more:

.casePriorityHigh, .casePriorityHigh a{
    color:#fff;
    background-color:#f00;
}

You can use this same technique to color based on age, severity, condition, status, etc.

Remember to use color diligently, otherwise your application will end up looking like a 5th graders MySpace page.

Hope this helps.