jQuery und SharePoint 2010 gemeinsam nutzen

4. Juli 2011

In diesem Beitrag geht es um die Integration der jQuery-JavaScript-Bibliothek in den SharePoint 2010, sodass innerhalb des SharePoints auf die jQuery-Funktionen zugegriffen werden kann. Die folgende Anleitung zeigt hierbei die notwendigen Schritte zur Integration der jQuery-Bibliothek. Anschließend wird im letzten Abschnitt die jQuery-Bibliothek getestet, um zu überprüfen dass alles korrekt funktioniert:

  • Schritt 1: Einbinden der jQuery-Bibliothek
  • Schritt 2: Testen der Funktionalität

Einbinden der jQuery-Bibliothek

Um die jQuery-JavaScript-Bibliothek im SharePoint 2010 zu nutzen sind folgende Schritte notwendig.

  1. Download der neuesten jQuery-Bibliotheken: http://docs.jquery.com/Downloading_jQuery
  2. Erstellen eines neuen Ordners innerhalb der SharePoint-Templates:
       1:  

       2: <SharePoint Installation Path> 14TEMPLATELAYOUTS

       3:  

    Ordnername ist beispielsweise „OtherScripts“

  3. jQuery-Scripte in den in Schritt 2 erstellten Ordner kopieren

    clip_image002

  4. Kopie der SharePoint Masterdatei erstellen (siehe hierzu auch die MSDN-Dokumentation “Create a copy of the primary Master Page” ) 
    1. SharePoint Designer öffnen und in den Bereich “Master Pages” navigieren
    2. Eine Kopie des Templates Master-Dokumentes erstellen. Meistens ist dies der “v4.master”. Weitere Informationen zu den anderen Master Pages in SharePoint 2010 finden sich im Blogpost “Quick overview of Master Pages in SharePoint 2010” von Corey Roth (SharePoint MVP) oder in der MSDN-Dokumentation “Default Master Pages in SharePoint 2010” 
    3. Die v4-Master Kopie passend umbenennen z.b. in “v4_jquery.master”
    4. Die neu erstellte v4_jquery Master Datei als primäres SharePoint Master Dokument einrichten (siehe hierzu auch die MSDN-Dokumentation “Set your new master page as the primary master page”) 

      image

  5. Innerhalb des SharePoint Designers einen “Check-Out” auf das “v4_jquery.master”-Dokument durchführen.
  6. Rechtsklick auf „v4_jquery.master“ und „Edit File in Advanced Mode“.
     
    image
  7. Einen neuen „ScriptLink“ einfügen, der auf die jQuery-Bibliothek verweist. Das Attribut „OnDemand=true“ muss hierbei entfernt werden, da der SharePoint die Bibliothek sonst nicht standardmäßig lädt.

    image

  8. Das Master-Dokument abspeichern und einchecken (Check-IN) + „Approve the page version“. Danach wird die jQuery-Bibliothek automatisch geladen.

Testen der Funktionalität

  1. Öffnen des Internet Explorers (SharePoint-Startseite)
  2. „F12“ Drücken, um den „Developer Modus“ zu starten. (Diese Funktionalität steht erst ab IE 8 zur Verfügung)
  3. Überprüfen, ob das jQuery-Codesegment innerhalb des Script-Sektion vorhanden ist

    clip_image008

  4. Um die jQuery-Funktionalität vollständig zu testen kann folgendes jQuery-Codefragment ausgeführt werden:
       1:  

       2: $("#MSO_ContentTable").css("background-color","lime"); 

       3:  

    Das jQuery-Codefragment kann hierbei einfach in den Consolen-Bereich eingefügt werden, und durch Drücken von „Run Script“ ausgeführt werden.

    clip_image010

  5. Das Ergebnis zeigt eine veränderte SharePoint-Startseite, bei der die Hintergrundfarbe über das jQuery-Codefragment dynamisch auf „lime“ verändert wurde.

    clip_image012

Fazit

Durch die Integration der jQuery-Bibliothek in das SharePoint-Master-Dokument kann jede beliebige SharePoint-Seite auf die komfortablen jQuery-Funktionen zur DOM-Manipulation und –Navigation zugreifen und diese Skripte innerhalb eines Webparts nutzen. Das Motto von jQuery “Write less, do more” lässt sich somit auch im SharePoint-Kontext umsetzen.

Mehr Informationen zu jQuery: