SharePoint Tabbed Web Parts–HillbillyTabs 3.0

August 16, 2015 Mark Rackley Development, jQuery 102

<UPDATE 4/8/18>
CHECK OUT THE UPDATED BLOG/SCRIPT/VIDEO AT: https://www.markrackley.net/2018/04/08/the-return-of-hillbillytabs-part-4/
</UPDATE>

Over two years ago I created a simple little script to allow people to place SharePoint Web Parts into tabs using the jQueryUI library. Just by adding a script to a page in SharePoint you could easily put one or all of your web parts into a well organized tab structure.

image

And there was much rejoicing.

This little script has quickly grown into one of the most popular solutions I ever put in my blog. Last year I updated the script to add additional features. Since then, I’ve had several requests for even more features to be added (You guys are so needy). So, being the nice guy that I am, I’ve once again updated my tabs script to add several features and fix a couple of shortcomings.

New Features / fixes

New stuff in version 3.0!

Multiple tabs on one page!

Many people have been asking for the ability to have multiple tabs on a page. With this latest version it now becomes possible.  Simply add an additional Content Editor Web Part onto your page and link it to a separate script for the other tab. Watch the video below for an example.

Respect for Web Part Zones!

In the previous version of the Tabbed Web Part script, the default functionality was to grab every web part on your page and stick them into tabs. That’s all fine and dandy, but what about when you only want web parts in a particular zone placed in web parts and not every single web part on the page? With this latest version, the default behavior is to only take the web parts from the current zone the Content Editor Web Part is placed in and place only those web parts into tabs.  Don’t worry, you can still specify exactly which web parts you want to appear in a specific tab and these web parts may live in separate zones.

Third Party Add-Ins Support!

A few people commented that third party Apps (Add-ins)  did  not appear in the tabs properly. I have modified the script to now allow those Add-Ins to also be placed in tabs. This does not mean every single third party Add-In will work. I can’t control what some crazy people do in their mark-up, but my tests did work for the apps… add-ins I tried.

Hide Error Web Parts!

In previous versions of the script, if there was a web part on the page that a user did not have access to because of audiencing, the user would see an Error on the page where that web part existed. In this latest version of the script, all those Error Web Parts are hidden from the users.

Fade In Effect!

Instead of users seeing a jarring reorganization of the screen as they are placed in web parts, I’ve updated the script to hide the content zone until the tabs are created and then fade in the page to give the page load a more polished look and feel.

Sound pretty cool? You guys want it? Well… not so fast. Because of these modifications I am no longer supporting SharePoint 2010. Will it work in 2010? I kind of doubt it, but I honestly haven’t tried yet. I HAVE tested this script on both Office 365 and On-Premises SharePoint 2013 though.

How Does it Work?

The steps to put tabs on your page are quite simple. All you need to do is:

  1. Write a script like the example below.
  2. Upload the script to a document library (I use “Site Assets”)
  3. On the page that you want tabs, add a Content Editor Web Part.
  4. Link the Content Editor Web Part to the script you uploaded in step 2.
  5. Ta.. and da…

Again, the default behavior is to take every web part in the particular web part zone and place them into tabs, however you have the ability to specify which web parts you want to appear in tabs (just like in previous versions).

In addition, I’ve now placed the core logic into a  script that can be referenced via CDN here:

https://www.markrackley.net/scripts/jquery.HillbillyTabs.2013.js

This greatly simplifies the script you need to write. You SHOULD download this script and place it in your local document library because I cannot guarantee I’ll never make a change to my file.

Here’s a video of the script in action:

And here is the simplified script that you need to upload to your document library:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script> 
<script type="text/javascript" src="//www.markrackley.net/scripts/jquery.HillbillyTabs.2013.js"></script> 

<link  type="text/css" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/start/jquery-ui.css" /> 

<div id="tabsContainer"></div>

<script type="text/javascript">
     jQuery(document).ready(function($) {

        //Put 2 web parts in 2 different tabs
//        var webPartTitles = ["Web Part Title 1","Web Part Title 2"];
//        HillbillyTabs(webPartTitles);

        //Create a Tab with Two Web Parts, and a second tab with one Web Part
//        var webPartTitles = ["Tab Title;#Web Part Title 1;#Web Part Title 2","Web Part Title 3"];
//        HillbillyTabs(webPartTitles);
     
        //Put all web parts (that have visible titles) in current zone into tabs 
        HillbillyTabs();

    });
</script>

 

Troubleshooting and Commonly Asked Questions

I’ve tried to make this as simple to use as possible (again, watch the video if you need help), but people seem to always have questions and common issues.  So, here to hopefully save you the time of sending that email or asking that question in a comment….

