Simplistic UI Enhancements

One basic requirement received not too long ago prompted me to think about how to make this look pretty. I needed to show states/provinces by penetration in a nicely formatted dashboard.

The prep. work includes the creation of 3 map images for each state/province, using a set of defined colors, let’s name them Red/Yellow/Green. The percentages are irrelevant, you can set them up as required.

The work around the images is pretty important, as we will need to save them with transparency, and properly aligned so they overlap nicely.

Additionally, we will create a html resource, which is the actual page that we load the images onto.

Scripting is also pretty simplistic. First off, we have a process behind that calculates the state/province rating based on a formula. We will only define a custom field on the Account form that will hold the resulting value, as one of the three colors (options).

As part of the setup, and in this case it worked based on the business model, we have one Account for each state/province, with multiple child accounts.

Next, all we have to do on load, is define based on the rating value, which one of the three images we will load. Thus, the script could look something like this:

if(_rating == "Red") {
    _html += "<img src=’prov_red.gif’ />";
}
else if (_rating == "Yellow") {
    _html += "<img src=’prov_red.gif’ />";
}
else if (_rating == "Green") {
    _html += "<img src=’prov_red.gif’ />";
}

Additionally, to make it more dynamic, on the image we can define hot spots (yeah, do you remember the old days of static html?) over each state province. Here’s a link to remind you how that’s done:

image-map

Each URL of the hot spot areas defined will point to one Account on the system. We can either do this static, or dynamic by looking up the account by name or abbreviation (e.g. AB, IL, FL, etc.) I prefer abbreviation, as it is less typing.

The end result could look something like the following image:

Additionally, since we already have the resources in place, we can also enhance each account with a small image of the state/province, colored according to the penetration rating.