Posts Tagged ‘Icon’

Thinking Sideways About Highlighter

Date:September 15th, 2011 Author: Tags: , , , , ,
Category: Highlighter, SharePoint Ideas Comments:0 ;

You may have caught Clare’s post earlier about Highlighter’s recent performance enhancements, that were mostly due to some of the surprising ways we’ve seen it being used in the wild. To illustrate this sideways thinking (lateral and literal) we’ll take a look at exploding a humble status column into an Approval Progress Overview:

Status overview

As you can see, we now have a quick at-a-glance idea of how the projects are doing. To create this view, a Highlighter column has been added for each of the statuses. In each of these columns we’ve set it up to display icons (cell color is also a good choice), and cleared the default. Let’s take the Approved status as an example:

Icon setup

All we need to do is click the Auto-create button to create some rules, remove those for the earlier statuses, change the later ones to green icons, and this column’s status of interest to a working icon:


Just to keep people on their toes lets add a little urgency to the list with a Due Date column. So now we want to change the Approved column to a red icon if the Due Date has passed, and the status isn’t yet Approved. This is done by switching to Advanced mode and adding a single rule:

Due date rule

Here are the results of that extra change:

Overview (with due date)

If that wasn’t enough for you, here’s the weaponized version of Highlighter featuring cell colors, priority icons, and Project Manager Blood Pressure indicator:


We’re always interested to hear what you’ve done with our products (especially Highlighter); so if you’ve done something even scarier than the above, send a screenshot to

How to create a SharePoint KPI column

Date:May 12th, 2011 Author: Tags: , , , , , , , ,
Category: Highlighter, SharePoint Development, SharePoint Free Tools Comments:0 ;


Whether you call it a KPI, an Indicator, or a Data Visualization Asset, the chances are that you immediately understand the purpose of the icons in the picture above. The beauty of adding icons to a list is harnessing this instant recognition to make your users work more efficiently with their data.

So how do we add icons to our list? This depends very much on how complex and configurable you want he results to be, so let me give you a run down of the options:

Do It Yourself

  • JavaScript: Do the work on the client-side with a Content Editor Web Part
  • Designer: Customise the list view using SharePoint Designer
  • Download: Download an open source Custom Field Type
  • Code: Create a custom field type from scratch

Buy It

  • Enterprise Edition: Use the Out of The Box Enterprise Edition functionality
  • Buy: Buy a pre-made Custom Field Type

JavaScript document_into8[6]

By adding a Content Editor Web Part to each page you want the icon to display on, you can add JavaScript that will insert icons once the page has been rendered.

Christophe at Path to SharePoint uses his signature HTML Calculated Column to do most of the hard work in his article: Apply color coding to your SharePoint lists. In this instance JavaScript is used solely to render the HTML correctly, as SharePoint renders the output of calculated columns as text normally.

Designer designer30

If you don’t mind spending a little time dabbling with SharePoint Designer, and you can convince your Site Administrator you’re probably not going to do anything too damaging; then Microsoft’s free tool may be the solution for you.

Toni Frankola has risked the wrath of Microsoft and written an article on how to use Designer reproduce Enterprise edition’s KPI columns without having to upgrade: Visual Indicators for the Masses: KPIs in WSS.

As with the JavaScript solution, you’ll have to make this change on every page you want to see the icons on.

Download arrow_down_green4

If you’re and end-user looking for a quick solution, or a developer interested in further developing an existing Custom Field Type, then the IconSet CodePlex project may be of interest to you.

I have enormous respect for those that donate their efforts to the community, such as the developers of this project. Unfortunately open source developers often have a day job and other commitments, so expecting rapid free support from them can be a tall order.

Code studio6

It’s entirely possible to create a Custom Field Type yourself. This is by far the most time-consuming of the options listed on this page, and hence also probably one of the most expensive. However, if you want to avoid some of the initial investment, you could use the IconSet CodePlex project mentioned above as a good starting point (or reference guide).

Fortunately, as the icons are directly rendered onto the page you can avoid the majority of the JavaScript rendering problems I mentioned in How to do list highlighting in SharePoint. If you also avoid [Today] then you can avoid some of the related trouble.

A benefit of all three of the Custom Field Type options is that the results are shown wherever the column is shown in a view, avoiding page-by-page additions.

Enterprise Edition sharepoint

SharePoint Enterprise edition allows you to add KPI information to your site, along with many other additional features. If you’re working with Enterprise edition then take a look at Mark Miller’s article: KPIs for the Masses.

Since use of this functionality is prolific and directly supported by Microsoft it’s very a good option for those that have this version of SharePoint. Unfortunately the functionality isn’t available to those working with Foundation or Standard edition.

Buy currency_dollar4

Many companies don’t have Enterprise edition, and feel that upgrading solely to use the KPI functionality is perhaps not the best use of resources. As a result, the functionality has been reproduced by a great many products (not least our own: SharePoint Highlighter).

Because we have our own product in this area, we’ve created a product comparison to demonstrate the available functionality, and associated cost.