Create A Bootstrap Image Carousel Using Content Search Web Part CSWP In SharePoint 2013

Content Search Web Part

In the first step, let's create the authoring and publishing site collection.

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 “banner” that contains title, description, and images.

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 a two display templates for display a bootstrap carousel banner control and banner item

Code - Banner Control Template

Upload the script and CSS into style library.

Add the scripts and css in to control template.

<script>
$includeCSS(this.url, "~sitecollection/Style%20Library/banner/bootstrap.min.css");
$includeCSS (this.url, "~sitecollection/Style%20Library/banner/custom.css");
$includeScript(this.url, "~sitecollection/Style%20Library/banner/bootstrap.min.js");
$includeScript(this.url, "~sitecollection/Style%20Library/banner/jquery.min.js");
</script>

Now, I am going to define the HTML layout to the Control Template.

<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
_#= ctx.RenderItems(ctx) =#_
</div>
</div>
</div>
</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>BannerControl</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Display a banner 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://10.100.247.50:801/_catalogs/masterpage/Display%20Templates/Content%20Web%20Parts/News/bannercontrol.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<script>
$includeCSS(this.url, "~sitecollection/Style%20Library/banner/bootstrap.min.css");
$includeCSS(this.url, "~sitecollection/Style%20Library/banner/custom.css");
$includeScript(this.url, "~sitecollection/Style%20Library/banner/bootstrap.min.js");
$includeScript(this.url, "~sitecollection/Style%20Library/banner/jquery.min.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 + "");
});
_#-->
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
_#= ctx.RenderItems(ctx) =#_
</div>
</div>
</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, "ImageDescription");
var Image = $getItemValue(ctx, "PublishingImage");
var esActive ="";
if(itemIdx <= 1)
esActive = "active";
_#-->

Render the HTML structure with the list item information.

<div class="item _#= esActive =#_">
<img src="_#= Image =#_" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>_#= title =#_</h3>
<p>_#= desc =#_</p>
</div>
</div>
<!—End of HTML-->

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>BannerItem</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays an Banner 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','ImageDescription':'ImageDescription','PublishingImage':'PublishingImage'</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://webtest.adjd.gov.ae:801/_catalogs/masterpage/Display Templates/Content Web Parts/Arabic Display Templates/ArabicEventsItem1.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, "ImageDescription");
var Image = $getItemValue(ctx, "PublishingImage");
var esActive ="";
if(itemIdx <= 1)
esActive = "active";
_#-->
<div class="item _#= esActive =#_">
<img src="_#= Image =#_" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>_#= title =#_</h3>
<p>_#= desc =#_</p>
</div>
</div>
</div>
</body>
</html>

Upload the display template under Site settings - > Master page and page layouts -> Display Templates -> Content Web Parts.

Now, let’s go to SharePoint page.

Add a Content Search Webpart into this page.

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

Click edit web part-> change query.

Provide number of items to display.

Choose the display templates.

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

Click OK to complete the setup.

There is the final result.

List Data

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 results will be successfully displayed into the page.

10 Comments

Join the conversation! Your thoughts help the community grow.

Shail S8y ago
Hi All, I have followed the steps mentioned to display the carousel but i don't see any images on the page. I am getting this error in the console window- Bootstrap's JavaScript requires jQuery. Please help..
- Vinodh Narayanan8y ago
  Include all the javascript required
venkat Kotaiah9y ago
Hi vinodh when i am trying change query step i am getting relventsearch(0) i have given list url in specified url filed ...can you help out me how to over from this issue ...thanks
venkat Kotaiah9y ago
Nice...thanks for sharing
Tejesh Barma9y ago
NIce work keep going further also........
- Vinodh Narayanan9y ago
  Thanks for your valuable comment sir
Madhanmohan Devarajan10y ago
Nice usage of OOB webpart
- Vinodh Narayanan10y ago
  Thank you sir
Humayun Kabir Mamun10y ago
Nice...
- Vinodh Narayanan10y ago
  Thank you sir