2

I follow this tutorial to get column painted

I have a list called: "Seguimiento de Sistemas"

It have a column with select list called: "Status"

Now I have that list in a WebPart and js into MasterPage and I link JS using JSLink into my WebPart.

JS

(function () {
    var statusFieldCtx = {};


    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
        "Status": {
            "View": StatusFieldViewTemplate
        }
    };

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

function StatusFieldViewTemplate(ctx) {

    var _statusValue = ctx.CurrentItem.Status;

     if (_statusValue == 'Completed')
     {
        return "<img src='/SiteAssets/green.png'/>";
     }

     if (_statusValue == 'In Progress')
     {
        return "<img src='/SiteAssets/yellow.png'/>";
     } 

     if (_statusValue == 'Not Started')
     {
        return "<img src='/SiteAssets/red.png'/>";
     }   

}

I debbug it, problem is when page load it never hint or execute:

function StatusFieldViewTemplate(ctx) {...

like it no exist. Can someone help me what is wrong there?

Note: If I use console.log(ctx) before function StatusFieldViewTemplate(ctx) {... I get undefined

UPDATE JS load correctly on masterpage and I can access debug all before function commented above

enter image description here

1
  • Do you happen to have other webparts on the page using JSLink? If so, only one ends up loading. Can you confirm via your browser's developer tools whether this particular file is getting loaded? Aug 29, 2017 at 18:52

1 Answer 1

0

Try ExecuteOrDelayUntilScriptLoaded to wait until clienttemplates.js file is fully loaded. The jQuery load event

(function () {})(); 

executes when the page is fully loaded but that doesn't mean all the js files are also loaded.

Your code after modification is below.

customCode = function(){
    var statusFieldCtx = {};
    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
        "Status": {
            "View": StatusFieldViewTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
        statusFieldCtx
    );
)

ExecuteOrDelayUntilScriptLoaded(customCode, 'clienttemplates.js');

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.