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:
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”.
Click on “Upload Document” and then search for the .js and click on OK.
Now click on the three dots “… / ellipsis” and copy the last part of the URL.
Go to the site where you want to see the actual tabs, edit the page and add a Content-Editor to you page.
After that click on “Edit Web Part”.
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”.
Now add a Webpart which should appear in the tabs. I used the App Part Links in this case.
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.
I did this now with all of my three Link-Views and the end results look like this:
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.
