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; }

14 Comments

      1. Hey Jeff.. Thanks al ot .. I have an query will this method help me restrict edit and delete operations on list based on certain values coming from database. Also, I wanted to know can we modify the call to our list web services in our HTTP module. i.e. I am writing script to send the call to list service with query dept=HR now in module i need to change it to dept=IMS is this possible to tamper request before the response is completed. i tried few steps I was able to read request but not write it. Can you please guide on this.. Thanks

  1. Hi Jeff, is it possible to override items in a combo while in quick edit? I’m trying to filter which options a user can select.

  2. Hi Jeff,
    Let me know if you know anything on this…
    I have a choice column in my custom list in SharePoint 2013. What I want is as follows:
    I go to quick edit view in SharePoint. I change the value of choice field in quick edit mode and a corresponding value should be filled in another text field.
    I searched a lot but could not find a change event for the choice (dropdown) in quick edit mode.
    Please let me know if you have any idea.
    Thanks,
    Nirav

    1. Interesting. Not sure exactly how to implement that in Quick Edit cascading across columns.

      Why not use a SharePoint calculated column? That can take values from one source field to display in another. Simple and supported.

      Making that occur in real-time on QuickEdit might involve some sort of DOM “.parent().nextChild()” selector to walk over to the next in the current row. Check out http://www.youmightnotneedjquery.com for creative ways to walk DOM tree without jQuery library dependency.

      Cheers!

      1. Hi Jeff,

        It is really difficult to get the id of the field in Quick Edit. Sharepoint has lots of nesting and by navigating DOM would be a terrible task.
        Let me know if you come across solution.

        Thanks,
        Nirav

  3. I am trying to replicate this on SP online site but it is not working. Does Modern UI need to be enabled for it to work?

    1. Hi Rinu,

      Good question. The CSR (Client Side Rendering) is intended to update HTML view only.

      However, line #19 after (ret=””;) would be a good place to try adding a HTTP GET/POST execution. That way it occurs only when the IF () statement is true.

Leave a Comment

Return to Top ▲Return to Top ▲