It is here! Part 2! Let’s go!

Here we gonna show you how to get multiple views or webparts in tabs.
As you might remember the end result of part 1 was this:

Multiple tile view and list tabs 2 of 2 (en)_1

The first step to get those tabs, is to download the TopSPTabs.js.
There are two different versions. One with Bootstrap and one without.

After you downloaded the one you need, go to the site where you want to have the tabs and open up “Site Contents” and then “Site Assets”.

Multiple tile view and list tabs 2 of 2 (en)_2

Click on “Upload Document” and then search for the .js and click on OK.

Multiple tile view and list tabs 2 of 2 (en)_3

Now click on the three dots “… / ellipsis” and copy the last part of the URL.

Multiple tile view and list tabs 2 of 2 (en)_4

Go to the site where you want to see the actual tabs, edit the page and add a Content-Editor to you page.

Multiple tile view and list tabs 2 of 2 (en)_5

After that click on “Edit Web Part”.

Multiple tile view and list tabs 2 of 2 (en)_6

First type in two dots “..” and after that paste your copied content. (../SiteAssets/TopSPTabsNoBS.js)
After that change the Title (I used Links) and set the Chrome Type to “Title Only”.

Multiple tile view and list tabs 2 of 2 (en)_7

Now add a Webpart which should appear in the tabs. I used the App Part Links in this case.

Multiple tile view and list tabs 2 of 2 (en)_8

You can see now, that it is almost perfect.
Go into the Edit Web Part(1) for the just added webpart and set the right View (2), also change the Title which should appear as the name of the tab (3) and set the Chrome Type to “Titel Only” (4).
NOTE: Only if the webpart is set to “Title Only” it will appear properly in the tabs.

Multiple tile view and list tabs 2 of 2 (en)_9

I did this now with all of my three Link-Views and the end results look like this:

Multiple tile view and list tabs 2 of 2 (en)_10

NOTE 2: In the TopSPTabsNoBS.js there is a custom .css which might change you font and some other stuff. But you can change that of course.

I hope you liked Part 2 from this series. If you want to take a look into Part 1 again, don’t be afraIT to click here.

We would love to see if you share this two parts in your social networks or if you just comment it below. So we could see if we are on track and if you like our posts.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here