jQuery News Ticker using content search web part in SharePoint 2013

sharepoint 2013 jQuery news ticker using content search web part
SharePoint deveopment training course

This SharePoint tutorial, we will disucss, how to create a jQuery news ticker using the content search web part (CSWP) to display dynamic data in the 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 “Breaking News” that contains the title and Description.

jquery news ticker sharepoint 2013

jquery news ticker 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 jquery news ticker control and a jquery news ticker item.
Code – News Control Template

Upload the script and CSS into the style library.

jquery news ticker sharepoint 2013

Add the scripts and CSS into the Control template.

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

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

<div class="ticker-container">
<div class="ticker-caption">
<p>Breaking News</p>
</div>
<ul>
_#= ctx.RenderItems(ctx) =#_
</ul>
</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>News Control</title>
<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Display a News 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>
$includeScript(this.url, "~sitecollection/Style%20Library/news%20ticker/jquery.min.js");
$includeScript(this.url, "~sitecollection/Style%20Library/news%20ticker/ticker.js");
$includeCSS(this.url, "~sitecollection/Style%20Library/news%20ticker/ticker.css");
</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="ticker-container">
<div class="ticker-caption">
<p>Breaking News</p>
</div>
<ul>
_#= ctx.RenderItems(ctx) =#_
</ul>
</div>
</div>
</body>
</html>

Let’s go to the 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");
_#–>

Render the HTML structure with the list item information.

<!— HTML Goes Here –>
<div>
<li><span>_#= title =#_ <a href="#">_#= desc =#_</a></span></li>
</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>News Item</title>
<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays an News 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");
_#–>
<!— HTML Goes Here –>
<div>
<li><span>_#= title =#_ <a href="#">_#= desc =#_</a></span></li>
</div>
</div>
</body>
</html>

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

jquery news ticker sharepoint 2013

Now going to insert some news into the Breaking News list from the authoring site collection.

jquery news ticker sharepoint 2016

Run the search service application Crawl now.

jquery news ticker sharepoint online

Now, let’s go to the SharePoint page.

Add a Content Search Web Part into this page.

sharepoint jquery news ticker

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

Click Edit Web Part -> change query.

sharepoint 2013 jquery news ticker

Provide the number of items to display.

sharepoint 2016 jquery news ticker

Choose the display templates.

sharepoint online jquery news ticker

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

jquery news ticker using content search web part sharepoint 2013

Click Apply and OK to complete the setup.

The following is the final result.

jquery news ticker using content search web part sharepoint 2016
jquery news ticker using content search web part sharepoint online

You may like following SharePoint 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.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope