Color custom list items based on Date

Question

In SP/O365 online, I need to add colors to list items in an announcement webpart according to the date. I have been looking at the following article: Color custom list items based on Status using OOTB which is coming close to what I need, but I lack the knowledge to change this script to my needs.

New list items should show in a different color (not the background, but item itself) and it needs to change to default after a specific amount of time, like f.e. a month after the created date.

Thanks in advance.

Answer 1

I have used CSR templates to get this customization. Below is snippet. This can be reused.

(function () {
    var requestCtx = {};
    requestCtx.Templates = {};
    requestCtx.OnPostRender = highlightFields;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(requestCtx);
})();
function highlightFields(ctx) {
    var cellIndex = -1;
    $(".ms-listviewtable thead th").each(function(index){
        if($(this).find("div [name='Created']")) {
            cellIndex = $(this).index();
        }
    });
    if(cellIndex > -1) {
        $(".ms-listviewtable tbody tr").each(function(index){
            var strDate = $(this).find("td:eq(" + cellIndex + ")").find("span").attr("title");
            var days = Math.round((new Date() - new Date(strDate))/1000/60/60/24);
            if(days < 30) {
                $(this).closest("tr").find("td").addClass("text-success");
            }
        });
    }

}

in the snippet "text-success" is my css class and you can replace with your own class.

.text-success {
color: green;
}

you will see output as follows

Answer 2

I think the approach is:

1. to create a workflow that assign a value depending on time past since creation and then
2. using this value to select a custom CSS assigned to your lists
3. using a Calculated Column to push the CSS into the list
   
   More specifically:
   1. workflow 2010: find days between Current Item:Created and Today
   2. Create a calculated column and put this formula (of course oyu've to adapt to your columns) and set data type returned as number (this is the only way SP will read this as HTML):

=IF([PastDays]>5,:"<div style='background-color:gold; color:white; '>"&[PastDays]&"</div>",[PastDays])

In this example the cell of PastDays will be red with white font if this value is > than 5. Of course you can nest many condition and give more complicated style definition.