Gmail and Yahoo! Mail have labeling features that I find extremely useful under certain circumstances. Yahoo! has its flag system and Google has its star system. Gmail Labs’ extension of the starring system, dubbed Superstars, made the feature infinately more useful in my book. Here Google describes the added benefits of Superstars:
…ifyou use Gmail's star for different things (flag important conversations, flag conversations for follow-up) and you want to differentiate them, you now have more icons for starring messages. Just click on the star repeatedly to toggle between the different states.
I oversee an application that manages sales leads and have found that this type of starring feature is the perfect organizational feature for our sales reps. They already had features that allowed them to make notes, schedule call-back dates and emphasize their best leads, but this one-click, one-page option really maximizes efficiency.
When I first began building the application, I started with a light bulb that had only an on/off feature. The sale reps were happy for a while. But then, I started to get requests for a red light so they could mark a “hot lead.”
While implementing this red bulb, I began to evaluate how I had written the application. I soon saw a relatively generic way to implement a more detailed starring system using jQuery, ASP.NET and the fam fam fam icon set.
I started by choosing a set of 10 icons. The default icon was the “off” light bulb -- toggling the icon would light up the bulb. I tossed three flags into the mix: a red flag,a green flag and a blue flag. Then, I rounded out the set with 5 symbols: a check mark, a ruby, a heart, a star and an exclamation point. This variety would give the sales team the freedom to come up with their own organizational system, instead of being subjected to the mandate of the software, which I always try to avoid when building any application. 
There are a few parts to this, but overall the process is simple. I gathered the images I wanted and placed them into a directory on my static server, renaming them 0 through 9. This was simply for convenience; we could have mapped each image in code or in a database, etc.
Next, we need a generic handler to handle the requests. By using the handler, we can increment the superstar, thereby getting the next image to display when the user changes the status. I created a new generic handler,togglestar.ashx.
public void ProcessRequest (HttpContextcontext)
{
context.Response.ContentType = "text/plain";
if(context.Request.QueryString["ID"]== null)
{ context.Response.Write(
"http://img.dagoosh.com/ico/star/0.png");
return;
}
stringID = context.Request.QueryString["ID"].ToString();
Guid AppID;
if(!dgx.util.GuidTryParse( ID, out AppID ))
{
context.Response.Write(
"http://img.dagoosh.com/ico/star/0.png");
return;
}
int xie= dgx.leads.superstars.Increment( AppID,10);
if(xie< 0)
context.Response.Write(
"http://img.dagoosh.com/ico/star/0.png ");
else
context.Response.Write(
" http://img.dagoosh.com/ico/star/" +
xie.ToString() + ".png" );
}
Simple enough, right? What we will do a little bit later is setup a jQuery function to call the handler and change the src of the image, once the handler returns with the new image uri.
Now there is some work to be done in order to finish up this handler. You may have noticed two function references:
· GuidTryParse, which just adds the ability to use TryParse on a Guid.
· The Increment function from our SuperStars class.
public static int IncrementSuperStar( Guid appID, int starMax )
{
DbCommand cmd = dgx.p.CreateCommand( true );
cmd.CommandText = "IncrementSuperStar";
DbParameter p = cmd.CreateParameter();
p.Value = appID;
p.DbType = DbType.Guid;
p.ParameterName = "@appID";
cmd.Parameters.Add( p );
p = cmd.CreateParameter();
p.Value = starMax;
p.DbType = DbType.Int32;
p.ParameterName = "@StarMax";
cmd.Parameters.Add( p );
DataTablet = ABCProvider.ExecuteSelectCommand( cmd );
if(t.Rows.Count == 0)
return -1;
int x;
if (!int.TryParse( t.Rows[0]["Flags"].ToString(),out x ))
return -1;
return x;
}
The Increment function itself is very simple. It calls the stored procedure and returns the Flags attribute. The appID is the ID of the applicant, or the lead, or the message -- whatever you want to star. The StarMax is how many images you want to deal with. This way,we can go back and change the starMax in one place and easily add additional images at any time. The real logic here is done in the SQL, so let’s dive into that.
CREATE PROCEDURE [dbo].[Applicants_IncrementSuperStar]
@AppID uniqueidentifier,
@StarMax int
AS
BEGIN
SET NOCOUNT ON;
DECLARE @Star int;
UPDATE JobApplications SET Flags = Flags + 1 WHERE ID = @AppID;
SELECT @Star = Flags FROM JobApplications WHERE ID = @AppID;
if(@Star >= @StarMax)
begin
UPDATE JobApplications SET Flags = 0 WHERE ID = @AppID;
end
SELECT Flags FROM JobApplications WHERE ID = @AppID;
END
Again, pretty straight forward. We increment the Flags field by 1, we check to make sure the Flags field is not over the maximum number of stars we have, then return with the Flags field.
So on to the client side. I assign an onClick attribute to each of the items image when binding the data onthe page. I have every element in a GridView or a Repeater and use a function GetStar to draw the image.
public string GetStar( stringID )
{
Guidappid;
if (!dgx.util.GuidTryParse( ID, outappid ))
return "";
string x = dgx.leads.superstars.GetSuperStar( appid).ToString();
return "<img src=\" http://img.dagoosh.com/ico/star/" +
x + ".png\"onClick=\"toggleStar('" +
ID + "',this)\" alt=\"Starred\" />";
}
This binds all of the images with their current state, and then the avenue to update. The toggleStar JavaScript function calls the handler we made above, gets a new src for theimage based on the new star and displays a quick success message.
functiontoggleStar(AppID, image)
{
$.get("../xml/toggleappstar.ashx?ID=" + AppID,
function(data){
image.src = data;
$("#tester").html("success: '"
+ data + "'");
$("#tester").show();
setInterval("hideTester()",5000);
});
}
functionhideTester()
{
$("#tester").fadeOut();
}
As usual, I am sure this can be improved upon. This creates a functional super star system,and has made my sales managers very happy campers. I will come up with a quick sample source package soon.
