SharePoint 2013 : Load Display Templates from Provider Hosted App or remote website

Display templates can only be stored in several places of SharePoint to get loaded, but it is possible to load a display template from a provider hosted app too. Normally Display Templates will be uploaded to every site collection inside the master page catalog, but with a little tweak those can be loaded from everywhere as long as it is accessible via a web server.

The local display template

Display templates will be executed not on the server, but on the client. Embedding remote scripts is something we do all the day. If we use jQuery or SPServices, for example. To load a display template we just need to use the function:

// Function to embed remote javascript
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
// load remote display template inside SharePoint
loadScript("http://localhost:9000/scripts/test.js", function(){
        
})

At the end of this snippet all that needs to be done is to define the location where the remote display template are located. In this case it is stored on a local  web server. This script needs to be added to the Display Templates in the Master Page gallery.
 http://www.n8d.at/blog/wp-content/uploads/2014/06/masterpage-displaytemplate-gallery-300x151.png
This script then can be referenced in the the JSLink.
 http://www.n8d.at/blog/wp-content/uploads/2014/06/displaytemplate-to-loadexternal.png
 In this case the path is “~sitecollection/_catalogs/masterpage/display template/loadExternal.js”.

The remote display template

Now the “real” display template can be created on any web site. The following snipped just register a custom action on a document library.

var registerCallout = function () {
    itemCtx = {};
    itemCtx.Templates = {};
    itemCtx.BaseViewID = 'Callout';
    // Define the list template type  
    itemCtx.ListTemplateType = 101;
    itemCtx.Templates.Footer = function (itemCtx) {
        return CalloutRenderFooterTemplate(itemCtx, AddCustomAction, true);
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
}
var AddCustomAction = function(renderCtx, calloutActionMenu) {
    // Add custom action  
    calloutActionMenu.addAction(new CalloutAction({
        text: "Custom Action",
        tooltip: 'This is your custom action',
        onClickCallback: function () { console.log('Alert from custom action'); }
    }));
}
SP.SOD.executeOrDelayUntilScriptLoaded(registerCallout, "callout.js");

When everything is correctly configured the custom action should be displayed on the document library.
http://www.n8d.at/blog/wp-content/uploads/2014/06/custom-action-from-remote-script-300x221.jpg

Conclusion

Remote loading of display templates is pretty useful during development or if display templates should be stored in a single location throughout an organisation. Those remote display templates are simply easier to maintain. Another use case might be that you keep your display templates inside the provider hosted website and just provision the load of the external javascript to SharePoint. Once again, you can upgrade the display templates without upgrading the app. Especially if the app is hosted on multiple environments. For me it speeded up the development process, but keep an eye on possible security issues. As cool as it is. Scripts can be easily hacked and replaced by malicious code if you embed it directly from the internet.