I have a list that have a date column called 'Expired' and must somehow represent the status as an icon (example in image)

The solution must be deployable on farm level since the expires column may be visible in several locations.

My first idea was to solve this by using javascript controlling if the loaded document has the column and if so add the icon row as shown in the example.

Any advices or alternative solutions are welcome.


enter image description here


Here is a post http://paylord.wordpress.com/2012/05/05/xslt-dashboard/ on doing a similar concept using XSLT.

If you create a custom XSLT stylesheet it can be reused by any view of any list providing the required columns are available.

You could also do the same thing with a CQWP if you prefer.

  • This seems as a quite nice solution but I wont be able to provide a custom template like that since the views may be personal and it is possible that the 'expires' field isn't even visible, the icon must however always be shown. – Eric Herlitz Nov 19 '13 at 9:53

In SP2013 you can do it very easily with a JSLINK - but from the screenshot I assume its SP2010.

See article in MSDN How to: Customize a field type using client-side rendering and a sample code for it

  • Neat, thanks for the advice. Will not be applicable in this solution though – Eric Herlitz Nov 19 '13 at 11:28

Please try with Status List, a Status List in SharePoint 2010 is similar to the KPI List in SharePoint 2007. Status List contains status indicators that represent status of the data. Indicators can be created from several types of data, such as SharePoint List, Excel, SQL Analysis Services, Fixed Value based on Manual Entry.

Status List is a place to track and display set of goals. Colored icons display the degree to which the goal has been achieved. For each indicator, a goal level and a warning level has to be configured. The indicator will be updated automatically based on the content.

Have a look at the following links.

Getting started with SharePoint status indicators

How to display images in a calculated column of a SharePoint list

Compare date with today: status indicator in list view

Start up with Status list in SharePoint


I solved this by writing this, the result looks pretty much exactly as the image above

var Ledningssystem = Ledningssystem || {};

// Object to handle revision dates
Ledningssystem.RevisionDate = function () {
    var that = this,
        revisionField = "RevisionInterval",
        revisionDateField = "RevisionDate",
        images = {
            "green": "/_layouts/images/ManagementSystem.Collaboration/Icons/Document-green.png",
            "orange": "/_layouts/images/ManagementSystem.Collaboration/Icons/Document-orange.png",
            "red": "/_layouts/images/ManagementSystem.Collaboration/Icons/Document-red.png"

    var clientContext = SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var lists = web.get_lists();
    //that.spList = {};

    that.getLists = function () {

        clientContext.executeQueryAsync(execute, getFailed);

        function execute() {
            var listEnumerator = lists.getEnumerator();
            while (listEnumerator.moveNext()) {
                var l = listEnumerator.get_current();

        function getFailed() {

    that.getFields = function (callback) {

        var loadedList = lists.getById(SP.ListOperation.Selection.getSelectedList());
        var fieldCollection = loadedList.get_fields();

        clientContext.executeQueryAsync(execute, getFailed);

        function execute() {

            var fields = fieldCollection.getEnumerator();

            while (fields.moveNext()) {
                var oField = fields.get_current();

                var regEx = new RegExp(revisionField, 'ig');
                if (regEx.test(oField.get_internalName())) {

                    // Callback true and die

        function getFailed() {

    that.getListItem = function (itemId, $item, callback) {

        var loadedList = lists.getById(SP.ListOperation.Selection.getSelectedList());
        var spListItem = loadedList.getItemById(itemId);

        clientContext.executeQueryAsync(execute, getFailed);

        function execute() {
            callback(spListItem, $item);

        function getFailed() {

    function handleRevisionDate(result) {
        if (!result) {
            console.log("No Revision field present");
            // Die

        // Find all 
        var $rows = $j("tr[iid]");
        $j.each($rows, parseIid);

        function parseIid() {
            var $item = $j(this)
                , iid = $item.attr("iid").split(',')[1];

            that.getListItem(iid, $item, handleItem);

        // Handle a spListItem
        // spListItem: the SPListItem object
        // $item: the row in the sharepoint gui
        function handleItem(spListItem, $item) {

            // Revision field and set
            var revisionDate = spListItem.get_fieldValues()[revisionDateField];
            var now = new Date();
            if (typeof revisionDate === "undefined" || revisionDate === null) {
                // Die, Revision field not set
            } else {
                var diffInDays = now.datediff(revisionDate);
                var $iconTd = $item.find('.ms-vb-icon');
                $iconTd.css('white-space', 'nowrap');
                // If today or older (Red)
                if (diffInDays <= 0) {
                    $iconTd.append('<img border="0" alt="" src="' + images.red + '" />');

                // If 1 - 14 days left (Orange)
                if (diffInDays > 0 && diffInDays <= 14) {
                    $iconTd.append('<img border="0" alt="" src="' + images.orange + '" />');

                // If more than 14 days left (Green)
                if (diffInDays > 14) {
                    $iconTd.append('<img border="0" alt="" src="' + images.green + '" />');


    that.init = function () {

    return that;


$j(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(function() {
        var sp = new Ledningssystem.RevisionDate();
    }, 'sp.js');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.