Giving customers the power to organize open support ticket priority, on the fly!

communities@jivesoftware.com — Thu, 11 Jun 2009 16:43:49 GMT

Out with the old

In the past, when a customer wanted to check on the status of any of their open cases they would log into their secure space overview page and use the Community Open Cases widget. This widget was designed with a very simple goal in mind, just display the open cases with a bit of extra information and an emphasis on Severity 1 issues. This proved useful for quite some time and gave customers a good overview of what was going on with their community from a support perspective.

However, there was one major flaw. Customers had no way of interacting with this information and often found it very difficult to organize this data in a manner that they could use quickly and efficiently. Welcome, open cases widget 2.0!

The new and improved open cases widget

Along with our upgrade of the Supportal to SBS 3.0, I took on the job of updating this widget to provide customers with better control over their open cases. There are two major upgrades that I gave this widget which have enhanced the way people use it:

1. Cases broken down by Severity

Instead of displaying all the open cases in a potentially enormous group, I've broken down the display into 3 distinctive parts. This is especially helpful for customers with more than 10+ open support cases at a time and allows customers to quickly see if they have any Level 1 issues that they need to attend to quickly.

2. New case option available: Priority

To the right of every case status is a set of up and down buttons which control the individual priority of every issue (within their respective severity).

Okay great, so how do I use it?

Step 1: Log in

Log into the Supportal and visit your Company's secure space "Overview" tab

Step 2: Organize open cases

Browse through any open cases and use the "move up/move down" buttons to re-order them. All the moving on the screen will be done in real-time thanks to our good old friend Javascript. You may recognize these buttons from SBS, as they are used to control the location of profile fields on the admin console registration settings page.

Step 3: Don't forget to Save!

As of right now, your cases will be in the order you want on the overview page, but there is one final step. You will need to click the Save Settings button at the bottom right hand corner of the widget. This will take the current ordering of your widget and persist the case priorities to the database.

You will receive a friendly notification at the top of the widget that your Priority changes have been successfully saved, and you are done!

Well that's easy enough, how does it all work?

I'm glad you asked--it's really quite simple.

Displaying the widget

First off, the widget loads up all the non-closed cases within a secure space and puts them into three different Collections (one for each severity):

for (String caseID : caseIDs) {
    try {
        SupportCase supportCase = supportCaseManager.getSupportCase(Long.parseLong(caseID));
        String status = supportCase.getStatus();
        if (status != null && !caseStatusManager.isClosedStatus(status)) {
            String severity = supportCase.getSeverity();
            String priority = supportCase.getPriority();
            supportCase.setPriority(priority != null ? priority : "0");
 
            if(severity.equals("Level 1")) {
                openSev1Cases.add(supportCase);
                Collections.sort(openSev1Cases, new CaseComparator());
            }
            else if(severity.equals("Level 2")) {
                openSev2Cases.add(supportCase);
                Collections.sort(openSev2Cases, new CaseComparator());
            }
            else {
                openSev3Cases.add(supportCase);
                Collections.sort(openSev3Cases, new CaseComparator());
            }
        }
    }
    catch (NotFoundException e) {
        log.error("Could not retreive support case in OpenCasesWidget: " + e.getMessage());
    }
}

(Ideally this will get refactored soon to allow for more or less than 3 severities instead of being hard-coded. But it will work for now.)

The CaseComparator() orders all the currently open cases by their priority in the database. If nothing has yet been set, it will be put in the order that the cases were created.

The fancy effects

The cases are now sent to the template, where they are displayed in their respective severity grouping and automatically hooked into the Javascript functions that allow the up/down buttons to work. When you click on one of the buttons the following Javascript magic happens:

1. References to the required objects on the screen are loaded up using Javascript:

var moveUp = function(e, type) {
    Event.stop(e);
    var ansc = this.up(".case-field");
    if(ansc != undefined) {
        ansc.previous().insert({before: ansc});
        updateHiddenField(ansc, ansc.next());
    }
    updateOrderingAnchors(type);
}

2. A hidden priority field for each case is updated with the new ordering value:

var updateHiddenField = function(element, newElement) {
    var temp = element.select(".case-priority")[0].value;
    element.select(".case-priority")[0].value = newElement.select(".case-priority")[0].value;
    newElement.select(".case-priority")[0].value = temp;
}

3. The ordering of the case above (or below if the down arrow was pressed) will be swapped on screen and the list rebuilt:

var updateOrderingAnchors = function(type) {
    if(type == "1") {
        var elms = $("sev1-case-list-body").select("tr");
    }else if(type == "2") {
        var elms = $("sev2-case-list-body").select("tr");
    }else{
        var elms = $("sev3-case-list-body").select("tr");
    }
    elms.each(function(tr, i) {
        var anchors = tr.select(".field-moveup")[0];
        if (i <= 0) {
            anchors.update("<span class='move-up-disabled'>move up</span>");
        }
        else {
            anchors.update(new Element("a", {"class": "anchor-move-up", href: "#"}).update("move up"));
        }
        anchors = tr.select(".field-movedown")[0];
        if (i == elms.length - 1) {
            anchors.update("<span class='move-down-disabled'>move down</span>");
        }
        else {
            anchors.update(new Element("a", {"class": "anchor-move-down", href: "#"}).update("move down"));
        }
    });
    bindAnchors();
}

4. Now that the ordering is complete, you click the Save Settings button which makes a call to this Javascript to call a DWR method and display the nice notification at the top of the widget:

CasePriorityAction.setPriorities( values, {
    callback:function() {
        $('save-button').enable();
        $('jive-success-box').style.display = "block";
        Effect.Fade($('jive-success-box'),{delay: 3, duration: 5});
    }
});

Saving the data

The final step involves saving this to the database, which is done by the call to the setPriorities DWR method as noted above. This loops through all the cases on the screen and sets the priorities in the database accordingly:

public void setPriorities(List<String> values) {
    try {
        for(String value : values){
            String[] vars = value.split("-");
            SupportCase supportCase = supportCaseManager.getSupportCase(Long.parseLong(vars[1]));
            supportCase.setPriority(vars[2]);
            
            supportCaseManager.updateSupportCase(supportCase);
        }
    }
    catch (NotFoundException e) {
        log.error("Could not retreive case in CasePriorityAction: " + e.getMessage());
    }
}

I hope this information provides you with interesting insight into how our custom development allows us to work smarter and more efficiently with all our customers. We want these new features to enrich your Jive experience!

As always, Jive welcomes any and all feedback about this feature and the Supportal in general. Please comment on this post or start a discussion in our Supportal Feedback space.

Prototype in Clearspace 2.0

communities@jivesoftware.com — Tue, 25 Mar 2008 18:39:57 GMT

In this video, Clearspace developer, Nick Hill, talks about how Prototype, Scriptaculous and other Javascript technologies are used within Clearspace 2.0. This was originally presented as an internal Jive training to get our developers up to speed on some of the newer technologies used in Clearspace 2.0, and we wanted to share it with other people doing Clearspace development. If you want to learn more about the Clearspace 2.0 beta, you can visit the beta area on Jivespace.

The pdf file with the complete slides from the presentation is attached below.

You can watch a larger Flash version or download the Quicktime Movie version (Caution: 179MB file)

Blog Posts From Jivespace Community Blog Tagged With javascript

Giving customers the power to organize open support ticket priority, on the fly!

Prototype in Clearspace 2.0