Post
Ask Question

Tabs in List Form in sharepoint 2013

jQueryUI

 
 
The Script

Below is the script I used for putting SharePoint 2013 web parts into a jQuery UItabbed view.

  1. <!-- Reference the jQueryUI theme's stylesheet on the GoogleCDN. Here we're using the "Start" theme -->   
  2. <link type="text/css" rel="stylesheet"href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css"/>   
  3. <!-- Reference jQuery on the Google CDN -->   
  4. <script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  5. <!-- Reference jQueryUI on the Google CDN -->   
  6. <script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>  
  7.    
  8. <style type="text/css">  
  9. </style>  
  10.    
  11. <script type="text/javascript">  
  12.      jQuery(document).ready(function($){  
  13.         $(".s4-wpcell").hide();  
  14.         $(".s4-wpcell-plain").hide();  
  15.          //Put the WebPart Title for all the Web Parts you wish  
  16.          //to put into thetabbed view into the array below.  
  17.          setTimeout(function(){  
  18.            HillbillyTabs(["Issue","ImageViewer","Time","Speakers","States","Cities","SlideShow"]);  
  19.         }, 0);  
  20.    
  21.     });  
  22.    
  23. function HillbillyTabs(webPartTitles)  
  24.     {  
  25.         for(index inwebPartTitles)  
  26.         {  
  27.             var title =webPartTitles[index];  
  28.            $("#HillbillyTabs").append('<li><ahref="#Tab'+index+'" id="TabHead'+index+'"onclick="SetActiveTab(this.id);">'+  
  29. title+'</a></li>').after('<divid="Tab'+index+'"></div>');  
  30.            $("span:contains('"+title+"')").each(function(){  
  31.                 if($(this).text() == title){  
  32.                    varwebPart =$(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");  
  33.                    if($(webPart).contents().html() != undefined)  
  34.                    {  
  35.                           webPart = $(webPart).contents();  
  36.                    }  
  37.                   $("#Tab" + index).append((webPart));  
  38.             }});  
  39.         }  
  40.        $("#tabsContainer").tabs();  
  41.        $(".s4-wpcell").show();  
  42.          $(".s4-wpcell-plain").show();  
  43.    
  44.     }  
  45. </script>  
  46. <div id="tabsContainer"><ulid="HillbillyTabs"></ul></div>  

To use the script

To use the scripts, follow these steps:

  1. Upload the above script to a location you can reference in your site (like possibly the Site Assets Document Library)
  2. Create a Web Part Page.
  3. Add the various Web Parts onto the page that you want to appear in the tabbed view.
  4. Add a Content Editor Web Part to the page.
  5. Edit the above script so that the call to the “HillbillyTabs”function contains the titles of the Web Parts you wish to appear in the tabbed view. For instance. If you had a Web Part with the title “Projects” and another Web Part with the title “Tasks”, the section of script you would change would look like this:
    1. jQuery(document).ready(function($){  
    2.    HillbillyTabs(["Projects","Tasks"]);  
    3. });  
  6. Link the above script to the Content Editor Web Part.

Persisting tabs

One thing you will notice is that the active tab is not persisted should the pagereload. This may not be a big deal, but I know some people find it annoying. To get around this issue I updated the above script to the script below to use cookies to make the currently selected tab stay selected should the user do something that causes the page to reload. Just follow the same instructions as above but replace the script with the one below.

  1. <!-- Reference the jQueryUI theme's stylesheet on the GoogleCDN. Here we're using the "Start" theme -->   
  2. <link type="text/css" rel="stylesheet"href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css"/>   
  3. <!-- Reference jQuery on the Google CDN -->   
  4. <script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  5. <!-- Reference jQueryUI on the Google CDN -->   
  6. <script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>  
  7.    
  8. <script type="text/javascript">  
  9.     jQuery(document).ready(function($) {  
  10.        $(".s4-wpcell").hide();  
  11.         $(".s4-wpcell-plain").hide();  
  12.          //Put the WebPart Title for all the Web Parts you wish  
  13.          //to put into thetabbed view into the array below.  
  14.        HillbillyTabs(["Web Part Title 1","Web Part Title2"]);  
  15.         //show persistedtab          
  16.         ShowActiveTab();  
  17.    
  18.     });  
  19.    
  20.     functionHillbillyTabs(webPartTitles)  
  21.     {  
  22.         for(index inwebPartTitles)  
  23.         {  
  24.             var title =webPartTitles[index];  
  25.            $("#HillbillyTabs").append('<li><ahref="#Tab'+index+'" id="TabHead'+index+'"onclick="SetCookie(this.id);">'+  
  26. title+'</a></li>').after('<divid="Tab'+index+'"></div>');  
  27.            $("span:contains('"+title+"')").each(function(){  
  28.                 if($(this).text() == title){  
  29.                    varwebPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");  
  30.                    if($(webPart).contents().html() != undefined)  
  31.                    {  
  32.                           webPart = $(webPart).contents();  
  33.                    }  
  34.                   $("#Tab" + index).append((webPart));  
  35.             }});  
  36.         }  
  37.        $("#tabsContainer").tabs();  
  38.        $(".s4-wpcell").show();  
  39.         $(".s4-wpcell-plain").show();  
  40.    
  41.     }  
  42.    
  43.    
  44.    
  45.     function SetCookie(id)  
  46.     {  
  47.            var date = newDate();  
  48.            //make thecookie expire in 5 minutes  
  49.           date.setTime(date.getTime()+(300*1000));  
  50.            var expires ="; expires="+date.toGMTString();  
  51.            document.cookie= "ActiveTab="+id+expires+"; path=/";  
  52.     }  
  53.       
  54.     functionShowActiveTab()  
  55.     {  
  56.         var name ="ActiveTab";  
  57.         var cookieArray =document.cookie.split(";");  
  58.         for (index incookieArray)  
  59.         {  
  60.             varkeyValuePair = cookieArray[index].split("=");  
  61.             var key =keyValuePair[0];  
  62.             key  = key.replace(/^\s+|\s+$/g, "");  
  63.             if (key ==name)  
  64.             {  
  65.                 var value= keyValuePair[1];  
  66.                $("#" + value).click();  
  67.                 return;  
  68.             }  
  69.         }  
  70.     }  
  71.    
  72.    
  73. </script>  
  74. <div id="tabsContainer"><ulid="HillbillyTabs"></ul></div>  

“Breaking Layouts” orSome Web Parts not appearing properly

A few people have indicated that they have a problem with the “layouts breaking” or a web part not being displayed properly for some web parts in a tab, I’ve been able to track this down to scripts executing after jQuery.ready() to do things like place items in calendars. To alleviate this problem I added a delay to the execution of the tabs functionality to give these other scripts time to execute. If you are having a problem with shifting layouts, try using the below script. The script delays for 800ms, if you find this id not long enough try increasing this value in the “setTimeout” function call below. I’m not enamored with this solution, and if a better solution comes to mind I’ll be sure to let you know!

  1. <!-- Reference the jQueryUI theme's stylesheet on the GoogleCDN. Here we're using the "Start" theme -->   
  2. <link type="text/css" rel="stylesheet"href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css"/>   
  3. <!-- Reference jQuery on the Google CDN -->   
  4. <script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  5. <!-- Reference jQueryUI on the Google CDN -->   
  6. <script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>  
  7.    
  8. <script type="text/javascript">  
  9.     jQuery(document).ready(function($) {  
  10.          $(".s4-wpcell").hide();  
  11.         $(".s4-wpcell-plain").hide();  
  12.    
  13.          //Put the WebPart Title for all the Web Parts you wish  
  14.          //to put into thetabbed view into the array below.  
  15.        setTimeout(function() {  
  16.            HillbillyTabs(["Web Part 1","Web Part 2", "WebPart 3"]);  
  17.         }, 800);  
  18.    
  19.     });  
  20.       
  21.    
  22.     functionHillbillyTabs(webPartTitles)  
  23.     {  
  24.         for(index in webPartTitles)  
  25.         {  
  26.             var title =webPartTitles[index];  
  27.            $("#HillbillyTabs").append('<li><ahref="#Tab'+index+'" id="TabHead'+index+'"onclick="SetCookie(this.id);">'+  
  28. title+'</a></li>').after('<div id="Tab'+index+'"></div>');  
  29.            $("span:contains('"+title+"')").each(function(){  
  30.                 if($(this).text() == title){  
  31.                    varwebPart =$(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");  
  32.                    if ($(webPart).contents().html() !=undefined)  
  33.                    {  
  34.                           webPart = $(webPart).contents();  
  35.                    }  
  36.                   $("#Tab" + index).append((webPart));  
  37.             }});  
  38.         }  
  39.        $("#tabsContainer").tabs();  
  40.        $(".s4-wpcell").show();  
  41.         $(".s4-wpcell-plain").show();  
  42.    
  43.     }  
  44.    
  45.     function SetCookie(id)  
  46.     {  
  47.            var date = newDate();  
  48.            //make thecookie expire in 5 minutes  
  49.           date.setTime(date.getTime()+(300*1000));  
  50.            var expires ="; expires="+date.toGMTString();  
  51.            document.cookie= "ActiveTab="+id+expires+"; path=/";  
  52.     }  
  53.       
  54.     functionShowActiveTab()  
  55.     {  
  56.         var name ="ActiveTab";  
  57.         var cookieArray =document.cookie.split(";");  
  58.         for (index incookieArray)  
  59.         {  
  60.             varkeyValuePair = cookieArray[index].split("=");  
  61.             var key =keyValuePair[0];  
  62.             key  = key.replace(/^\s+|\s+$/g, "");  
  63.             if (key == name)  
  64.             {  
  65.                 var value= keyValuePair[1];  
  66.                $("#" + value).click();  
  67.                 return;  
  68.             }  
  69.         }  
  70.     }  
  71.    
  72.    
  73. </script>  
  74. <div id="tabsContainer"><ulid="HillbillyTabs"></ul></div>  
Next Recommended Reading Introduction To SharePoint 2016 Add-ins (aka apps)