The Return of Hillbilly Tabs

Fine! I give up! At least once a month I have someone asking me to please create a version of Hillbilly Tabs to work on Modern SharePoint pages. I try to explain the reasons why you shouldn’t be manipulating the DOM, how it goes against best practices, and tell people that SURELY Micrsosoft will release some functionality at some point to support tabbed web parts…

and we waited… and people kept asking… So fine… you win… I give you…

The Return of Hillbilly Tabs for Modern SharePoint Pages

For some backstory, about 4 years ago (yes, 4 years) I hacked together an SPFx solution to work on Modern Pages to create tabs using jQuery UI Tabs. Some awesome (and wicked smart) community friends Chris Kent and Stefan Bauer also threw their hats in the ring to create some examples as well. All of those projects can still be accessed in GitHub at mrackley/ModernHillbillyTabs: Place ShaerPoint Web Parts into tabs on Modern Pages (github.com)

The problem is, those solutions no longer work because of changes Microsoft has made to the way pages and web parts are rendered, which is their right to do so! This is also why it’s historically not a good practice to create solutions that manipulate a modern SharePoint Page. Is that enough CYA?

ANYWAY… fast forward to present day. I decided to start from scratch. I ditched jQuery UI tabs because frankly, they don’t look modern. I really like the approach Chris took with his “Hipster Tabs” including the way web parts were selected and labeled. So, I stole his idea. I also found an extremely light tab script called AddTabs that looked more modern to use.

So, I combined some lessons learned from Chris, with the AddTabs library and also made efforts to identify Sections and Web Parts on the page using a class that is less likely to change over time which will hopefully mean the solution will break later than sooner. Finally, I made these identifying classes properties of the web part, so if Microsoft makes changes to the page that break the functionality, if we are lucky we can just update these property values to new identifiers.

To use the web part:

• Upload the Solution Package to your app catalog
• Add the web part “ModernHillbillyTabs” to the section of the page where you want the tabs to be.
• Add the web parts you want to be in tabs to the SAME SECTION
• Edit the Web Part Properties of the ModernHillbillyTabs and click on the button “Manage Tab Labels”
• Using the collection property that is displayed, select the web part you want to put in a tab and specify the label you want for that tab. You’ll notice when selecting a web part it just says “Web Part 1”, “Web Part 2”, etc… this is because there’s no identifying title on all web parts. You may have to guess which web part you are labeling and go back and update the label if you were wrong. Hey, you get what you pay for.

That’s all there is to it! Below is a quick video showing you how to use the web part. You can download the source code and build the project by going to GitHub at: mrackley/Modern_Hillbilly_Tabs: Place Web Parts into Tabs on Modern SharePoint Pages (github.com)

OR if you want to use an already built solution package you can download that here: https://bit.ly/ModernHillbillyTabs

Really huge shout out to Chris, Stefan, and Beau Cameron… Blame them for being so good at what they do!

Caveats

Just to re-iterate, this solution is provided “as-is” without any type of warranty. Code is open source, knock yourself out.

I do not condone manipulating the page like this for Modern SharePoint Pages but do very much understand the need for it.

And a very huge shout out to all the users of Hillbilly Tabs over the years, it really means a lot to know how many people I’ve helped. This one is for all of you!!!