In this article, I have explained how to create a jQuery news ticker 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 read:
– JQuery accordion using content search web part in SharePoint server 2013
– Variations in SharePoint 2013 tutorial
– Microsoft Flow Example Save tweets that include specific hashtag to a SharePoint list
Open the Authoring Site Collection. Create a list named “Breaking News” that contains title and Description
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 style library.
Add the scripts and CSS into 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 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.
Now going to insert some news into Breaking News list from authoring site collection
Run the search service application Crawl now
jQuery news ticker using content search web part sharepoint 2013
Now, let’s go to SharePoint page.
Add a Content Search Web Part into this page.
Map a search query to get the result from the authoring site collection.
Click Edit Web Part -> change query.
jQuery news ticker using content search web part sharepoint online
Provide number of items to display.
Choose the display templates.
Click OK. Under property mapping section, map the managed properties of the title,description.
Click Apply and OK to complete the setup.
The following is the final result.
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. Hope this will be helpful.
