HTML Calculated Column and Unicode Graphics

Posted on by

The number one application of the “HTML Calculated Column” method is the display of visual indicators in SharePoint lists. You’ll find many examples on my blog:
– KPIs
– Progress bars
– Color gradients
– etc.

If you haven’t used this method yet, you’ll need to learn it to take advantage of these tutorials. For the latest information on the HTML Calculated Column, start with this post… or attend one of our live online workshops.

Most examples are about color coding backgrounds or text. But what if you want to take it a little further? For example display:
– up/down arrows ➘➙➚
– check marks ✗✓
– star ratings ✭✭✭✭✭
– traffic lights ✹✹✹ ✹✹✹ ✹✹✹
– etc. ✉☎☀☁

What immediately comes to mind is to use a set of icons. But the above examples offer a lighter solution: welcome to the world of unicode graphics!

Unicode is an international standard that references character sets. This includes some graphics, see for example the page below:
http://www.alanwood.net/unicode/index.html
For the graphics, scroll down to the “Symbols” category.

Some benefits of unicode, compared to icons:
– unlimited choice of colors, for both the graphic and the background.
– the rendering is not bound to an external image. This means better performance. Also, it makes it easier to save the SharePoint list as template for reuse in other environments (I’ll provide such a template in an upcoming post).

An example: traffic lights

As an example, here is the formula I used in a calculated column to generate the above traffic lights:

="<span style='background-color:black;font-size:24px;'><span style='padding:-10px;color:"&IF([Color]="Green","green;'>✹","gray;'>✹")&"</span><span style='padding:-10px;color:"&IF([Color]="Amber","RGB(255, 191, 0);'>✹","gray;'>✹")&"</span><span style='padding:-10px;color:"&IF([Color]="Red","red;'>✹","gray;'>✹")&"</span></span>"

Where the [Color] column can take the values Green, Amber or Red.

How about Wingdings?

Why use unicode characters, and not simply fonts like Webdings, Wingdings, or Zapf Dingbats? Those too offer graphics, but there is a downside: these fonts are not standard, and they don’t work cross-browser (and never will, from what I read). Such graphic fonts could still work for you if you are in a corporate environment where your internal policy enforces the use of Internet Explorer.

Unicode seems to work in all modern browsers. I tested it in IE7, IE8, Firefox, Chrome and Safari.

12 thoughts on “HTML Calculated Column and Unicode Graphics”

  1. Question – I was able to make the traffic lights to work (I added a CEWP to the bottom of the page, and then linked it to the text your text-HTML file that I stored on another page).

    Issue:
    When the entire page is displayed, the lights work correctly, but when I select the MOSS list (so only it is displayed), the traffic light column reverts back to displaying the text formula (and not the traffic lights.

    Is there any way to fix this?

    Byron J.
    (and thanks for these tools and cool ideas!)

    • Byron, the CEWP needs to be added to every page where you want to render the html (for example the MOSS list page in your case). In a couple days I’ll show another approach using the Data View Web Part, where the CEWP is not needed.

      • Chris,

        Thanks for the reply. I did not realize that when you selected an individual list, the new page that is showed is actually a “new page” (well, now that I write it out like that, it sounds rather obvious…) that you also need to add the CEWP to.

        I thought it was just the view of the single web part. I have that working now, so I can see if I can impress the heck out of the execs by adding this new feature to our dashboards.

        Regds,
        Byron.

  2. Pingback: Links (1/7/2010) « Steve Pietrek-Everything SharePoint/Silverlight

  3. Hi Christophe,

    I am trying to adapt the above method to display symbols such as up/down arrows based on the unicode graphics but with no concrete positive result.

    Could you please help me or send me the code that I need to use in the calculated column? Which other column will the calculated column refer to?

  4. This may be a stupid question, but I can’t figure out how to use the unicode symbols. I tried replacing the symbol with just the hex number, then I tried the # sign with the hex. I looked on the site you referenced, but couldn’t find anything. I also googled how to use it, and didn’t find what I need. Please help!!

  6. Pingback: Trick or Treat? Text to html, the wicked no-code way « Path to SharePoint

Comments are closed.