Microsoft SharePoint 2013 Discussion Board Color Coding: How-to Guide

Recently we were required to customize the Microsoft SharePoint 2013 discussion board in such a way that discussions and comments posted after a certain date and time would be colored red so as to alert the users of new comments in a discussion.

We decided to implement this functionality through client side scripting. First we had to get our timestamp which would be compared with the timestamps of the discussions and the comments. In our case, our required timestamp was available in a document library, and through SharePoint CSOM JavaScript we were able to retrieve it from this library.

Once we had the required timestamp, we developed a script that would color the discussions and comments red if their timestamp, available in the html of the page, was prior to our timestamp.

The following JavaScript function colors the discussions red in the subject view of the discussion board based on the timestamp provided as function parameter.

function colorDiscussion(timestamp)
{
$( "li.ms-comm-metalineItem>span>span" ).each(function( index ) {
if( $( this ).attr("title"))
{
if(new Date($( this ).attr("title"))>new Date(timestamp))
$( this ).parent().parent().parent().parent().parent().find("a>span").css("color","#f00");
}
});
}

The following JavaScript function colors the comments red in the flat view of the discussion board based on the timestamp provided as function parameter.

function colorComments(timestamp)
{
$( "div.ms-core-defaultFont>span>span" ).each(function( index )
{
if( $( this ).attr("title"))
{
if(new Date($( this ).attr("title"))>new Date(timestamp))
{
$( this ).parent().parent().find("div>div>div>p").css("color","#f00");
}
}
});
} 

Feel free to shoot me an email or give me a call at (760) 930-6400 if you have any questions.

Written by:
Bilal Amjad, SharePoint Consultant, FMT

Posted by: Jakob Bechgaard