JQuery accordion using content search web part in SharePoint server 2013

jquery accordion content search webpart sharepoint online
InfoPath alternatives for form designing SharePoint

In this article, I have explained how to create a jQuery accordion using content search web part (CSWP) to display dynamic data in SharePoint server 2013.

In the first step, let’s create the Authoring and Publishing Site Collections. Authoring Site collection allows authors to manage their website content while the Publishing Site collection reviews the content from the authoring site collection.

Also you can read:
– Create a chart using chart.js In sharepoint server 2013

– Bind SharePoint list data using jQuery datatable using content search web part CSWP in SharePoint server 2013

– Managed metadata service in SharePoint 2013

Open the Authoring Site Collection. Create a list named “Accordion” that contains title and Description

JQuery accordion sharepoint 2013
JQuery accordion sharepoint 2013

Let’s go and create a control and a template to display the items.
– Control Template
It provides the overall structure (layout) of the HTML elements along with start and end tags.

– Item Template
It renders the items from the list, and contains text and pictures.

Now, let’s create two display templates for displaying a bootstrap carousel menu control and a menu item.
Code – Accordion Control Template

Upload the script and CSS into style library.

JQuery accordion sharepoint 2013 content search webpart
JQuery accordion sharepoint 2013 content search webpart

 

Add the scripts and CSS into Control template.

<script>
$includeScript(this.url, “~sitecollection/Style%20Library/Accordion/jquery-ui.css”);
$includeCSS(this.url, “~sitecollection/Style%20Library/Accordion/jquery-1.12.4.js”);
$includeScript(this.url, “~sitecollection/Style%20Library/Accordion/jquery-ui.js”);
</script>
Now, let’s define the HTML layout to the Control Template
<div id=”accordion”>
_#= ctx.RenderItems(ctx) =#_
</div>
The full code looks like the following.
<html xmlns:mso=”urn:schemas-microsoft-com:office:office” xmlns:msdt=”uuid:C2F41010-65B3-11d1-A29F-00AA00C14882″>
<head>
<title>Accordion Control</title>

<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt=”string”>0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt=”string”>Display a menu Item</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt=”string”>0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt=”string”>;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt=”string”>1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt=”string”>True</mso:HtmlDesignConversionSucceeded>
<mso:CrawlerXSLFile msdt:dt=”string”></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt=”string”></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignStatusAndPreview msdt:dt=”string”>http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/bannercontrol.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]–>
</head>

<body>
<script>
$includeScript(this.url, “~sitecollection/Style%20Library/Accordion/jquery-ui.css”);
$includeCSS(this.url, “~sitecollection/Style%20Library/Accordion/jquery-1.12.4.js”);
$includeScript(this.url, “~sitecollection/Style%20Library/Accordion/jquery-ui.js”);
</script>
<div>
<!–#_if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()){return “”;}
ctx.ListDataJSONGroupsKey = “ResultTables”;
ctx[“CurrentItems”] = ctx.ListData.ResultTables[0].ResultRows;
var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();

AddPostRenderCallback(ctx, function() {
$.getScript(siteURL + “”);

$( function() {
var icons = {
header: “ui-icon-circle-arrow-e”,
activeHeader: “ui-icon-circle-arrow-s”
};
$( “#accordion” ).accordion({
icons: icons
});
$( “#toggle” ).button().on( “click”, function() {
if ( $( “#accordion” ).accordion( “option”, “icons” ) ) {
$( “#accordion” ).accordion( “option”, “icons”, null );
} else {
$( “#accordion” ).accordion( “option”, “icons”, icons );
}
});
});
});
_#–>
<div id=”accordion”>

_#= ctx.RenderItems(ctx) =#_

</div>
<button id=”toggle”>Toggle icons</button>
</div>
</body>
</html>

Let’s go to Item template and declare the managed properties and necessary variables.
<!–#_
var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();
var itemIdx = ctx.CurrentItemIdx+1;
var title = $getItemValue(ctx, “Title”);
var desc = $getItemValue(ctx, “Description”);
var esActive =””;

_#–>

Render the HTML structure with the list item information.
<!— HTML Goes Here –>
<h3>_#= title =#_</h3>
<div>
<p>_#= desc =#_</p>
</div>
Overall Item template code looks like the following.
<html xmlns:mso=”urn:schemas-microsoft-com:office:office” xmlns:msdt=”uuid:C2F41010-65B3-11d1-A29F-00AA00C14882″>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Accordion Item</title>
<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt=”string”>0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt=”string”>Displays an Accordion Item.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt=”string”>0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt=”string”>;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt=”string”>1</mso:HtmlDesignAssociated>
<mso:ManagedPropertyMapping msdt:dt=”string”>’Title’:’Title’,’Description’:’Description'</mso:ManagedPropertyMapping>
<mso:CrawlerXSLFile msdt:dt=”string”></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt=”string”></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignConversionSucceeded msdt:dt=”string”>True</mso:HtmlDesignConversionSucceeded>

<mso:HtmlDesignStatusAndPreview msdt:dt=”string”>http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/BannerItem.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]–>
</head>

<body>
<div>
<!–#_
var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();
var itemIdx = ctx.CurrentItemIdx+1;
var title = $getItemValue(ctx, “Title”);
var desc = $getItemValue(ctx, “Description”);

_#–>

<!— HTML Goes Here –>

<h3>_#= title =#_</h3>
<div>
<p>_#= desc =#_</p>
</div>
</div>
</body>
</html>
Upload the display template under Site Settings – > Master page and page layouts -> Display Templates -> Content Web Parts.

JQuery accordion sharepoint 2013 content search web part
JQuery accordion sharepoint 2013 content search web part

Now going to insert some data into Accordion list from authoring site collection

sharepoint 2013 jquery accordion

Run the search service application Crawl now

sharepoint 2013 jquery accordion content search webpart
sharepoint 2013 jquery accordion content search webpart

 

Now, let’s go to SharePoint page.

Add a Content Search Web Part into this page.

sharepoint 2016 jquery accordion content search webpart
sharepoint 2016 jquery accordion content search webpart

 

Map a search query to get the result from the authoring site collection.

Click Edit Web Part -> change query.

sharepoint online jquery accordion content search webpart
sharepoint online jquery accordion content search webpart

Provide number of items to display.

sharepoint online jquery accordion content search webpart 1
sharepoint online jquery accordion content search webpart 1

 

Choose the display templates.

jquery accordion content search webpart sharepoint 2016
jquery accordion content search webpart sharepoint 2016

Click OK. Under property mapping section, map the managed properties of the title, description.

jquery accordion content search webpart sharepoint 2013
jquery accordion content search webpart sharepoint 2013

Click OK to complete the setup.

The following is the final result.

jquery accordion content search webpart sharepoint online
jquery accordion content search webpart sharepoint online

Click on the second topic

jquery accordion content search webpart sharepoint online office 365
jquery accordion content search webpart sharepoint online office 365

Note:
The result has been displayed using Search Service. You need to run the Search Service application. After adding the content into the SharePoint list, the result will be successfully displayed into the page.

Accordion Reference:
https://jqueryui.com/

Similar SharePoint 2013 Tutorials


Leave a Reply