Share via

jQuery News Ticker Using Content Search Web Part In SharePoint Server 2013

  • Article

In the first step, let's create the Authoring and Publishing site collections. 

Authoring site collection allows the authors to manage their Website content while Publishing site collection reviews the content from the authoring site collection.

Open Authoring site collection.

Create a list named Breaking News, which contains title and description.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image001.jpg

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image002.jpg

Let’s create a control and a template to display the items.

  • *Control Template
    *It provides the overall structure (layout) of HTML elements along with start and end tags.
  • *Item Template
    *It renders the items from the list, contains text and pictures.

Now, let's create two display templates to display a jQuery News Ticker control and a jQuery News Ticker item.

Code – News Control Template

Upload the script and CSS into style library. http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image003.jpg

Add the scripts and CSS into Control template.  

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

Now, let's define HTML layout to Control Template. 

  1. <div class="ticker-container">  
  2.   <div class="ticker-caption">  
  3.     <p>Breaking News</p>  
  4.   </div>  
  5. <ul>  
  6.     _#= ctx.RenderItems(ctx) =#_  
  7.      </ul>                  
  8. </div>   

The full code looks, as shown below.  

  1. <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">   
  2.     <head>  
  3.         <title>News Control</title>  
  4.   
  5.         <!--[if gte mso 9]><xml>  
  6.         <mso:CustomDocumentProperties>  
  7.         <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>  
  8.         <mso:MasterPageDescription msdt:dt="string">Display a News Control</mso:MasterPageDescription>  
  9.         <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>  
  10.         <mso:TargetControlType msdt:dt="string">;#SearchResults;#Content Web Parts;#</mso:TargetControlType>  
  11.         <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>  
  12.         <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>  
  13.         <mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>  
  14.         <mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>  
  15.         <mso:HtmlDesignStatusAndPreview msdt:dt="string">http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/bannercontrol.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>  
  16. </mso:CustomDocumentProperties>  
  17.         </xml><![endif]-->  
  18.     </head>  
  19.   
  20.     <body>          
  21.         <script>  
  22.         $includeScript(this.url, "~sitecollection/Style%20Library/news%20ticker/jquery.min.js");  
  23.             $includeScript(this.url, "~sitecollection/Style%20Library/news%20ticker/ticker.js");  
  24.              $includeCSS(this.url, "~sitecollection/Style%20Library/news%20ticker/ticker.css");   
  25.                            
  26.               
  27.               
  28.              
  29.           
  30.         </script>  
  31.           
  32.   
  33.         <div>  
  34.             <!--#_if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()){return "";}  
  35.             ctx.ListDataJSONGroupsKey = "ResultTables";  
  36.             ctx["CurrentItems"] = ctx.ListData.ResultTables[0].ResultRows;  
  37.             var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();       
  38.               
  39.             AddPostRenderCallback(ctx, function() {  
  40.                 $.getScript(siteURL + "");  
  41.                   
  42.                   
  43.       
  44.     
  45.   
  46.                   
  47.     });   
  48.             _#-->  
  49. <div class="ticker-container">  
  50.   <div class="ticker-caption">  
  51.     <p>Breaking News</p>  
  52.   </div>  
  53.   <ul>  
  54.     _#= ctx.RenderItems(ctx) =#_  
  55.      </ul>                  
  56. </div>  
  57.   
  58. </div>  
  59.     </body>  
  60. </html>      

Let’s go to Item template, declare the managed properties and the necessary variables.  

  1. <!--#_  
  2.             var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();  
  3.             var itemIdx = ctx.CurrentItemIdx+1;  
  4.             var title = $getItemValue(ctx, "Title");   
  5.             var desc = $getItemValue(ctx, "Description");  
  6.               
  7.                       
  8.             _#-->  

Render HTML structure with the list item information. 

  1. <!--- HTML Goes Here -->  
  2.       
  3.         <div>  
  4.       <li><span>_#= title =#_ <a href="#">_#= desc =#_</a></span></li>  
  5.     </div>   

 Overall Item template code looks, as shown below.  

  1. <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">   
  2.     <head>  
  3.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  4.         <title>News Item</title>  
  5.         <!--[if gte mso 9]><xml>  
  6.         <mso:CustomDocumentProperties>  
  7.         <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>  
  8.         <mso:MasterPageDescription msdt:dt="string">Displays an News Item.</mso:MasterPageDescription>  
  9.         <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>  
  10.         <mso:TargetControlType msdt:dt="string">;#SearchResults;#Content Web Parts;#</mso:TargetControlType>  
  11.         <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>  
  12.         <mso:ManagedPropertyMapping msdt:dt="string">'Title':'Title','Description':'Description'</mso:ManagedPropertyMapping>  
  13.         <mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>  
  14.         <mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>  
  15.         <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>  
  16.           
  17.         <mso:HtmlDesignStatusAndPreview msdt:dt="string">http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/BannerItem.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>  
  18. </mso:CustomDocumentProperties>  
  19.         </xml><![endif]-->  
  20.     </head>  
  21. <script>  
  22.   
  23. </script>  
  24.               
  25.     <body>  
  26.         <div>  
  27.             <!--#_  
  28.             var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();  
  29.             var itemIdx = ctx.CurrentItemIdx+1;  
  30.             var title = $getItemValue(ctx, "Title");   
  31.             var desc = $getItemValue(ctx, "Description");  
  32.               
  33.                       
  34.             _#-->  
  35.               
  36.         <!--- HTML Goes Here -->  
  37.               
  38.       
  39.                
  40.     <div>  
  41.       <li><span>_#= title =#_ <a href="#">_#= desc =#_</a></span></li>  
  42.     </div>  
  43.           
  44. </div>  
  45. </body>  
  46. </html>   

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

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image004.jpg

Now, we are going to insert some news into Breaking News list from Authoring site collection.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image005.jpg

Run the search Service Application Crawl now.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image006.jpg

Now, let’s go to SharePoint page.

Add a Content Search Web Part into this page.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image007.png

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

Click Edit Web Part -> change query.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image008.jpg

Provide the number of items to display.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image009.jpg

Choose the display templates.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image010.jpg

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

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image011.jpg

Click Apply and OK to complete the setup.

The final result is given below.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image012.jpg

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image013.jpg

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/jquery-news-ticker-using-content-search-web-part-in-sharepoint-server-2013/Images/image014.jpg

Note :

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