single.php
< Beitrag von Dirk Theisen

Dynamisches Inhaltsverzeichnis für SharePoint 2013 Wiki-Seiten

Bei der Erstellung eines Qualitätsmanagement-Wikis ergab sich die Anforderung, dynamische Inhaltsverzeichnisse auf Basis der im Wiki-Artikel verwendeten Formatvorlagen (Überschriften) zu generieren – ähnlich wie man es von Media-Wikis kennt.

Ich bin auf einen interessanten Blog-Beitrag zu diesem Thema gestoßen, welcher die Realisierung für SharePoint 2010 beschreibt. Um dies auch in SharePoint 2013 verwenden zu können, müssen zunächst einige Zeilen Code angepasst werden, da SharePoint 2013 teils andere CSS-Klassen für die Überschriften verwendet.

Die entscheidende Stelle beim Skript ist hierbei die Selektion der richtigen HTML Tags, welche im o.g. Blogbeitrag für SharePoint 2010 folgendermaßen erfolgt: 

Für die Verwendung in SharePoint 2013 muss das Skript bei Verwendung in einer Wiki-Websiteseiten Bibliothek (wie sie standardmäßig in der Teamsite Vorlage aktiviert ist) wie folgt abgeändert werden:

Verwendet man alternativ die Unternehmenswiki Website-Vorlage, so werden folgende Klassen benötigt:

Das im o.g. Blog-Beitrag verwendete Skript zieht die Überschriften 2-4 für die Erstellung des Inhaltsverzeichnisses heran. Möchte man alle Formatvorlagen/Überschriften (1-4) verwenden, so müssen folgende Anpassungen vorgenommen werden:

Hierbei habe ich direkt beide Wiki-Typen (Unternehmenswiki und Wiki-Seitenbibliothek) berücksichtigt, wodurch das Skript universal verwendet werden kann.

Wie verlinkt man aus anderen Wiki-Seiten (Artikeln) direkt auf die Überschriften?

Das Skript erstellt bereits Anker durch das Anfügen eines ID-Attributs mit fortlaufender Nummerierung der Überschriften, welche in Hyperlinks adressiert werden können.

Leider ist diese fortlaufende Nummerierung in der Praxis eher suboptimal, da sich – sobald eine neue Überschrift eingefügt wird – alle übrigen Anker verschieben und die Hyperlinks folglich auf falsche Überschriften zeigen. Daher haben wir uns statt der fortlaufenden Nummerierung für die Verwendung des Überschriften-Texts im ID-Attribut entschieden. Dieser wird zusätzlich getrimmt, Leerzeichen werden aus Gründen der Lesbarkeit durch Unterstriche ersetzt und schließlich wird der String als URI encodiert und die dadurch entstandenen %-Zeichen entfernt, um auch mögliche Sonderzeichen in den Überschriften unterstützen zu können. Diese Anpassungen können beliebig verfeinert werden.

Mit leicht modifiziertem (und an Media-Wikis angelehntem) CSS-Design ergibt sich somit folgendes Ergebnis:

QM Wiki SharePoint

Hier der gesamte Code:

Hinterlegt man nun den Code als HTML-Datei in SharePoint (beispielsweise in den Website-Objekten), so kann man diese über das Inhalts-Editor-Webpart auf einer Wiki-Seite einbinden und das Inhaltsverzeichnis generiert sich automatisch. Dabei empfiehlt es sich aus Performance-Gründen, den ersten Script-Tag abzuändern und auf eine lokale jQuery-Kopie zu verweisen.

Kopiert man zudem aus dem Inhaltsverzeichnis einen Hyperlink zu einer Überschrift, so kann man diese direkt auch in externen Systemen oder anderen Wiki-Artikeln verlinken.

Folgen
X

Folgen

E-mail : *
Kategorie: SharePoint | Schlagwörter: , , , , | Kommentare: 15

Beitrag kommentieren

CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.

