JQuery Tabs using content search web part in SharePoint 2013

JQuery Tabs using content search web part in SharePoint 2013

In this article, I have explained how to create a jQuery tabs 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.

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

JQuery Tabs using content search web part in SharePoint 2013
JQuery Tabs using content search web part in 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 – Tabbed Control Template

Upload the script and CSS into style library.


JQuery Tabs using content search web part in SharePoint 2016
JQuery Tabs using content search web part in SharePoint 2016

Add the scripts and CSS into Control template.

<script>

$includeScript(this.url, “~sitecollection/Style%20Library/JqueryTabs/jquery-ui.css”);

$includeCSS(this.url, “~sitecollection/Style%20Library/JqueryTabs/jquery-1.12.4.js”);

$includeScript(this.url, “~sitecollection/Style%20Library/JqueryTabs/jquery-ui.js”);

</script>

Now, let’s define the HTML layout to the Control Template

<div id=”tabs”>

<ul>

<li><a href=”#tabs-1″>Sharepoint</a></li>

<li><a href=”#tabs-2″>Javascript</a></li>

<li><a href=”#tabs-3″>ASP.NET</a></li>

</ul>

_#= 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>Tabbed Control</title>

<!–[if gte mso 9]><xml>

<mso:CustomDocumentProperties>

<mso:TemplateHidden msdt:dt=”string”>0</mso:TemplateHidden>

<mso:MasterPageDescription msdt:dt=”string”>Display a Tabbed

Control</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>

$includeCSS(this.url, “~sitecollection/Style%20Library/JqueryTabs/jquery-ui.css”);

$includeScript(this.url, “~sitecollection/Style%20Library/JqueryTabs/jquery-

1.12.4.js”);

$includeScript(this.url, “~sitecollection/Style%20Library/JqueryTabs/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 + “”);

$( “#tabs” ).tabs();

});

_#–>

<div id=”tabs”>

<ul>

<li><a href=”#tabs-1″>Sharepoint</a></li>

<li><a href=”#tabs-2″>Javascript</a></li>

<li><a href=”#tabs-3″>ASP.NET</a></li>

</ul>

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

</div>

</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 tabCount = “#tab”;

_#–>

Generate the Tab id from the variable tab count and variable itemIdx for getting the index value

Ex: 1, 2, 3….

Render the HTML structure with the list item information.

<!— HTML Goes Here –>

<div id=”_#=tabCount=#__#=itemIdx=#_”>

<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>Tabbed Item</title>

<!–[if gte mso 9]><xml>

<mso:CustomDocumentProperties>

<mso:TemplateHidden msdt:dt=”string”>0</mso:TemplateHidden>

<mso:MasterPageDescription msdt:dt=”string”>Displays an Tabbed

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>

<script>

</script>

<body>

<div>

<!–#_

var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();

var itemIdx = ctx.CurrentItemIdx+1;

var title = $getItemValue(ctx, “Title”);

var desc = $getItemValue(ctx, “Description”);

var tabCount = “tabs-“;

_#–>

<!— HTML Goes Here –>

<div id=”_#=tabCount=#__#=itemIdx=#_”>

<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 Tabs using content search web part in SharePoint online
JQuery Tabs using content search web part in SharePoint online

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

SharePoint 2013 JQuery Tabs using content search web part
SharePoint 2013 JQuery Tabs using content search web part

Run the search service application Crawl now.

SharePoint 2016 JQuery Tabs using content search web part
SharePoint 2016 JQuery Tabs using content search web part

Now, let’s go to SharePoint page.

Add a Content Search Web Part into this page.

SharePoint online JQuery Tabs using content search web part
SharePoint online JQuery Tabs using content search web part

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

Click Edit Web Part -> change query.

SharePoint jQuery tabs
SharePoint jQuery tabs

Provide the number of items to display.

SharePoint 2013 content search web part JQuery Tabs
SharePoint 2013 content search web part JQuery Tabs

Choose the display templates.

SharePoint 2016 content search web part JQuery Tabs
SharePoint 2016 content search web part JQuery Tabs

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

SharePoint 2013 jQuery tabs
SharePoint 2013 jQuery tabs

Click OK to complete the setup.

The following is the final result.

SharePoint online content search web part JQuery Tabs
SharePoint online content search web part JQuery Tabs

Click on the second topic.

SharePoint 2016 jQuery tabs
SharePoint 2016 jQuery tabs

Read some SharePoint 2013 tutorials:

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 on the page.
Accordion Reference: https://jqueryui.com/


You May Also like the Following SharePoint Online Tutorials:

Leave a Reply