How do I load user's data before JSLink renders the form

Question

Below is my simple code to render the "Activitydescription" field in the newform.aspx. This is working.

(function () {    
var ActivitiesListContext = {};
ActivitiesListContext.Templates = {};
ActivitiesListContext.Templates.Fields = {
    "ActivityDescription": {
            "NewForm": RenderField // this function is present in the code, but not shown here
    }
};

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

Going further, my requirement is to load current user's info before the JSLink renders the list form. I'm not able to use the '_spPageContextInfo.webAbsoluteUrl' to make a REST call, since the '_spPageContextInfo' is not loaded at the stage JSlink is rendered.

I have to render the form conditionally based on some user properties. How do I achieve that?

Answer 1

My usual strategy when having to combine CSR with async actions is to use CSR to render a placeholder element, like a div with a specific ID that I can then reference later when the async call is complete, and kick off the async call(s) from either OnPostRender or $(document).ready or _spBodyOnLoadFunctionNames or whatever later time makes sense for what I'm trying to do.

In your case, if you are conditionally rendering the form, I'd say hide everything conditional (maybe in OnPostRender? The form DOM should be available by then?), kick off your async call(s), and then un-hide or do whatever your conditional rendering is based on your results when the async calls return.

The CSR process happens very early, so there's no really good way to use it other than to give yourself placeholders if you need to get any other data than the default field value data that comes in with the form or view. (Which is nothing if it's the New form.)

Answer 2

You can include something like this and call document.ready function repeatedly with the functionality you want in every document.ready custom function on your custom CSR JSlink script.

if (window.jQuery && (location.href.indexOf("EditForm.aspx") > -1 || location.href.indexOf("DispForm.aspx") > -1)) {
$(document).ready(function () {

    ExecuteOrDelayUntilScriptLoaded(selctedAffectedtext, "sp.js");

});

Mostly JQuery can also be added directly to the .js file to avoid collisions from other jquery to be loaded at the same time.