I have a date column in my custom list. When i try to override the view of the field by using the TemplateOverride Function, my Javascript wont work on! The same problem occurs for Multiple Choice, When i try to display something that is not part of my actual choices. I want to know is there a way around this or was it intentional that i am unable to alter what is displayed in the actual field?

//alert("code is working");

var overrideCtx={};

    'rating':{'View': CriticalityRating},
    'Contractends':{'View': DateSettings}




function CriticalityRating(ctx){
var ret=ctx.CurrentItem.rating;

if(ctx.CurrentItem.rating < 0 ) {
return "<div style='background-color:#FF7D7D;text-align:center;padding:10px;'>Highly Critical</div>";
else if(ctx.CurrentItem.rating == 0){
return "<div style='background-color:#F5FE4B;text-align:center;padding:10px;'>Low Criticality</div>";
return "<div style='background-color:#18EF1E;text-align:center;padding:10px;'>No Attention Needed</div>";

function DateSettings(ctx){
var date=ctx.CurrentItem.Contractends;
var duedate=new Date(ctx.CurrentItem.Contractends);
var now= new Date();
var sixmonths=new Date();

return "<div style='background-color:#FF7D7D;text-align:center;padding:10px;'>"+date+"</div>";
else if(duedate>=now && duedate<=sixmonths){
return "<div style='background-color:#F5FE4B;text-align:center;padding:10px;'>"+date+"</div>";
return "<div style='background-color:#18EF1E;text-align:center;padding:10px;'>"+date+"</div>";
  • Can you show the code you're using?
    – wjervis
    Jun 22, 2015 at 18:31
  • What exactly are you expecting to see? With the code you have provided, <#= ctx.CurrentItem.Contractends #> will just render the date with whatever the default format is (for instance m/d/yyyy). Therefore it will appear as though your code was not applied, even though it was. Jun 23, 2015 at 15:13
  • I have along with this other Fields that I removed from the code above. When i run the code the other fields dont work and the alert is not signalled when it is active. The end goal is to change the background color of the Field based on the date value Jun 24, 2015 at 15:26
  • If the alert is not signaled when it is active, are you sure the file is even getting loaded properly? Jun 24, 2015 at 16:09
  • Yes, the file loads properly and the alert signals when I comment out the contractends view part. Jun 24, 2015 at 19:40

1 Answer 1


The internal background properites of date do not allow for the CSR to change the style properties. They are overruled by the internal style of the sharepoint css.

  • That is not true. I have used CSR to conditionally format date fields. (E.g., if overdue, make text color red and bold font.) Jul 14, 2015 at 18:59
  • The background-color is not editable using style. Jul 14, 2015 at 19:04
  • Ah, I see. Did you try using a custom class instead of inline styles? That might work. Set up a CSS file with a class like overdue-date with the formatting you want, then in the CSR do if (duedate < now) { return "<div class='overdue-date'>" + date + "</div>"; } I have used that technique a lot with CSR, it makes managing the styling much easier. You can write your CSR code once, and then to adjust the formatting just update your style sheet. Jul 14, 2015 at 19:09
  • I haven't tried that method. That might work. I used a work around, hide the date field and use a blank field and use the date field data internally for the values. Definitely seems like a good idea. Jul 14, 2015 at 19:14
  • A alternative method, not using CSR but Calculated columns to highlight a View row based on todays date was answered here on StackOverflow. As for CSS, you can overrule any applied CSS with either the !important setting or combined CSS rules which specifically target DOM elements. see http://www.w3.org/TR/css-cascade-3/ Jul 15, 2015 at 8:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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