0

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?

(function(){
//alert("code is working");


var overrideCtx={};
overrideCtx.Templates={};



overrideCtx.Templates.Fields={
    'rating':{'View': CriticalityRating},
    'Contractends':{'View': DateSettings}

};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

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();
sixmonths.setDate(now.getDate()+180);

if(duedate<now){
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>";
}
|improve this question
  • Can you show the code you're using? – wjervis Jun 22 '15 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. – Dylan Cristy Jun 23 '15 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 – Sandeep Kandregula Jun 24 '15 at 15:26
  • If the alert is not signaled when it is active, are you sure the file is even getting loaded properly? – Dylan Cristy Jun 24 '15 at 16:09
  • Yes, the file loads properly and the alert signals when I comment out the contractends view part. – Sandeep Kandregula Jun 24 '15 at 19:40
0

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.

|improve this answer
  • That is not true. I have used CSR to conditionally format date fields. (E.g., if overdue, make text color red and bold font.) – Dylan Cristy Jul 14 '15 at 18:59
  • The background-color is not editable using style. – Sandeep Kandregula Jul 14 '15 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. – Dylan Cristy Jul 14 '15 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. – Sandeep Kandregula Jul 14 '15 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/ – Danny '365CSI' Engelman Jul 15 '15 at 8:26

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.