1

Entire JS

(function () {
    var oFldCtx = {};
    oFldCtx.Templates = {};

    oFldCtx.Templates.Fields = {
        "Estatus": {
            "View": overrideStatus
        },
            "Cumplimiento": {
               "View":overrideCumplimiento
             }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(oFldCtx);
})();

function overrideStatus(ctx) {

    var sStatus = ctx.CurrentItem.Estatus;
     var sIconFileName = "";

switch(sStatus){
case "0":
sIconFileName= "cero.png"
break;
case "1":
sIconFileName= "uno.png";
break;
case "2":
sIconFileName= "dos.png";
break;
case "3":
sIconFileName= "tres.png"
break;
case "4":
sIconFileName= "cuatro.png"
break;
default:
break;
}

if(sIconFileName == "") return sStatus;

var sWebUrl = _spPageContextInfo.webAbsoluteUrl;
var sIconSrc = sWebUrl + "/SiteAssets/" + sIconFileName;
var sImgTag = "<img id='" + ctx.CurrentItem.ID + "' ";
sImgTag += "src='" + sIconSrc + "' ";
sImgTag += "onclick ='callEditForm(this)' ";
sImgTag += "/>";

return sImgTag;
}

  function overrideCumplimiento(ctx) {
         var date = new Date();
         var currentServerDateTime = date.format("dd/mm/yyyy");
         var sCumplimiento = ctx.CurrentItem.Cumplimiento;
         var sCumplimientoInicial = ctx.CurrentItem.Fecha_x0020_Compromiso_x0020_Ini;


      if(currentServerDateTime < sCumplimientoInicial){
       ctx.CurrentItem.Cumplimiento = "Yes"
      }else{
       ctx.CurrentItem.Cumplimiento = "No"
      }


        }

Problem is into function overrideCumplimiento(ctx)

It just don´t throw yes or no value on column. I debbug it and it pass correclty but just don´t place values in column

enter image description here

enter image description here

1 Answer 1

2

The problem is that while you are setting your Cumplimiento field value on the ctx.CurrentItem object, that's not really the way rendering override functions work.

Rendering override functions need to return the HTML that you want rendered to the page.

So your overrideCumplimiento function should look something like:

function overrideCumplimiento(ctx) {
    var date = new Date();
    var currentServerDateTime = date.format("dd/mm/yyyy");
    var sCumplimiento = ctx.CurrentItem.Cumplimiento;
    var sCumplimientoInicial = ctx.CurrentItem.Fecha_x0020_Compromiso_x0020_Ini;

    var htmlToRender = "<div class='cumplimientoDiv'>";

    if (currentServerDateTime < sCumplimientoInicial) {
        htmlToRender += "Yes";
    } else {
        htmlToRender += "No";
    }

    htmlToRender += "</div>";

    return htmlToRender;
}

Now, I've added some extra stuff there by actually putting your Yes or No value inside a div, and giving it a class so you can apply custom styling if you want to. That's all really extra. At the simplest level, you could just return the "Yes" or "No" strings, like so:

if (currentServerDateTime < sCumplimientoInicial) {
    return "Yes";
} else {
    return "No";
}

Here is a great primer on the basics of Client Side Rendering.

The key thing you are missing is that your function needs to return a string representation of the HTML you want rendered on the page. If you don't return anything, nothing will get rendered.

1
  • You´re right, I use return statement and it works. Thank you!
    – Ledwing
    Sep 25, 2017 at 22:53

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.