Unreachable JS trying to use Status Indicators - SharePoint Online

Question

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

Answer 1

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');