SharePoint Tabbed Web Parts

 

               With this Blog, I would like to share with you a SharePoint feature written by a gentleman called Mark Rackley. I take no credit for this other than having the pleasure of passing this method on for others to also benefit from.

               Please visit: http://www.markrackley.net/2015/08/16/sharepoint-tabbed-web-partshillbillytabs-3-0/

               If you have a single SharePoint page that contains several WEB parts in a single Zone you will know that they all pile up on top of each other. This in turn make the page very long and has the user scrolling up and down the page to the WEB part they want to view. You could always minimise the WEB part if you wished but this method is much more pleasing to the eye.

               We can instead place each WEB part into a single TABBED element on the page as seen below. The insert is the same WEB Part showing how we can display different Library’s within the same view simply by clicking each tab.

 

Here we can see two WEB Apps sitting in a TABBED view requiring the user to simply click on any tab to show the WEB part.

               The WEB Part can still be clicked on to open the whole library up in its own page as normal.

               To make all of this happen simply add the required WEB Apps into a single zone.

               Then include a SEWP Scrip Editor Web Part. Edit the SEWP and add the code below – save – and exit to the page in Browse mode.

               You can vary the way things are presented by turning on or off the variations in the code below.

               Also, you can amend the Display colours (Theme). Link to http://jqueryui.com/themeroller/ to create a new Theme and download it. Change the reference in the file below to point to the revised CSS file.

 

<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>

Kind Regards

Andy Taylor

IT Solution Architect

 

Feedback

If you have questions about Microsoft SharePoint, feel free contact us via the form below.


Intelligent Digital Workplace TICKETS NOW £25  click here to book ticket – https://www.eventbrite.co.uk/e/purposeful-innovation-intelligent-digital-workplace-seminar-tickets-93251183801

For small and medium businesses, having a remote workforce can make a lot of sense. You’ll widen your talent pool as you’ll be able to hire for skills over proximity. You’ll save money on paying for office space and all the trimmings. But how can you easily ensure your remote workforce has the same dynamic and trust as an in-house team would? We will be sharing most effective practice in making use of technology to build trust, connections, and empower your workforce to work remotely from their home office.

This seminar is a forum to listen and share questions with experienced experts who will share examples of effective business practice when planning and managing an ‘Intelligent Digital Workplace.’ While encouraging and challenging you to reflect on your Business Growth and innovation and consider if you can claim back money from the Government.

Twitter: #digitalworkplace

Agenda for Seminar and entire event:

9.30am – 13.00pm Morning Seminar schedule: Places are limited

13.00pm – 14.00pm Lunch, please visit The Hub Café

13.30pm – 14.00pm Exhibitors and Informal Networks

14.00pm – 15.00pm Speed Business Networking

14.00pm – 16.30pm Coffee, relaxed discussions or networking

 

Enjoyed reading? Spread the love