How to add resources when using JSLink

Question

I am using JSLink to change view of a custom list using this code,

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.BaseViewID = 2;
    overrideCtx.ListTemplateType = 17774;
    overrideCtx.OnPreRender = preRenderHandler17774;
    overrideCtx.OnPostRender = postRenderHandler17774;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Both preRender and postRender functions need to get some resources from a custom file which has been added to 15 hive "Resources" folder, Now I can use this code to get resources, but I am not sure how to best get resources here,

SP.SOD.executeOrDelayUntilScriptLoaded(function () {
  SP.SOD.registerSod("demoresources", 
    "/_layouts/15/ScriptResx.ashx?name=demoresources&culture=" + 
    STSHtmlEncode(Strings.STS.L_CurrentUICulture_Name));
 
  SP.SOD.executeFunc("demoresources", 'Res', function () {
    alert(Res.helloWorld);
  });
}, "strings.js");

Where is the best to place this code in above ?

And how can I get culture in preRender method ? as this is undefinied String.STS.L_CurrentUICul...

Answer 1

This error occurs since strings.js file is not yet loaded when OnPreRender method is invoked.

I would recommend to consider the following script for loading Resource file:

function loadResourceFile(resourceKey,complete)
{
    var resourceUrl = String.format("{0}/ScriptResx.ashx?name={1}&culture={2}", _spPageContextInfo.layoutsUrl,resourceKey,_spPageContextInfo.currentCultureName);
    SP.SOD.registerSod(resourceKey, resourceUrl);
    SP.SOD.executeFunc(resourceKey, 'Res.' + resourceKey, function () {
        complete(Res);
    });
}

Key points

• It has dependency only to init.js from SharePoint JavaScript Library (it is already loaded when when OnPreRender method is invoked)
• _spPageContextInfo.currentCultureName property is used to determine the current culture

Then the following example demonstrates how to load Resource file in template:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

      SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

        OnPreRender: function(ctx) {
          console.log('OnPreRender');
          loadResourceFile('MossChart',function(resdata){
             console.log('Resource file is loaded');
             console.log(resdata);
           });

        },
        OnPostRender: function(ctx) { 
           console.log('OnPostRender');
        }
      });

});

In the specified example MossChart.en-us.resx file is loaded

Answer 2

you need to use RegisterModuleInit this will make the CSR wait until upload the required resources.

for more info: Register CSR-override on MDS enabled SharePoint 2013 site

for culture, you can use this, _spPageContextInfo.currentCultureName