SharePoint Tabs

Business Requirements
In SharePoint Online, end-users would like to:

  • Create a new web page where they can interactively add 1 or more web parts onto the different web part zones on the page;
  • Display multiple web parts under specified tabs. For example in the first tab, display 3 web parts. Then in the second tab, display 1 web part; and
  • Have a UI that offers no code experience for end user to configure the tabs.

There are two recommendations to meet the business requirements.


1. Recommendation – SPELL Tabs v1.1
Use SPELL Tabs 1.1 developed by Christophe Humbert in 2014 for SharePoint Online. SPELL Tab is a replacement and successor of Easy Tab (Go to SharePoint User Toolkit page and then navigate to Easy-Tabs-v5) on premise solution for SharePoint 2010 & 2007. Follow the instructions below to implement the solution.

SPELL Tabs v1.1 has two versions available to clients. There is the i) basic entry level version which is free at no charge and ii) commercial version purchase for a retail price of $99 USD. Both versions are distributed by distributed by User Managed Solutions LLC and comes with a free user manual.  Clients can download and read the SPELL Tab v1.1 user guide PDF file from this site. Please note that the SPELL Tab v1.1. user guide is for the installation of the full commercial license version.

Free version
The basic version of SPELL Tabs comes with:

The free sample of SPELL Tabs comes with To use the SPELLv0.9.2TabsAppModeDemo.aspx file follow the steps:

  1. Download the SPELLv0.9.2TabsAppModeDemo.aspx page with the associated JavaScript file SPELLv0.9.2CoreTemplateWPNav.js

2. Upload the SPELLv0.9.2TabsAppModeDemo.aspx and SPELLv0.9.2CoreTemplateWPNav.js to the same folder location at the site asset document library in SharePoint Online.

3. Create a blank new web page and add your own specific 1 or more web part contents into any of the web part zone.

4. Add a page viewer web part and point/link the relative URL to: /siteassets/SPELLv0.9.2TabsAppModeDemo.aspx

5. In the page viewer web part properties, update chrome field to: None. Then apply the Page Viewer web part changes, save and publish the page.

By default due to the limitation of the free version, the SPELLv0.9.2TabsAppModeDemo.aspx will display each web part as it’s own separate tab. There are also other tabs being displayed, i.e. the links tab, “+” expand tab, “-” minimise tab and the “[] ” print tab. Unfortunately user do not have any control over the other tabs.

Commercial version
The commercial version of SPELL Tab v1.1 can be purchase for a retail price. The paid version will come with a User Interface by adding the out of the box Page Viewer web part that references the Spell tab UI page, so t hat user does not need any code experience.

However please contact [email protected] to confirm the following:

  • Is the price  $99 USD for the commercial version v1.1?
  • After downloading the free SPELL Tab v1.1 user guide PDF file from this site will Christophe provide client with access to download the five SPELL components as mention in the instruction section of the user manual?
  • What are the support level agreement for commercial license in terms of i)support coverage 24×7 ii)support response time ?
  •  Are there any annual additional cost that client need to renew the license every year?


2. Recommendation – Hillbilly Tabs
This is a free version of Hill Billy Tabs that will work in SharePoint online platform. To get started follow the instructions at of version 2 at

There is also version 3 published in at

However the recent version 4 is the latest release at

The steps to implement the Hill Billy tabs are:

1. Create a new JavaScript file (e.g. tab.js) and copy and paste the code from one of the above Hill Billy blog site

2. Upload the JavaScript file to the site asset document library in SharePoint online.

3. Create a new page ( and add the necessary web part contents you wanted onto any zone on the page.
NOTE: By default of out the box without any programming, each web part content will represent each individual tab. E.g. If you add 1 document web part inserted onto any zone and add another 1 image web part into any zone, then there will be 2 tabs shown, that is Document and image tab.

4. Add OOTB content editor web part onto the very top page.

* Edit the content web part property and enter the URL link to the JavaScript file that was uploaded to the asset library (e.g. /sites/digiworkuat/siteassets/tab.js)

* Edit the Chrome type to select none


5. Click “Apply” button and save the page.

6. Check the page and publish the page when tab looks good

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.