Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.
Microsoft cloud engineer - SharePoint, Office 365, Azure, DotNet, Angular, JavaScript.

Quick Edit supports JS Link and Client Side Rendering

Today I attended #SPSChicagoBurbs and the session by Wes Preston (@idubbs)  on Client Side Rendering.   A question was asked by someone in the audience if Quick Edit (new Data Sheet) would support CSR rendering.   The consensus was probably not because of the advanced rendering, event handlers, and cell editing.

 

I gave it a quick test and surprisingly it worked!  

Smile

 

 

When I renamed a file to become “test.txt” it turns the background green, text white, and even shows a custom icon <IMG> tag.   This could be leveraged to give end users real-time feedback on the values entered.   Unlike a JQuery page load event which only triggers once, this triggers per row as values are changed.

 

Video

csr-quick

 

Screenshot

5-17-2014 12-35-08 PM

 

Code

//override
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'LinkFilename': { 'View': ConditionalStatus }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function ConditionalStatus(ctx) {
    var ret;
    console.log(ctx.CurrentItem.FileLeafRef);
    if (ctx.CurrentItem.FileLeafRef== "test.txt") {
        ret = "
" + "
" + ctx.CurrentItem.FileLeafRef + "
"; } else { ret = ctx.CurrentItem.FileLeafRef; } return ret; }

© Copyright 2016
@ SPJeff

Return to Top ▲Return to Top ▲