SharePoint Client Side Rendering – Default Field Rendering

Using CSR / JSLink to modify forms and views is a very powerful tool that can be used to great effect.  You can use SharePoint essentially out of the box and get more powerful features without having to rely on 3rd party embellishments.

Using methods outlined on other blogs such as https://www.codeproject.com/Articles/610259/SharePoint-Client-Side-Rendering-List-Forms gives you the outline of how to do this.  You can render the value with your own JavaScript  to get the result you like.

What if you want to render a field in the default SharePoint manner but with an extra class added, or you wish  to render the display version of the field instead of the edit version?

Well as outlined here: https://stackoverflow.com/questions/31516512/js-field-rendering-return-standard-field-rendering you can incorporate the correct default renderer you wish.

However – what if you don’t know what the field type is or what the form type is?  A nice generic function would be nice.  Well after digging down into the MS code gives you can try this:

function renderDefaultField(ctx, baseViewID) {
    if (baseViewID)
        return SPClientTemplates._defaultTemplates.Fields.default.all.all[ctx.CurrentFieldSchema.Type][baseViewID](ctx);
    else
        return SPClientTemplates._defaultTemplates.Fields.default.all.all[ctx.CurrentFieldSchema.Type][ctx.BaseViewID](ctx);
}

This can be used in the following way:

(function () {
    var context = {};
    context.Templates = {};
    context.Templates.Fields = {
        'Field1': {
            'NewForm': showMyField
        },
        'Field2': {
            'NewForm': displayMyField
        }
    };

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

and implemented thusly:

function showMyField(ctx) {
    return '<span style="color:red">' + renderDefaultField(ctx) + '</span>';
}

or overriding the display type:

function displayMyField(ctx) {
    return '<span style="color:red">' + renderDefaultField(ctx, 'DisplayForm') + '</span>';
}

Easy!

A jQuery Progress Bar Plugin

Here is a simple progress indicator written as a jQuery plugin.  Useful for using with iterative asynchronous processes.

Simply create an element on the page (div) and call CSProg(total, msg) on it with the total no of actions  to complete and an optional message.

Each time an action completes call increment() to update the progress bar / message.

Complete by calling complete(msg) with an optional message.

The colour of the bar and message come from the container color and background-color CSS properties respectively.  These will contrast as the bar passes the message area.

JavaScript:

(function ($) {
    $.fn.CSProg = function (total, msg) {
        if (!$(this).height()) $(this).height(20);
        this.$progFrame = $(this).find('.cs-progFrame');
        var foreColour = $(this).css('color');
        var bkColour = $(this).css('background-color');
        if (bkColour == 'rgba(0, 0, 0, 0)' || bkColour == 'transparent') bkColour = '#fff';
        if (!this.$progFrame.length) this.$progFrame = $(document.createElement('div')).attr({
            'class': 'cs-progFrame'
        });
        this.$progFrame.attr({
            'data-total': total,
            'data-current': 0,
            'data-message': msg
        }).css({
            'text-align': 'center',
            'position': 'relative',
            'border': '1px solid ' + foreColour
        });
        $(this).append(this.$progFrame);

        this.$progFrameText = $(this).find('.cs-progFrameText');
        if (!this.$progFrameText.length) this.$progFrameText = $(document.createElement('div')).attr({
            'class': 'cs-progFrameText'
        }).css({
            'color': foreColour,
            'background-color': bkColour
        });
        this.$progFrame.append(this.$progFrameText);

        this.$progBar = $(this).find('.cs-progBar');
        if (!this.$progBar.length) this.$progBar = $(document.createElement('div')).attr({
            'class': 'cs-progBar'
        }).css({
            'position': 'absolute',
            'top': 0,
            'margin': 0,
            'color': bkColour,
            'background-color': foreColour,
            'overflow': 'hidden'
        });
        this.$progFrame.append(this.$progBar);

        this.$progBarContent = $(this).find('.cs-progBarContent');
        if (!this.$progBarContent.length) this.$progBarContent = $(document.createElement('div')).attr({
            'class': 'cs-progBarContent'
        });
        this.$progBar.append(this.$progBarContent);

        this.$progFrame.height($(this).height()).width($(this).width()).show();
        this.$progFrameText.height($(this).height()).width($(this).width()).css({
            'line-height': $(this).height() + 'px'
        }).show();
        this.$progBar.height($(this).height()).width(0);
        this.$progBarContent.height($(this).height()).width($(this).width()).css({
            'line-height': $(this).height() + 'px'
        });
    };

    $.fn.increment = function () {
        var total = parseInt(this.$progFrame.attr('data-total'));
        var current = parseInt(this.$progFrame.attr('data-current'));
        var message = this.$progFrame.attr('data-message');
        if (message)
            message = message + ': ';
        else
            message = '';
        message = message + (current + 1) + '/' + total;
        current++;
        if (this.$progBar && this.$progFrame && this.$progFrameText && this.$progBarContent) {
            this.$progBar.width((current / total) * this.$progFrame.width());
            this.$progFrame.attr({
                'data-current': current
            });
            this.$progFrameText.text(message);
            this.$progBarContent.text(message);
        }
    };

    $.fn.complete = function (msg) {
        if (this.$progBar && this.$progFrame && this.$progFrameText && this.$progBarContent) {
            msg = (typeof msg === 'undefined') ? '' : msg;
            this.$progBar.width(this.$progFrame.width());
            this.$progBarContent.text(msg);
            this.$progFrameText.text(msg);
        }
    };

}(jQuery));

Example:

<div id="cont"></div>

 

$('#cont').CSProg(10, 'Things happening');

function onUpdate(){
    $('#cont').increment();
}

function onComplete(){
    $('#cont').complete('Done');
}