Traffic light column in custom list (en)

Traffic light column in custom list de en Title
, ,

The final output looks like:

Traffic light column in custom list (de en)_4


If you want to get my icons you can get them here.

The dropdown values of the column status are:

Traffic light column in custom list (de en)_3

I uploaded my traffic light icons here (http://sp13/teams/PublishingImages/Ampel/): (I guess your location is something different)

Traffic light column in custom list (de en)_1

Important: Don’t forget to publish them as a major version! In the picture below you can see, that there are 4 pictures saved as draft!

Traffic light column in custom list (de en)_2

Now save the Javascript below and upload it to your masterpage gallery and link it to a list like in my other post.

If your column isn’t called “Status” you have to change this in the code, same for the dropdown options or if your location of the traffic light icons is a different one.

(function () {
    var statusFieldCtx = {};

    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
        "Status": {
            "View": StatusFieldViewTemplate


function StatusFieldViewTemplate(ctx) {

    var _statusValue = ctx.CurrentItem.Status;

     if (_statusValue == 'abgeschlossen')
         return "<img src='http://sp13/teams/PublishingImages/Ampel/green.png'>";
     if (_statusValue == 'in Bearbeitung')
         return "<img src='http://sp13/teams/PublishingImages/Ampel/yellow.png'>";

     if (_statusValue == 'offen')
         return "<img src='http://sp13/teams/PublishingImages/Ampel/red.png'>";
	 if (_statusValue == 'wartet')
	 return "<img src='http://sp13/teams/PublishingImages/Ampel/brown.png'>";


As always, don’t be afraIT to ask or comment!

Leave a Reply

Your email address will not be published. Required fields are marked *