SharePoint use-cases: Custom traffic-lights using List View column-styles


I always advise against customization. It is too expensive long-term, and too unstable when the environment is upgraded or moved. Instead I advocate the less-is-more approach. Make as few changes as possible to achieve your goal, and always use out-of-the-box for a while before deciding on any changes.

However, in some cases it is unavoidable, and for those cases, I’ve identified a few best-practices. The first of these is how to create traffic lights in a list view.

There are two good ways to do this. The first is a calculated column, which is already documented very well by Laura Kellogg, and the other is a custom column view using the option to add XSL-styles, which I haven’t seen shown much and that I’ll therefore give you a quick rundown of here.

Both methods are very simple and only requires adding a txt-file on your site, but the XSL style has the benefit of not requiring extra columns and being a bit closer to what I believe MS intends you to do, which should make it more stable in future upgrades.

The downside is that it requires a bit of XSL, which few people feel comfortable with, but with this post, I hope I can help you get around that.

A. Creating a folder for your file

  1. Go into site-settings and click “Content and Structure”
  2. Go to the folder called “Style Library” and create a sub-folder called “Custom” (or whatever you want as long as you can find it again)
  3. OPTIONAL: Create a sub-folder to this called “ListView” so you can easily differentiate your ListView style files from other custom styles you may do.

B. Finding the internal name of the column you want to customize

  1. Go into the list that you want to create a traffic-light for an enter List Settings
  2. Click on a column that you want to create a custom style for
  3. Copy the name of the column from the URL. You’ll find it where it says “Field=[Name of your column]”

NOTE: If you’re lucky the internal name makes sort of sense, but if you’re unlucky it’s some cryptic combination of underscores, letters, and numbers like “_x0069_hy3”. As far as I can tell, the “_x0069_” is a special character written as unicode, and you can learn more about those those here.

C. Creating your custom style

  1. Copy the code below into a new file and save in your folder.
  2. Replace the internal name of the column I’m using “_x0069_hy3” with your own internal name
  3. Replace the values I’m using (1,2, and 3) with the values you’re using in your column
  4. Add more values or columns as needed (I’ve added a lot of notes in there on where and how to do this):
	The XSL header. I have no clue what any of this means. I just copied it from someone else.

<xsl:stylesheet xmlns:x=""
                exclude-result-prefixes="xsl msxsl ddwrt"

	<xsl:include href="/_layouts/xsl/main.xsl"/> 
	<xsl:include href="/_layouts/xsl/internal.xsl"/> 
	Traffic-light column
	1. The Internal name of the column in my example is "_x0069_hy3", so just replace all of those with your own internal name.
	2. The values I check for are 1, 2, or 3, so replace those with your own values if you need to
	3. If you want to have more than three values just copy/paste from where it says <xsl:when> to where it says </xsl:when>
	4. I'm replacing the value with images that are on all SharePoint sites, but you can write your html in there if you want.

	<xsl:template name="FieldRef_Number_body._x0069_hy3" ddwrt:dvt_mode="body" match ="FieldRef[@Name='_x0069_hy3']" mode="Number_body">
		<xsl:param name="thisNode" select="."/>
				<xsl:when test="$thisNode/@*[name()=current()/@Name] = '3'">
					<img align="right" src="/_layouts/images/IMNON.png" alt="Status: {$thisNode/@_x0069_hy3}"/>
				<xsl:when test="$thisNode/@*[name()=current()/@Name] = '2'">
					<img align="right" src="/_layouts/images/IMNIDLE.png" alt="Status: {$thisNode/@_x0069_hy3}"/>
				<xsl:when test="$thisNode/@*[name()=current()/@Name] = '1'">
					<img align="right" src="/_layouts/images/IMNBUSY.png" alt="Status: {$thisNode/@_x0069_hy3}"/>
	In this example I'm using number columns, but you can use any field-type. Examples:
		Numbers:	<xsl:template name="FieldRef_Number_body" ddwrt:dvt_mode="body" match="FieldRef" mode="Number_body">
		Text:		<xsl:template name="FieldRef_Text_body" ddwrt:dvt_mode="body" match ="FieldRef" mode="Text_body">
	For a full list see here:

 D. Implenting your custom style

  1. Once, you’ve saved your file in the folder, make sure it’s checked-in/published, and then copy the URL.
  2. Navigate to the page where you’ve added your List View webpart
  3. Click Edit-page, find your List View webpart, and click “Edit Web Part”
  4. Go to the last section called “Miscellaneous” and paste your URL where it says “XSL link”
  5. Click “OK”

I hope this helps. If you have issues, throw me a comment, and I’ll try to help.