The Backstory – Classic Sites Matter
(skip this section if you really don’t care, and just want the solution)
If you are a normal visitor to my blog, you might be aware of the various client-side solutions that I’ve provided over the years to help you guys get the most out of our SharePoint environments. By far one of my most popular solutions is one for placing your Web Parts into jQuery UI Tabs. I’ve written blog posts updating the functionality over the past 5 years and it continues to get a lot of traffic:
Tabbed Web Parts in SharePoint 2013 / Office 365
SharePoint Tabbed Web Parts–HillbillyTabs2.0
SharePoint Tabbed Web Parts–HillbillyTabs 3.0
You may have also noticed that I haven’t released any solutions in quite a while. The main reason for this (besides time) is because of the momentum and push for modern sites in SharePoint Online. As we move away from classic pages and into modern pages we will be doing less and less page manipulation and script injection and more using the SharePoint Framework for development. Following that same logic, there is some future where the “plug and play” solutions I provide on my blog may not work in these modern sites. Thus, I’ve placed less of a priority on updating and creating new solutions for you guys. I know… I know… I’m a big fat jerk.
Which brings me to this blog post. It’s nice to get a slap in the face reminder of the real world every now and then. I was in Washington DC last week speaking at SharePointFest DC presenting several sessions and workshops on client-side development in SharePoint. I was blown away by the sheer number of people that still actively use my solutions and have no plans to move to the cloud (or upgrade) anytime soon. Also, there are so many people working in SharePoint for government agencies who have zero access to traditional development options so things like my solutions are sometimes their only option for customizing their sites.
As awesome as modern is, and as much momentum as we have going for modern we absolutely can’t forget about those people who are still years away from a modern experience. To that end, I’d like to apologize for neglecting you guys lately and offer up an olive branch by releasing a new version of my HillbillyTabs script that contains features you guys have asked for in the comments of previous posts.
So, forgive me?
HillbillyTabs 4.0
With Hillbilly Tabs 4.0 you can easily place SharePoint Web Parts into jQuery UI Tabs. This solution has been tested in SharePoint Online (classic mode), but should work in SharePoint 2010, 2013, 2016 and 2019 (classic mode). If you have issues leave a comment and I’ll do what I can do address it.
New Features
Sometimes I listen to you guys (no really!) and to that end I added several requested features to HillbillyTabs that will hopefully increase your love for it and decrease your frustrations. The new features for version 4.0 include:
- Default Tab – allows you to specify the name of the tab that should be loaded by default when the page loads
- URL to Tab – allows you to create a URL which will open the page with a specific tab active, the format of the url is:
- http(s)://<url to page>?tab=Name of Tab
- Side by Side Web Parts in a tab – Allows you to place multiple web parts in a tab and have them appear side by side
- Redundancy – Using multiple methods to find the web part in the page to place into a tab to take into account different versions/builds of SharePoint
New Interface
The process for creating tabs in previous versions of the script was very simple but unstructured and didn’t lend itself to adding new functionality. To that end, I’ve changed the main structure which was an array of web part titles to be an array of JSON objects. This does require that you do a bit more work when structuring your tabs, but tough. You wanted more features? You get more complexity. Punks…
Now, when calling the function to create tabs you will use one of the following methods:
$().HillbillyTabs(); //place all webparts in zone into tabs
Or if you need more control
$().HillbillyTabs({
tabConfiguration: < array of JSON Objects > , //(optional) used to customize the structure of your tabs
defaultTab: "< title of tab >", //(optional) load this tab as the active tab
rememberLastTab: true / false //(optional) remember the last tab the user was on when page reloads (default is false)
});
Where “tabConfiguration” is an array of JSON objects where:
var myTabs = []; //array to hold tab configuration
var thisTab = { //tab configuration object
title: "Title of Tab", //Title of Tab (duh)
webParts: ["<title of Web Part>", "<title of 2nd Web Part>"], //array of web parts to put in this tab
horizontal: true / false //(optional) display web parts horizontally or vertically (default is vertically)
}
myTabs.push(thisTab); //add tab configuration object to array
$().HillbillyTabs({
tabConfiguration: myTabs
});
This means if you want to have multiple tabs you would create a JSON object (thisTab above) for each tab and add each JSON object into the tabConfiguration array (myTabs above).
Confused? Watch the video below to see step by step instructions.
Source Code
I have uploaded the source code for this solution to github at https://github.com/mrackley/HillbillyTabs-4.0
If you are just really lazy and want a chunk of code you can drop into your Script Editor Web Part or link in your CEWP then you can use the following script to just place all web parts in a zone into tabs:
<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="//markrackley.net/scripts/jQuery.HillbillyTabs.4.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($) {
// This example places all web parts in the same zone into tabs
$().HillbillyTabs();
});
</script>
Still confused? Time for you to watch the video
The Video
That’s pretty much all there is to it! I hope you like the enhancements. Thanks again for all your feedback and please feel free to send me future requests for enhancements and solutions!
Nice, and totally agree on the part about new modern pages, a lot of our customers, like 70%, are not switching any time soon. Yet another reason why no to switch is the perceived steep increase in costs when using the SharePoint Framework each time anything has to be changed. Time will tell if this point of view is correct or just fear of the unknown 🙂
This wont work comes back with “Object doesn’t support property or method ‘tabs'” within the jquery file. Any thoughts?
The “tabs” method is the jqueryui method responsible for converting the HTML to jqueryui tabs. Make sure the path is correct to code.jquery.com/ui/1.11.2/jquery-ui.min.js or whatever jqueryui js file you are using.
Mark
I’ve always loved this web part. It looks good on a page and provides a way to stick a lot of information within the page view. We’ve recently had problems with classic SharePoint pages being slow to load so I’ve been creating new “Site Pages” to speed up loading the page. While the site is still a classic site, the new Site Page is a modern page. Will the code work on those pages?
no ma’am
Thanks Mark … nice update!
I noticed that the new script is picking up the Title and not Text for the WebPart(s) … as such, it is picking up ‘Title – Description of the web Part” and using that as the name of the tab. Replacing the attr(‘Title’) with text() corrected it but I am wondering if that would break the rest of the functionality?
Hmm… I think you should be good.
Thank you for a tab control we use everywhere on our non-modern SharePoint Online site! It just works and 4.0 fixes the “Error” tab for permission issues.
One quick question – we’re getting pushback against the 3.0 tabs because they affect 508 compliance – you can’t reach the tabs by tabbing on the keyboard (All of the tabs except the active one have tabindex = -1.)
Does this version address that? Any ideas how it could be addressed?
No, I’ve done no work to make it address 508 compliance. sorry.
Hi – Sometimes when I load my SharePoint page the tabs will not come up correctly, instead all the web parts are shown independently. Most times the web parts are shown within the tabs – is there anyway to ensure the tabs show up consistently?
I’ve not seen this behavior before, are you executing the tabs in the document ready function? It sounds like you are executing the code before the page loads.
Hey Mark, great post, and extremely helpful. The info on your site makes others think that I know what I’m doing. I was wondering if it was possible to add some custom code to make the tab headers function as links that open up modal popups when clicked?
Anything is possible 🙂 Not sure I’m following the use case here though, the tab headers function to activate a tab?
I’ll clarify. In your solution, the tab text show the names of corresponding Web Parts (tab text). I was curious if I could make the each of the tab texts function as buttons/clickable (a button). For example, in my Zone, I have 3 WPs: CEWP, ‘Contacts’ LVP, and a ‘Tasks’ LVWP. The CEWP holds your hillbilly tab script, which then shows (2) tabs: Contacts, Tasks. I’d like for a user to be able to open a ‘New Form’ for the Task list in a modal popup by DOUBLE CLICKING on the ‘Tasks’ tab. This feels confusing as a write this out — does this make sense?
It does sound a bit confusing, can you not just use the toolbar in the list view to add a new item? You could edit the code to attach a double click even to the tabs if you wanted to. It might not be intuitive though…
Hi Mark,
I have used your other versions and it has make life easier. I am having an problem adding CSWP to this version. I am getting 2 tabs one with the tab name (no content) and the 2nd tab with no name (has the content). Am I missing something?
Hmm… if it worked with previous versions then it should work now as well… the core functionality is the same, I just added more redundancy. Can you confirm that it worked in this same scenario in previous versions? If not, it could be a timing issue.
Hi Mark
This is a great web part, which I have used previously. However, now trying to use it on a publishing page based on a custom layout with several zones. Within the zone I want to use it, there are three web parts, but I can’t get this to work. Unfortunately I can’t debug as the page won’t even load and crashes IE completely. For my current requirement, this is the perfect fit, so any help would be greatly appreciated.
In case it helps, I have not used this on a publishing page before.
Thanks
Azam
Without having access to your page it’s hard to tell what might be going on. How did you create the custom layout? Have you tried in a different browser?
I want to hide the tab header if user doesn’t have access to the web part,is this possible to implement in this?now am getting blank web part with the title of tab.
You could audience the web part? I think that would achieve what you are looking for.
Hi Mark,
I want to remember the last tab the user was on when the page reloads. I’m using the really lazy and want a chunk of code script in your 4.0 article with the mod below per your article. Tabs work fine, but does not remember the last tab. I’m not a js person – any ideas? Thank you!
jQuery(document).ready(function($) {
// This example places all web parts in the same zone into tabs
$().HillbillyTabs( {
rememberLastTab: true
});
Hmm.. are you referencing the jquery.cookie library?