Changing the tab colors

If you don’t like the colors, you can use jQueryUI’s theme roller to create your own theme, then reference THAT .css file in your script instead of the theme I reference (line 5 above).

Tabs only showing in edit mode

This can be caused by one of two things.

  1. You need to disable the “Minimal Download Strategy” feature under Site Settings->Site Features
  2. You need to make sure the Chrome Type for the Web Part is set to “Title Only” or “Title and Border” in the Web Part Properties.  The title MUST be visible in order for the script to find your web part.

That’s pretty much all there is to it! Hope you enjoy and thanks for stopping by!

Do you have a custom development need? Be it a simple script like the one in this blog or a full blown custom application, we at PAIT Group can help. Feel free to contact us at [email protected] and we’d be happy to discuss your development needs.

Families in Germany who are facing divers health problem, such persons can buy drugs from the Web without prescription. With the market flooded with divers web-sites selling sundry medicaments, purchasing medicines from th WEB is no longer a trouble for common man. Certain medications are used to treat infections caused by dental abscesses. Of course it isn’t all. If you’re concerned about erectile health problem, you probably know about Xenical and Hoodia. Probably every adult knows about Garcinia. (Read more PhentermineXenical). The symptoms of sexual health problems in men turn on improbability to have an erection sufficient for sexual functioning. Certain medications may add to sex drive difficulties, so its vital to cooperate with your soundness care professional so that the prescription can be tailored to your needs. Preparatory to taking Levitra or other preparation, speak to your pharmacist if you have any allergies. Talk to your health care provider for more details. Preparatory to ordering this remedy, tell your doctor if you are allergic to anything.

