JSLinkは、ページライブラリのカスタムビューで消えるように検索テキストボックスを作ります

Question

ページライブラリにビューを作成し、項目を次のようにレンダリングする必要があるカスタムJSLinkを追加しました。

各項目はページライブラリのページです。問題は、私のcustomjslink.jsをビューに追加すると、ページライブラリの検索ボックスが消えます。それも消えたので私はページングを戻すことができましたが、私は検索ボックスを返す方法がわからない

これはJavaScriptファイルのコードです：

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

.

検索ボックスを再び返す方法の任意の考え？

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;