Im trying to implement a FAQ accordion SharePoint list. I managed to get the accordion working while using JSLink. Sadly the search is not working properly. I used the following code in my JSLink js:
(function () {
/*
* Initialize the variable that store the overrides objects.
*/
var overrideCtx = {};
overrideCtx.Templates = {
Header: function(ctx) {
var headerHtml = RenderTableHeader(ctx);
headerHtml += "</table>";
headerHtml += "<div id='accordion'>";
return headerHtml;
},
Footer: function (ctx) {
return "</div>";
},
Item: function(ctx) {
// Build a listitem entry for every announcement in the list.
var ret = "<h3 class='OutlookFAQ'>"+ctx.CurrentItem.Title+"</h3><div style='display:none;' class='OutlookFAQContent'><p>"+ctx.CurrentItem.Answer+"</p></div>";
return ret;
}
};
overrideCtx.BaseViewID = 1;
overrideCtx.ListTemplateType = 100;
overrideCtx.OnPostRender = [];
overrideCtx.OnPostRender.push(function()
{
$('#accordion h3').click(function(e) {
$(e.target).next('div').siblings('div').slideUp();
$(e.target).next('div').slideToggle();
});
});
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
As i sad, the accordion is working, the searchbox is beeing display. If I try to submit search a JS Error "TypeError: this.$T_3 is null" in sp.ui.listsearchbox.js pops up. Any ideas?
Regards
René
This error occurs due to the missing Search Status
element which is a part of search control and rendered in Footer
template
Search status element is used to display hints about search results. RenderSearchStatus
function is used for rendering Search status
Replace Footer rendering template
Footer: function (ctx) {
return "</div>";
}
with
Footer: function (ctx) {
var footerHtml = "</div>";
footerHtml += RenderFooterTemplate(ctx); //render standard footer (pager, search status)
return footerHtml;
}
Blog post Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion contains a working example of List View rendered as Accordion.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.