JSLink makes search textbox to disappear in Page Library Custom View

Question

I have created a view in a page library and added a custom JSLink that should render the items as follows:

Each item is a Page in the Page library. The problem is that when I add my customJsLink.js to the view the search Box for the Page Library disappears. I was able to get back the paging because it also disappeared but I don't know how to get the searchbox back

This is the code of the javascript file:

window.Experiences = window.Experiences || {};
window.Experiences.NewsLink = {
    header: function (ctx) {
        return "";
    },

    body: function (ctx) {
        var title = ctx.CurrentItem["Title"];
        var pageRef = ctx.CurrentItem["FileRef"];
        var description = ctx.CurrentItem["PublishingPageContent"];
        var linkRef = ctx.CurrentItem["LinkFilenameNoMenu"];
        var image = ctx.CurrentItem["PublishingRollupImage"];
        var imageSplit = ctx.CurrentItem["PublishingRollupImage"].split("src=")[1];
        var imageSrc = imageSplit.split("\"")[1];

        return "<li><img src='"+ imageSrc +"' alt=''/><div class='exp_info'><h4><a href='"+ linkRef + "'>"+ title +"</a></h4>" + description + "</div></li>";
    },

    pagingControl: function (ctx) {
        var firstRow = ctx.ListData.FirstRow;
        var lastRow = ctx.ListData.LastRow;
        var prev = ctx.ListData.PrevHref;
        var next = ctx.ListData.NextHref;

        var html = " <div class='mod_paginacion'> <div class='Paging'>";
        html += prev ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + prev + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>" : "";
        html += "<span class='ms-paging'><span class='First'>" + firstRow + "</span> - <span class='Last'>" + lastRow + "</span></span>";
        html += next ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + next + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>" : "";
        html += "</div></div></ul></div>";

       return html;
    },

    footer: function (ctx) {
       var footerHtml = '<table class="ms-bottompaging"><tr><td>';
        var next = ctx.ListData.NextHref;
        footerHtml += "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='javascript:void(0);' onclick=\"RefreshPageTo(event, &quot;" + next + "&quot;);return false;\"><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>";
        footerHtml += "</td></tr></table></ul></div>";

      return footerHtml;
    }
};

// anonymous self-executing function to setup JSLink templates on page load..
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    //Tempate overrides
    overrideCtx.Templates.Header = window.Experiences.NewsLink.header;
    overrideCtx.Templates.Item = window.Experiences.NewsLink.body;
    overrideCtx.Templates.Footer = window.Experiences.NewsLink.pagingControl;

    //List Settings
    //Pages List has Type 850 publishing page library
    //BaseViewID = 1 means default View
    //overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 850;

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

Any idea in how to get the search box back again?

Answer 1

By default RenderTableHeader function (clienttemplates.js) is invoked for rendering List View Header which in turn contains Search Box control.

Since you are overriding header template with custom one that returns empty output, no Search Box is displayed.

So, if you intend to display default List View Header then just do not override header template. From another hand, in order to override header but preserve standard controls like Search Box, you could consider the following approach:

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Header = renderCustomHeader;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();


function renderCustomHeader(renderCtx) {  
    var headerHtml = RenderTableHeader(renderCtx); //default header template
    //insert custom header rendering here..  
    return headerHtml;
}

Answer 2

I think that the header function in the display template is in charge of rendering the search box (and even other stuff that you have in a list header). You are overwriting the Header with nothing. Take a look to the OOB clienttemplates.js file (not sure, but I think is in the 15/templates folder), and look for the code that renders the OOB header. It's not an easy stuff, but you don't have any other option.

[UPDATED]: Maybe it's easier first if you don't override the header, and see if any OOB header is rendered. Cooment this line and see what happens:

//overrideCtx.Templates.Header = window.Experiences.NewsLink.header;