Thursday, April 7, 2016

Using JSLink to Change UI of List View

http://www.sharepointnutsandbolts.com/2013/01/using-jslink-to-change-ui-of-sharepoint_20.html

My sample code:

(function () {
    var overrideContext = {};
    overrideContext.Templates = {};
    overrideContext.Templates.Item = overrideTemplate;
    overrideContext.Templates.Header = overrideHeader;
    overrideContext.Templates.Footer = overrideFooter;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
function overrideTemplate(ctx) {
    return "<div style='font-size:18px;border:solid 1px Silver;margin-bottom:6px;padding:4px;width:200px;'>"
        + ctx.CurrentItem.Project_x0020_Name
        + "</div>";
}
function overrideHeader() {
    return "<h2>Projects</h2>";
}
function overrideFooter() {
    return "<h3></h3>";
}

No comments:

Post a Comment