2

I was working with JS Link in Sharepoint and managed to render a custom list. Here's a brief extract from the code:

context.Templates.View = RenderBodyTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);

RenderBodyTemplate is a function, which will take context as its parameter and returns HTML markup as a string. Then, RegisterTemplateOverrides accomplishes the rendering.

So, the rendering worked fine, but then I needed a search box and search functionality for the custom list. I noticed there was a checkbox, which would display the search box for my custom list in its Properties window.

After setting the search box (this one)

enter image description here

visible without a JS Link, everything worked nicely out of the box. However, once I override the template with my custom markup using JS Link, the search box disappears. I know I'd have to render it separatedly somehow in Javascript, but how can it be done? How can I render the search box along with my custom list rendering, so that the search functionality also works?

  • What is it you are trying to achieve? Do you really need to render the whole View yourself? If you only render the Items it won't 'destroy' all other default bricks of the View. – Danny '365CSI' Engelman Jan 17 '17 at 10:03
  • Yes, quite true. I could render the items separatedly and I actually got a little bit further. I got the header visible, but I still can't figure out how to style individual element, like Add-link and the search box. There is this function RenderTableHeader, but how can I style the elements? I would like to make HTML markup for these elements myself. – Henri Korpela Jan 17 '17 at 10:43
  • ClientSideRendering (CSR) (JSLink is only the technique to link a JavaScript file) is about overruling the Rendering SharePoint does. So if you replace the View with your own you destroy what SharePoint would built. Since the Search box is built Server side and then pushed to the client, there is no (SharePoint) client side code available you can use. That means you would have to built all that functionality yourself. So if you need those elements, do not start with creating a blank View – Danny '365CSI' Engelman Jan 17 '17 at 11:53
  • Note that CSR is buggy; probably one of the reasons why Microsoft ditched it, it is not available in Modern Experiences. – Danny '365CSI' Engelman Jan 17 '17 at 11:55
  • You can add the html of search box before the first item – akbar ali Jan 17 '17 at 14:45
3

To display a standard list view control which contains pivot menu, inline search control and etc. RenderTableHeader function from sp.clienttemplates.js is intended.

That means that when the list view template is getting rendered this way:

context.Templates.View = function(renderCtx) { 
    var viewHtml ='';
    //custom view rendering goes here...
    return viewHtml;  
}

it could be changed to:

context.Templates.View = function(renderCtx) { 
    var viewHtml ='';
    //render standard view header first
    viewHtml+= RenderTableHeader(renderCtx); 
    //custom view rendering goes here...
    return viewHtml;  
}

to get custom view rendered with standard list view header as demonstrated below.

Example

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

     Templates: {

       View: function(renderCtx) { 
         var listData = renderCtx.ListData;
         if (renderCtx.Templates.Body == '') {
             return RenderViewTemplate(renderCtx);
         }

         var viewHtml ='';
         viewHtml+= RenderTableHeader(renderCtx); //insert header 
         viewHtml += '<ul>';
         for (var idx in listData.Row) {
                var listItem = listData.Row[idx];
                viewHtml += '<li>';
                viewHtml += listItem.Title;
                viewHtml += '</li>';
         }
         viewHtml += '</ul>';
         return viewHtml;
       }
     }       

   }); 

});

enter image description here

  • 1
    Thank you, this does the trick - at least in a general sense. Similar approach would've worked for me before, had I not encountered an issue, which was totally unexpected to me. I'll elaborate on that in another answer. – Henri Korpela Jan 30 '17 at 18:05
1

Not an answer to the question, specifically, since an answer given by Vadim Gremyachev is comprehensive enough, but more of a tip.

The problem with a messy markup in my custom list custom layout stemmed from the fact that I used table-elements in my custom markup. This causes problems, because Sharepoint inserts some attributes of its own to table-elements and also changes placements of elements in the markup! I would've never guessed that to cause problems, hence I did not bring it forth in my question.

Let me repeat: do not use table-elements in custom markup for a custom list in JS Link!

I just wanted to point this out to people, who may have encountered the same annoying problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.