98 Comments

  1. Thanks Mark, great job on this!
    One problem I have found is placing calendar views within tabs. All of the appts on the Calendar are positioned on top of each other in the upper left corner. not over the dates specified. Do you know what might be causing this? I will keep looking, and if I find it, I will let you know.

    • Hey Bill.. Calendar events and Task Gantt charts do not display properly in these tabs, I believe this is due to post rendering after the page is loaded. I’ve not found a great solution to this yet unfortunately.

      • I have found that if you use a plain calendar view without overlays, the calendar events will show up fine on the tab. So I set up another calendar view with my overlays on them, set that as the default, and use the plain calendar view in the hillbilly tab. That way, they can click to the full calendar view and see the color-coded overlays.

  2. I am trying to use the tabbed script and I am specifying exactly which webparts I want to be tabbed but it is still taking all of them in the zone. I thought if you specified in the scripts exactly the ones you wanted it would only take those. Is that not the case?

    • This happened one of the sites I was working on because I had forgotten to remove the comment lines before the two lines I intended to run. i.e.
      //Put 2 web parts in 2 different tabs
      –> // var webPartTitles = [“Web Part Title 1″,”Web Part Title 2”];
      –> // HillbillyTabs(webPartTitles);

  3. I have disabled “Minimal Download Strategy” on my O365 site but the tabs still only appear in EDIT mode. I have tried Title Only and Title and Border, makes no difference. Anything else I can check?

  4. Hi Mark,

    Thanks again for this. I understand how this all goes together, and I have done this exactly like you describe in the video. I get no errors, but all I see is a thin blue line that goes across the top of the screen where the tabs should appear. Any idea what I’m doing wrong?

    Love this concept. I tried your previous version and it work like a charm. It was on a different server, and I even tried this on that server and still get the same results.

    thanks in advance for your reply!

    • Hmmm… what version of SharePoint are you using? What type of page (Web Part Page or Wiki Page)? You should be using SharePoint 2013 and a Web Part page.

  6. Hey Mark – great solution!

    Can you use vertical tabs instead of horizontal?
    And if so is it case of modifying your js file?

    Thanks

    • if jQuery UI tabs can do vertical tabs then it would be easy, if it doesn’t it would be fairly difficult. I’ve not even looked into vertical tabs though…

      • It does support it… I’m struggling to apply it! lol

        Their example runs a function after the scripts are loaded to change the class of the #tabs ul to a vertical style.
        I’ve tried adding that after the script references in the js but no luck …

        I’ll keep plugging away 🙂

        • Change this line in the JS file:
          $(“#”+tabDivID).tabs();

          To this:
          $(“#”+tabDivID).tabs().addClass(“ui-tabs-vertical ui-helper-clearfix”);

          Add these lines to the main code:

          .ui-tabs-vertical { width: 55em; }
          .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
          .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
          .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
          .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
          .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

  7. I had been using 2.0 for a while and it works great in 2010 and 2013. I attempted to use 2013 in an on prem farm and O365 and found that It does not work at all in SharePoint 2010 On Prem, Only works in SharePoint 2013 On Prem if I call out the webpart titles. Won’t work anywhere if I just leave it default so it pulls the parts from the webpart zone. I’ve disabled Minimal download strategy, made sure my chrome types were set to title only still no joy. I’ve used the script with the reference linked as in the example and linked locally in a site assets library and even tried taking the function and pasting it in the local script and removing the link, with no change in results.

    • Correct, this version of the solution would not work on 2010… It should work fine in O365 and have used it multiple times. Are you using it in a Wiki page and not a Web Part Page? In order for it to find all the web parts in a web part zone, it needs to be a web part page. If you tried to use the “Default” functionality on a wiki page I would expect it to not create any tabs.

      • You were correct in guessing that the parts were being used on a wiki page. Found an issue with the fact that if I turn the chrome type to none on the content editor webpart it won’t work at all. Have to leave the webpart title on for it to work. Also, In edit mode each tab appears twice. It’s fine after you save the page.

        • Thanks Greg! Your debugging helped me track down the issue. Download the latest version of the script and it should resolve the issue with needing the Title in the CEWP and it only showing up in edit movde. Give it a shot and let me know please?

  8. Hi, thank you so much for keeping this up to date. I really like how this new version fades to prevent all that “reshuffling”, however, one thing I really liked about 2.0 is how I could set the chrome type to “none”.

  9. Hello Mrackley,
    I have tried exact steps you mentioned in the video, but no luck. The tabs show up in the edit mode, but it does not after i stop editing.
    Great script, i have used it on 2010.

  10. Fantastic Mark. It will work fine for me on our office 365 environment. easy to use and work great. Thank you.

  11. Any update to solution where it will work with Wiki Pages too? I am kind of stuck with wiki pages and now with upgrade to SP 2013 I need your script to work with Tab.

    Please let me know if you have solution.

  12. You know what? I feel like a dill. I have now fixed it. While I did way I changed the webpart to ensure the Chrome Type for the Web Part was set to “Title Only”, I did it for the content editor webpart only. Not for all the other webparts I was trying to link into. Changing this setting for EVERY webpart means it now all works… Yeah!

  13. I was testing the Tabs solution on a page of mine. It doesn’t seem to work if you have other Content Editor Webparts which are referencing a JS file on the page. In my case, I had two Content Editor Webparts that were displaying data using jquery datatables. When I put the Tabs reference on the page, it renders the page blank. Any ideas?

    • Hmmm.. it MIGHT have to do with the order the scripts are loading? I know you know what you are doing, so… trying to think what the issue could be. The most obvious issue would be the same script being loaded multiple times or different versions of scripts. simply having another js library referenced SHOULDN’T be a problem.

  14. Hi !.

    I really need to implement this tabbed functionality in sharepoint 2010.Can u suggest me something.Right now when i use this script ,It just shows me blue line.

  15. Hey Mark
    Thanks for your work on this–it’s fantastic.

    I have run into a bit of an issue in one scenario that I wanted to run by you. When using the tool with several Datazen dashboards (iframed through Script Editor web parts) I’m getting some strange behavior. Namely, the first dashboard renders completely, but the other two only partially render. To get them to completely render it’s necessary to selected them, and then F5. (Or to select the same, go to a different tab, then return.) In my environment I see this behavior in IE and Firefox, but Chrome seems to work perfectly. Also, dropdown menus within the dashboards will intermittently get stuck in the expanded position.
    Any thoughts on what may be causing this, and tweaks that might address it?

    Drew
    (Using SP2013 on prem)

    • As far as I can determine, this is due to a post page load rendering by certain web parts. You could try delaying the tabs by using the following line of code in replacement of your call to HillbillyTabs as follows:

      setTimeout(function(){ HillbillyTabs(); }, 1000);

      This delays the creation of the tabs for 1 second to allow everything to properly render. Give it a try and good luck.

  16. Hi Mark,

    Joining Drew compliment – It is fantastic!

    And question 🙂

    I have a Visio web parts that renders correctly only after choosing the tabs and refreshing the page. Any idea why?
    Haven’t tested it in Chrome yet.

    Thanks!

    Shiri

    • As far as I can determine, this is due to a post page load rendering by certain web parts. You could try delaying the tabs by using the following line of code in replacement of your call to HillbillyTabs as follows:

      setTimeout(function(){ HillbillyTabs(); }, 1000);

      This delays the creation of the tabs for 1 second to allow everything to properly render. Give it a try and good luck.

      • Hello Mark,
        You do fantastic work, I really enjoy reading your posts. Thank you so much!

        I have the same issue as Shiri up here except using Report Viewer web parts. It forces me to refresh every time when switching to view a different tab. I have tried using the above timeout code you recommended, but it did not help any. Any other suggestions?

        Thanks!!

        • Hi Mark,
          I am looking into adding a script to one of yours so that when a tab is selected it will automatically refresh the contents of the selected tab.
          In your simplified script, there are a few scripts sources listed:
          code.jquery.com/jquery-1.11.1.min.js,
          code.jquery.com/ui/1.11.2/jquery-ui.min.js,
          cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js, and http://www.markrackley.net/scripts/jquery.HillbillyTabs.2013.js

          Will you point me in the right direction to let me know which script(s) I need to look into editing to add my refresh script?
          Thank you!

  17. Hi Mark, love the result but have a problem. I’ve inserted a timeline web part to the Wiki page and with the multi tabbed script, the timeline broke – it doesn’t show. Any suggestions to get the timeline back on?

    • As far as I can determine, this is due to a post page load rendering by certain web parts. You could try delaying the tabs by using the following line of code in replacement of your call to HillbillyTabs as follows:

      setTimeout(function(){ HillbillyTabs(); }, 1000);

      This delays the creation of the tabs for 1 second to allow everything to properly render. Give it a try and good luck.

  18. Hello Mrackley, We are using the Hillbilly tabs on our SP2013 pages and it is very nice. The only thing we found is not able to do multiple selections of items on the web parts within the tabs. If I select more than two items, all items get deselected and only the last clicked item will be selected.

    I was searching the if there is any workaround for this and didn’t find any solution. Will you be able to shed some light on these issue.

  19. Is there any way to stop the web part title from displaying inside the tab as well? It didn’t do that with the prior version. Other than that, I’m absolutely loving this! Great work.

    • yes, If you use the functionality from the previous version of specifying the web parts you want in the tabs I BELIEVE it should not show the title in the tab (I’m 90% sure).

  20. Hi Mark,

    Just found out that when we hit refresh on the page, the tabs will go away. Do you know any reasons about that?

    Thanks

    George

  21. Mrackley hello, thank you for this great solution, however, there is a real problem when the user returns to the page with a “backspace” for example.
    Indeed, the tabs are all the same content (a list randomly) requires the user to make an F5 to get everything in order.
    Thank you for your valuable help

  22. Mark – Hillbilly tabs rock! Was getting a lot of mileage out of them until I discovered something. I’m using Hillbilly tabs at a large client in the Minneapolis area. They love the tabs. I’m using it on web part pages and wiki pages. In my testing, the tabs show and work as expected for 4 of 8 users (all using IE 11)…for the other 4 users (all using IE 11) they do not show and work as expected. They do not render in tabs AT ALL! Any idea what may be the issue?

    • Hey Bill, thanks for the kind words. It sounds like it could be a permissions issue. Do all the users have read access to wherever the script is stored? Are there any errors from the script in your console?

      • Thanks for getting back to me Mark. It was either user error on my part (certainly possible) in not assigning the right permissions or SharePoint auto-healed itself — also certainly possible :). Either way, Hillbilly Tabs are now working as expected!

  23. I can not figure out how to call the theme roller after changing the colors. Do i have to store the Jquery files first and call them?

  24. Mark, hey man, love the tabs! We use them throughout our enterprise in a lot of different situations. I think we’re having the multiple item select issue that one of the other commenters mentioned. I just wanted to check in and see if you’d had a chance to see if this was a HillbillyTabs thing or a jQuery-UI thing. I suspect it’s the latter…

    • As far as I can tell, it’s just a jQuery UI thing.. I’m not doing anything on purpose to cause this, the script itself just moves web parts into the jQueryUI Tab containers.

  25. Is there any what to link to a specific tab? I tried adding bookmarks to the top of each content webpart and linking in. But, the last page visited kept coming up. I have many different tabs and would prefer to be able to take someone to the specific tab they request.

    • This would be more a function of jQueryUI than my script. My script simply moves web parts into jQueryUI tabs. so, if there is any existing functionality check out there site. Otherwise you’d need to code it yourself.

  26. Mark,
    I love the look of your Hillbilly tabs! They were easy to install and easy to customize the colors. I am seeing two issues.

    1) When I edit my page, the page goes blank. This is the worst kind of issue because it appears intermittently. Not all my pages do it. There is no other JS call in CEWP as you mentioned above. Any other ideas what might cause it? On the page I have three library views, the tabs WP, a picture, a table with three hyperlinks and a CEWP with instructions (just text typed into the WP)

    2) After I implement the tabs I lose the ability to drag and drop files into the library view. Do you know of anyway to have the tabs and retain the drag and drop feature?

    Maybe I am asking for my cake and trying to eat it to. Thank you for creating this code.

    Kristen

    • Hey Kristen… are you Office 365 or On Prem? I’ve not seen the issue where the page goes blank. As far as #2 I imagine this is a result of moving the web parts around, I’m not doing anything to prevent the functionality so not sure how to bring it back.

    • I have the same issue. I do have some css style in a Snippet, but everything else is simple list webparts. I have been able to work around this by clicking on the X in the URL bar during page-load, but that stops the Stop Editing button from appearing in the ribbon. But a simple page reload (to blank again) and that button is visible and it all works out.

  27. hi,
    I got just a blue line in the content editor webpart. All webparts visible below.
    Script is loaded. I have added delay function before
    Platform SP2010.

    Any idea why?

  28. Hello There. One thing we are experiencing (which is annoying for than anything), is that if we happen to click anywhere in the box (but the link to the item) the webparts(s) jump out of the Tabs. To place it back, we continue refreshing the site.

    Just wondering if there’s a fix for that.

    Thanks!!!

  29. Hello

    In each tab I am trying to put web parts – one a content editor webpart and the other an excel web part. Having an issue in the name of the Excel Web Part. When I use the portion of the script to display each web part in a tab, the name of the excel web parts seem to be recognized as seen as “Excel Web Access [1]”, “Excel Web Access [2]” and displayed in the tab named as such

    However if you use those in the construction of the var

    var webPartTitles = [“Overview”,”SR NOTES GNATS Report;#SR-NOTES-GNATS Report;#Excel Web Access [1]”,”Survey Report;#Customer & Partner Support Experience;#Excel Web Access [2]”];

    it does not recognize the excel web part.

    Just wondering any solution to this.

    Thank you
    Venkat

  30. Hi
    Thanks for making this available. Have been using it extensively to organize content elegantly.

    Is there support for tabs within tabs.

    Venkat

  32. Hey Mark – Been using Hillbilly Tabs at one of my clients for nearly 2 years – love em. I do have an issue though…when the page is in edit mode, the tabs appears twice. I’m using the //Put 2 web parts in 2 different tabs function.

    Ever hear of that or come across that before?

    Thx,
    Bill

  33. Hello,
    I’m using HillBillyTabs30 on SP2016 and it works very well. You’ve done a very good Job.

    But if there is a library or list webpart with only a few items, i can’t use the context menu correctly.
    Because the “context menu popup” of the last item is cropped after the last entry. I can only see the first entry of the menu.
    The webpartzone ends directly after the tabcontent.

    Is there any solution for this issue?

    THX
    Andi

  34. Hey Mark, thanks for a wonderful solution. Just wondering, is there a way to disable the cookie function? I’d like the tabs to open on the first tab each time the page is loaded rather than on the last tab clicked. I’ve looked at removing the + $.cookie() from the ShowActiveTab function but that didn’t work. Can i set the cookie to expire straight away somehow?

  35. Great Job on this btw!! 🙂
    I’m using the script for 2013, and one issue that I’m encountering is the script is not running on upload of the page, the SharePoint Home page displays a blank page; however, when the page is refreshed, the script runs great. Any idea what’s going on here? Thank you so much for any help.

  36. I have sharepoint 2016, Insalled all required .js files and test but no luck, Could you please confirm if this works for sharepoint 2016

  37. How to load a specific by default I have four tabs and I want to default it to a specific tab to be loaded.

    Thanks,
    Shiva

  39. Hi Mark,
    First of all, thank you for developing this script. Life saver in many ways! I’m trying to figure out how I can set a URL to go to a specific tab. I have a situation where I have a page that has multiple URLs on it. Each URL should open the page with the tabs and go to a specific tab. For example, I have I need to set a URL that should go to Tab One (showing active), then I have need to set a URL that should go to Tab Two (showing active). Any direction would be greatly appreciated. Thank you for your help!

4 Trackbacks / Pingbacks

  1. Tabbed Web Parts in SharePoint 2013 / Office 365 |
  2. POKORNY | Episode 059 with Jason Himmelstein on Power BI development—Office 365 Developer Podcast
  3. Episode 059 with Jason Himmelstein on Power BI development—Office 365 Developer Podcast | nokipedia.com
  4. Episode 059 with Jason Himmelstein on Power BI development—Office 365 Developer Podcast • PC Portal

Comments are closed.