SharePoint JSLink Help required - Run Asnc code in OnPreRender

Question

I am using JSlink file and using two functions (OnPreRender, Item).

I want to customize Item rendering but before that I want to get data from another list using OnPreRender. The issue I am facing that Item function executes before OnPreRender. Please help how can stop execution of Item until OnPreRender finishes. The below is the code.

(function () {
    function OnPreRenderDocItemTemplate(renderCtx) {
        SP.SOD.executeOrDelayUntilScriptLoaded(loadContext, 'sp.js');
        function loadContext() {
            var context = SP.ClientContext.get_current();
            var web = context.get_web();
            currentUser = web.get_currentUser();
            context.load(currentUser);
            context.executeQueryAsync(onSuccessMethod, onRequestFail);
        }
    }

    function onSuccessMethod(sender, args) {
        var account = currentUser.get_loginName();
        var currentUserAccount = account.substring(account.indexOf("|") + 1);
        alert(currentUserAccount);

        //Also needs to write logic to get data from another list
    }
    // This function runs if the executeQueryAsync call fails.
    function onRequestFail(sender, args) {
        alert('request failed' + args.get_message() + '\n' + args.get_stackTrace());
    }



    function OnPreRenderItem(renderCtx) {

        // My Login not yet
        alert("test");

        return RenderItemTemplate(renderCtx);
    }


    function RegisterDocViewTemplate() {

        var viewContext = {};
        viewContext.Templates = {};
        viewContext.Templates.OnPreRender = OnPreRenderDocItemTemplate;
        viewContext.Templates.Item = OnPreRenderItem;

            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(viewContext);
    }
    ExecuteOrDelayUntilScriptLoaded(RegisterDocViewTemplate, 'clienttemplates.js');

})();

Answer 1

There area a couple things here that are probably causing the delay. First is executeOrDelayUntilScriptLoaded, obviously is making that code wait longer to execute, and I'm pretty sure that's a non-blocking process, so the rendering will just continue. Secondly, once that does eventually start to execute, what it does is fire off an asynchronous call, so that definitiely is going to add more delay and let the rendering process continue.

I don't think you can make the rendering process wait for an async call, and even if you could, you probably wouldn't want to because it will make it seem to the user that the page is taking a very long time to load.

If you need to make an async call to retrieve data from another list, consider using the Item rendering (or even a specific Field) to add some custom markup that you can easily find later, and fire off the async call after the rendering is done, then deal with the new data whenever it arrives. See my answer to this other question for an example.

Answer 2

The JSOM code you have shared is running asynchronously, hence the execution continues even though the values have not been fetched and your success function has not been called yet.

jQuery provides deferred objects, also referred to as Promises to hold execution until an asynchronous operation is running or in other words converts your code into synchronous code.

You can refer this to learn how to create a synchronous version of executeQueryAsync method using promises.

Coming specifically to your problem, you can change your code like this:

(function () {
var account;
var account2;
var currentUserAccount;
var currentUserAccount2;
function OnPreRenderDocItemTemplate(renderCtx) {
    SP.SOD.executeOrDelayUntilScriptLoaded(loadContext, 'sp.js');
    function loadContext() {

        SP.ClientContext.prototype.executeQuery = function() {
            var deferred = $.Deferred();
            this.executeQueryAsync(
                function(){ deferred.resolve(arguments); },
                function(){ deferred.reject(arguments); }
            );
            return deferred.promise();
        };
        var context = SP.ClientContext.get_current();
        var web = context.get_web();
        currentUser = web.get_currentUser();
        context.load(currentUser);
        context.executeQuery().then(function (sender, args) {
            account = currentUser.get_loginName();
            //  currentUserAccount = account.substring(account.indexOf("|") + 1);
            //  alert(account);
            //}), (function (sender, args) {
            //    alert('request failed' + args.get_message() + '\n' + args.get_stackTrace());
        }).then(function () {
            debugger;
            var context = SP.ClientContext.get_current();
            var web = context.get_web();
            currentUser = web.get_currentUser();
            context.load(currentUser);
            return context.executeQuery();
        }).then(function (sender, args) {
            account2 = currentUser.get_loginName();
            //  currentUserAccount = account.substring(account.indexOf("|") + 1);
            alert(account2);
        });
    }
}


function OnPreRenderItem(renderCtx) {

    return RenderItemTemplate(renderCtx);

}


function RegisterDocViewTemplate() {

    var viewContext = {};
    viewContext.Templates = {};
    viewContext.Templates.OnPreRender = OnPreRenderDocItemTemplate;
    viewContext.Templates.Item = OnPreRenderItem;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(viewContext);
}
ExecuteOrDelayUntilScriptLoaded(RegisterDocViewTemplate, 'clienttemplates.js');

})();