Es ist soweit. Teil 2 ist hier.

Hier wirst du sehen, wie du mehrere Ansichten oder Webparts in Tabs anzeigen lassen kannst.

Im Teil 1 war unser Endresultat dieses:

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

Nun solltest du als erstes die TopSPTabs.js herunterladen.
Diese gibt es einmal in der Version ohne Bootstrap und einmal mit.

Nun gehe auf der Seite auf der du die Tabs haben möchtest unter den Websiteinhalte in die Websiteobjekte-Bibliothek.

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

Klicke hier auf “Dokumentupload” und wähle unter “Durchsuchen” die richtige .js aus. Klicke abschließend noch auf “OK”.

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

Klicke nun auf die drei “…” und kopiere dir den hintern Teil der Adresse.

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

Gehe nun zur Seite auf der du die Tabs haben willst, bearbeite die Seite und füge über “Einfügen” einen Inhalts-Editor der Seite hinzu.

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

Bearbeite nun den Inhaltseditor. Klicke dazu auf “Webpart bearbeiten”.

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

Nun füge zuerst zwei Punkte in die Adresszeile ein, gefolgt von deinem Inhalt aus der Zwischenablage. (../SiteAssets/TopSPTabsNoBS.js)
Danach ändere den Titel (in diesem Fall “Links”) und setze den Chromtyp auf “Nur Titel”.

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

Nun füge einen Webpart ein der in den Tabs erscheinen soll. In diesem Guide wähle ich die Links aus.

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

Nun ändere auch diesen Webpart (1), wähle die richtige Ansicht aus (2), vergib einen passenden Titel (3) und WICHTIG ist der Chromtyp (4).
Nur wenn dieser auf “Nur Titel” steht kann das Skript den Webpart/Ansicht finden und diesen in die Tabs inkludieren.

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

Ich habe dies nun mit all meinen drei Link Ansichten gemacht und das Endresultat kann sich meiner Meinung nach absolut sehen lassen.

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

Beachte ausserdem, dass im TopSPTabsNoBS.js eine separate .css aufgerufen wird die deinen Stil eventuell überschreibt. Diese kannst du im Skript abändern.

Ich hoffe dir hat Teil 2 der Reihe gefallen. Falls du Teil 1 suchst, kannst du hier nochmal einen Blick hinein werfen.

Wir würden uns freuen, wenn du diese zweiteilige Serie teilst oder auch einfach kommentierst. Dann sehen wir, dass wir auf dem richtigen Weg sind.

LEAVE A REPLY

Please enter your comment!
Please enter your name here