Kommentare

  • 15.09.2014 von Martin

    Hallo,
    SharePoint nutzt für Überschriften auf Wiki-Seiten bei mir leider nicht die die Klasse ms-wikicontent, woran könnte das liegen?

    Gruß

    • 20.09.2014 von Dirk Theisen

      Hallo Martin,
      welche Version und Produktgeneration von SharePoint nutzt Du genau? O.g. Beschreibung sollte auf SharePoint Foundation und Server 2013 funktionieren..

      Viele Grüße Dirk

  • 24.10.2014 von Mario

    Hallo,
    wie Martin schon sagte, funktioniert das Skript bei mir auch nicht. Die Box mit der Überschrift "Inhaltsverzeichnis" und die Möglichkeiten zum Anzeigen und Verbergen erscheinen zwar, aber es werden keine Überschriften angezeigt.
    Klickt man mit dem Firebug auf die Überschriften, so bekommt man hier auch bspw. ".ms-rtestate-field h2" angezeigt anstatt ".ms-wikicontent h2". Ein ersetzen dieser Bezeichnungen im Skript funktioniert aber leider auch nicht.
    Der Server ist ein Microsoft SharePoint Enterprise Server 2013 64-Bit Edition

    Gruß Mario

    • 26.10.2014 von Dirk Theisen

      Hallo Mario,
      ich hatte ursprünglich das Skript für 2013er Wiki-Seitenbibliotheken angepasst. Du scheinst das Enterprise Wiki zu verwenden. Ich habe den Blogbeitrag angepasst und um Enterprise Wikis ergänzt. Nun sollte es funktionieren! Getestet auf SharePoint Foundation und Server 2013.

      VG Dirk

      • 27.10.2014 von Mario

        Hallo Dirk,
        vielen Dank für deine schnelle Antwort.
        Leider hatte ich anfänglich wieder den gleichen Fehler, wie zuvor schon beschrieben. Ich habe aber den Fehler nun gefunden. Ich muss dazu sagen, dass ich keine Ahnung von JavaScript habe und deinen Code einfach nach der Anleitung per Copy & Paste verwendet habe. Dabei habe ich völlig übersehen, dass im Code steht "" und genau das war auch der Fehler. Jetzt habe ich den Link zum jQuery eingebunden und dein Skript funktioniert wunderbar.
        Vielen Dank nochmal!!

        • 27.10.2014 von Dirk Theisen

          Hallo Mario,
          danke für Deine Rückmeldung! Ich habe den Code nochmal angepasst und direkt über das jQuery CDN eingebunden - jetzt sollte es auch mit reinem Copy & Paste funktionieren :)
          VG Dirk

  • 04.12.2014 von Stefano

    Hallo Dirk,
    danke dir super Anleitung hat auf Anhieb bei mir geklappt. Ich stelle nur einen Fehler fest. Auf Überschriften ohne Umlaute klappt die Verlinkung super aber bei Überschriften mit Umlauten kann ich zwar im Inhaltsverzeichnis draufklicken aber er springt nicht drauf. Hättest du noch einen Tip für mich?

    Nochmal danke, VG Stefano

    • 04.12.2014 von Stefano

      Hab es mit der Hilfe eines Kollegen lösen können. Wir haben einfach eine zusätzliche Zeile nach der Zeile 63 für das String Replace eingefügt:

      $encAnchor = $encAnchor.replace(/%/g, "");

      Die Umlaute werden in SharePoint ja auch mit einem % Zeichen markiert, damit fliegen alle % Zeichen raus und die Hyperlinks funktionieren.

      Danke und viel Spaß an alle
      VG Stefano

      • 14.09.2015 von Dirk Theisen

        Hallo Stefano,
        vielen Dank für die Info! Habe es im Script mit aufgenommen!

        VG Dirk

  • 31.08.2015 von Pieter

    Hallo Dirk,

    Dein script können wir sehr gut gebrauchen & ich habe es wirkend in unseren Wiki. Danke!

    Nur eine Frage: wie kann ich die automatischen Nummerierung ausschalten? Die brauche ich nicht...

    Gruss, Pieter.

    • 02.09.2015 von Dirk Theisen

      Hallo Pieter,

      das freut mich! Die Ausgabe der Nummerierung erfolgt in Zeile 66 des Gesamt-Scripts durch die Variable "theLevelString" - diese kannst du natürlich auch einfach weglassen. Aus
      ... theLevel + "'>" + theLevelString + " " + $(this).text() ...
      würde dann
      ... theLevel + "'>" + $(this).text() ...

      VG Dirk

      • 02.09.2015 von Pieter

        Danke für dieser Antwort, Dirk.
        Jezt funzioniert dein Script wie ich dass sehen möchte.

        VG Pieter

  • 27.09.2017 von Corinna

    Hallo Dirk,
    wir haben SP 2013 und dein Script funktioniert prima. Vielen Dank dafür!
    Eine Anmerkung - für mich allerdings verschmerzbar, aber ggf gibts dennoch eine Lösung ? - das Inhalts-Editor-Webpart möchte einen Titel haben. Wenn ich keinen einfüge dann steht da "unbenannt", also auch nicht so schön. Dies wird wiederum offenbar als Überschrift identifiziert und taucht als 0.1 im Inhaltsverzeichnis auf - egal wie ich den Titel nenne. Ich würde ihn nun Inhaltsverzeichnis nennen, damit es nicht so auffällt. Dann gibt es jetzt nun zwar eine inflationäre Nutzung des Wortes "Inhaltsverzeichnis" in den ersten paar Zeilen der Wiki-Seite, aber so fällt es vom Layout her am wenigsten auf.
    Ich habe die Nummerierung wie in den Kommentaren von dir beschrieben auch weg gemacht, daher taucht auch die 0.1 nun nicht mehr auf und es ist in Ordnung.

    Viele Grüße
    Corinna

    • 29.09.2017 von Dirk Theisen

      Hallo Corina,

      für das von Dir beschriebene Problem gibt es zwei Lösungsansätze:

      1. Ausblenden des Webpart-Headers: Wenn du in den Eigenschaften des Inhalts-Editor-Webparts den Chrometyp auf "Kein" stellst, verschwindet der Titel und damit auch die 0.1 im Inhaltsverzeichnis. In der Form habe ich es bislang meist realisiert.

      2. Falls Du den Webparttitel verwenden möchtest, so müsste dieser im Script bei der Sammlung der Überschriften (H1-H4 Tags) ausgeschlossen werden. In dem Fall wäre dies über .not(".ms-webpart-titleText") machbar.
      Demnach müsste die Zeile:
      $(".ms-rtestate-field > h1, .ms-wikicontent h1, .ms-rtestate-field > h2, .ms-wikicontent h2, .ms-rtestate-field > h3, .ms-wikicontent h3, .ms-rtestate-field > h4, .ms-wikicontent h4").each(function(i){

      ausgetauscht werden gegen

      $(".ms-rtestate-field > h1, .ms-wikicontent h1, .ms-rtestate-field > h2, .ms-wikicontent h2, .ms-rtestate-field > h3, .ms-wikicontent h3, .ms-rtestate-field > h4, .ms-wikicontent h4").not(".ms-webpart-titleText").each(function(i){

      Viele Grüße

      Dirk

  • 29.09.2017 von Corinna

    Hi Dirk,

    großartig! Der Hinweis zum Chromtyp war perfekt, danke!
    Ich bin noch recht frisch in dem Thema und trau mich noch nicht an allen Knöpfen rumzudrehen :)

    Viele Grüße
    Corinna