SharePoint

jQuery Tabs Using Content Search Web Part In SharePoint Server 2013

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




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

  • Control Template

    It provides 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 (1) bootstrap carousel menu control and (2) a menu item.

Code – Tabbed Control Template

Upload the script and CSS into style library.


Add the scripts and CSS into Control template.  

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

Now, let's define the HTML layout to the Control template.

  1. <div id="tabs">  
  2.     <ul>    
  3.     <li><a href="#tabs-1">Sharepoint</a></li>  
  4.     <li><a href="#tabs-2">Javascript</a></li>  
  5.     <li><a href="#tabs-3">ASP.NET</a></li>  
  6.     </ul>    
  7.     _#= ctx.RenderItems(ctx) =#_  
  8.                        
  9. </div>   

The full code looks like the following.  

  1. <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">   
  2.     <head>  
  3.         <title>Tabbed 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 Tabbed 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.               
  23.             $includeCSS(this.url, "~sitecollection/Style%20Library/JqueryTabs/jquery-ui.css");    
  24.             $includeScript(this.url, "~sitecollection/Style%20Library/JqueryTabs/jquery-1.12.4.js");  
  25.             $includeScript(this.url, "~sitecollection/Style%20Library/JqueryTabs/jquery-ui.js");  
  26.              
  27.           
  28.         </script>  
  29.           
  30.   
  31.         <div>  
  32.             <!--#_if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()){return "";}  
  33.             ctx.ListDataJSONGroupsKey = "ResultTables";  
  34.             ctx["CurrentItems"] = ctx.ListData.ResultTables[0].ResultRows;  
  35.             var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();       
  36.               
  37.             AddPostRenderCallback(ctx, function() {  
  38.                 $.getScript(siteURL + "");  
  39.                   
  40.                   
  41.       
  42.     $( "#tabs" ).tabs();  
  43.   
  44.                   
  45.     });   
  46.             _#-->  
  47. <div id="tabs">  
  48.     <ul>    
  49.     <li><a href="#tabs-1">Sharepoint</a></li>  
  50.     <li><a href="#tabs-2">Javascript</a></li>  
  51.     <li><a href="#tabs-3">ASP.NET</a></li>  
  52.     </ul>    
  53.     _#= ctx.RenderItems(ctx) =#_  
  54.                        
  55. </div>  
  56.   
  57. </div>  
  58.     </body>  
  59. </html>     

Let’s go to Item template and declare the managed properties and 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.             var tabCount = "#tab";  
  7.                       
  8.             _#-->    

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 list item information.

  1. <!--- HTML Goes Here -->  
  2.       
  3.         <div id="_#=tabCount=#__#=itemIdx=#_">  
  4.              <p>_#= desc =#_</p>  
  5.              </div>   

 Overall Item template code looks like the following.  

  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>Tabbed 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 Tabbed 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.             var tabCount = "tabs-";  
  33.                       
  34.             _#-->  
  35.               
  36.         <!--- HTML Goes Here -->  
  37.               
  38.       
  39.       
  40.           
  41.         <div id="_#=tabCount=#__#=itemIdx=#_">  
  42.              <p>_#= desc =#_</p>  
  43.              </div>  
  44.      </div>  
  45.           
  46.     </body>  
  47. </html>   

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


Now, we are going to insert some data into Tabbed Content list from Authoring site collection.


Run the Search Service application "Crawl" now.


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.


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 OK to complete the setup.

The following is the final result.


Click on the second topic.


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

jQuery Tabs Reference

https://jqueryui.com/

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs