The final output looks like:
If you want to get my icons you can get them here.
The dropdown values of the column status are:
I uploaded my traffic light icons here (http://sp13/teams/PublishingImages/Ampel/): (I guess your location is something different)
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!
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 } }; SPClientTemplates.TemplateManager.RegisterTemplateOverrides( statusFieldCtx ); })(); 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!