Posts Tagged ‘javascript’

FogBugz – Email edge detection

A while ago I was involved in a project at Clyral where we developed a web based support ticketing system (similar to Zendesk). One of the things we focused on was dealing with the detection of new content in an email conversation. Typically, emails would bounce back and forth between a customer and an agent and we wanted to ensure that our web interface wasn’t cluttered with the full email thread for every reply the customer sent in (the original conversation was always included in outbound emails for convenience).

When we looked at implementing the mechanism which would only extract new content from an inbound email, we found it surprising that there was no real standard for demarcating the beginning/end of an email in an email conversation. It seemed obvious that it would be useful for email clients to stick to a common standard in terms of how they would format existing content when replying to an email, if only to be able to separate the conversation view when viewing an email after a number of exchanges. Off the top of my head, both Outlook and Gmail support this functionality. If you use one of the newer versions of Microsoft Outlook, you’ll notice that the client is capable of detecting the boundaries between emails (take a peak at the screenshot below). The Gmail web client also provides a mechanism to collapse an email conversation into a logical group of messages by detecting new content in an email conversation.

image

While there didn’t seem to be a standard way of achieving this, we managed to get a decent solution in place for our ticketing system. Since we had control over the format of the outbound email, we could standardise the email format such that we could easily detect new content when a customer responded. This was not a full proof solution, so in the end, we implemented a relatively simple heuristic method that could deal with most of the common mail clients out there. Implementing this feature made it far easier to manage conversations with customers. Obviously, we always kept the original email as customers would sometimes reply with changes to the original email content (such as answering questions inline).

Last year, we started using FogBugz as our general case and project management system. What we discovered was that FogBugz isn’t that smart at managing email conversations. Outbound emails do not include the full email conversation and if you don’t use the web interface to respond, the boundary between the new content and previous communication isn’t detected at all. This usually leads to a very cluttered case view where you need to scroll over copious amounts of duplicate text.

Thankfully, FogBugz has a nifty feature which allows you to customise the front end with JavaScript and CSS.  To deal with this problem, I implemented a very simple JavaScript customisation which scans over the content in a case and hides any email text which is superfluous. You always have the capability to toggle the content if you need to inspect it. I’ve included the code for the customisation below. We use Microsoft Outlook (and most of our clients do as well), so the solution works well for us. Replies from Gmail should be supported as well. The code simply scans email for a new line starting with ‘From: ..’ and splits the email there. It’s not rocket science.

$(function(){
    $('.emailBody').each(function(index, element){
        var body = $(element);
        var edgeIndex = body.html().indexOf('\nFrom: ');
        if (edgeIndex == -1){
        	return;
        }
        var mainBody = body.html().substring(0, edgeIndex);
        var quotedBody = body.html().substring(edgeIndex);
        body.html(mainBody);
        body.append('</pre>
<div class="showQuote" style="padding-top: 5px;"><a class="dotted" onclick="$(this).parent().parent().find(\'.emailThreadBody\').toggle();" href="javascript:void(0);">- show quoted text -</a></div>
<pre>
');
        body.append('</pre>
<div class="emailThreadBody" style="display: none;"></div>
<pre>
');
        body.find('.emailThreadBody').html(quotedBody);
    });
});

Validation with confirmations in ASP .NET

In his book Designing The Obvious, Robert Hoekman makes a few good points regarding inline validation techniques. Validation is often neglected when building a web application and little or no time is spent improving validation to give the end-user a better experience when using online forms. Validation should not get in the way of people using your site or web application, it should be seamless. The most effective way to manage validation is to catch errors before they happen. This would seem obvious but many of us out there are guilty are not paying attention to validation. Supplying hints of expected content format or simply confirming to a user that he/she has entered the correct data goes a long way to ensuring that a user feels comfortable using your web application.

I am quickly going to show you how to implement a confirmation ‘tick’ using the built in ASP .NET validators in Visual Studio 2005. Assuming that you are using these validators and you expect your clients / users to be using a javascript enabled browser, you can use some simple javascript to implement confirmation ticks every time a user successfuly completes a field.

Validation Example

Using one of the fundamental principals of Ruby on Rails, ‘Convention over Configuration’ we need to set the ID of the tick image to the name of the Textbox + ‘_ValidatorOk’. So if our textbox ID is called ‘Field_Duration’ then our tick image ID is ‘Field_Duration_ValidatorOk’. We also need to set the display style attribute of the image to ‘none’ (style=’display:none’) by default so that the tick is hidden until valid data is entered.

We need to fire off some javascript when the onblur event of our textbox is fired. This javascript will fire the ASP .NET Validators which will let us know if the data is valid or not. If the data is valid we can display the tick. To do this, simply add an onblur event to the Textbox.

Example: <asp:Textbox id=”Field_Duration” runat=”server” Text=”” onblur=”FireCustomValidation(this);” />

Then include the javascript function ‘FireCustomValidation’ which will look something like this:

function FireCustomValidation(fldobj)
{
    if (typeof(Page_ClientValidate) == 'function') {
        var passed = true;
        for (i = 0; i < Page_Validators.length; i++) {
            if (Page_Validators[i].controltovalidate == fldobj.id) {
                ValidatorValidate(Page_Validators[i]);
                if (!Page_Validators[i].isvalid)
                    passed = false;
            }
        } 
        if (passed)
            document.getElementById(fldobj.id + 'ValidatorOk').style.display = '';
        else
            document.getElementById(fldobj.id + 'ValidatorOk').style.display = 'none'; 
   }
}

Now, when the user completes and leaves a field, the function above will execute. The function uses the Client API for the ASP .NET validators (see here). If Client Side Validation is not supported then the function does nothing. Otherwise it iterates through each validator on the page looking for ones that match the field just completed. When found, their respective validation functions are fired. The ‘isvalid’ attribute is then checked, if any of the validators return false then the tick is hidden, if all pass then the tick is shown. You could write some extra code to stop errors occuring if the ‘tick’ object does not exist.

You could include this script in a javascript file that is included in your master page. Using this technique, users feel more confident as they complete your webform. There is a lot more you could do with this code, such as highlight the entire table row when an error occurs.

Hope you found this useful.