Monday, 7 October 2013

Sharepoint 2013: Override display for App web part

My current project requires some custom CSS with the minimum amount of customisation. Instead of writing a stack of custom controls, we can 'intercept' the apps as they are being rendered and change their CSS at runtime.

The following is a sample of how this might look (I called my file blah.js):

(function () {
    var overrideContext = {};
    overrideContext.Templates = {};
    overrideContext.Templates.Header = "<div class='myheader'>";
    overrideContext.Templates.Footer = "</div>"
    overrideContext.Templates.Item = customItem;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

function customItem(ctx) {

    return '<div class="myheadercss"><h1>'+ctx.CurrentItem.Title+'</h1></div>'+
           '<div class="mycontentcss"><img class="myimagecss" src="'+ctx.CurrentItem.Image0+'" alt="Image" />'+
           '<h2>'+ctx.CurrentItem.Header0+'</h2><p class="mytextcss">'+ctx.CurrentItem.Content1+' <a href="'+ctx.CurrentItem.Link0+'" class="mylinkcss">Read More</a></p></div>'
}

I placed my .js file in masterpage/scripts, so in the 'Miscellaneous' section of the webpart properties, I can put a link to my file:

~sitecollection/_catalogs/masterpage/scripts/blah.js


No comments:

Post a Comment