SharePoint JSLink Display Templates

Links

• Using the JSLink property to change the way your field or views are rendered in SharePoint 2013
• JSLink: you’ve got the whole SharePoint in your hands
• JSLink and Display Templates Series by Martin Hatch
• JSLink und MDS 1
• JSLink und MDS 2
• Client-side rendering (JS Link) code samples
• SharePoint list conditional formatting with JSLink

Sample Code

Sample JavaScript code for a JSLink template.

(function () {
    var oCtx = {};
    debugger;
    oCtx.Templates = {};
    oCtx.Templates.Fields = {};
    oCtx.Templates.Fields.Course = { 'View' : '<div style="min-width:100px;"><#=courseFormat()#></div>' };

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

function courseFormat() {
    var course = ctx.CurrentItem.Course;
    var values = new Array(course.length);

    for (var i = 0; i < course.length; i++) {
        values[i] = course[i].Label;
    }

    return values.join('<br>');
}

function course1Format() {
    var course = ctx.CurrentItem.Course1;
    var values = new Array(course.length);

    for (var i = 0; i < course.length; i++) {
        values[i] = course[i].Label;
    }

    return values.join('<br>');
}