Daniel Buschke – Blog

Mich traf die Aufgabe, in einer Bibliothek die Ordnersymbole anders zu gestalten, je nachdem ob sich Dateien innerhalb dieses Ordners befinden oder eben nicht.
Die Lösung ist relativ simpel und mit ein bisschen Javascript und dem Client Object Model des SharePoint Servers relativ schnell gelöst gewesen.

Ziel war es, in Dokumentenmappen die Ordner (welche dort eh nicht supported sind) ein anderes Symbol zu geben. Da die Dokumentenmappen allesamt dieselbe Seite nutzen (docsethomepage.aspx), habe ich eine Javascript Datei geschrieben, welche auch direkt in der Seite über ein Inhaltseditor Webpart geladen wird. Natürlich wäre auch ein Link in der Masterpage möglich gewesen, aber dieser Weg schien am einfachsten.

Ok was wird benötigt.. zuerst mal habe ich aus dem Ordner “14\Template\Images” das Bild für den Ordner (Folder.gif) kopiert und nach meinen Wünschen angepasst. Diese Datei wurde dann im selben Verzeichnis unter dem Namen “FolderFiles.gif” gespeichert.

Im Anschluss daran habe ich mir die unter der MIT Lizenz stehende Javascript Datei “getelementsbyclassname” heruntergeladen und im Ordner “14\Template\Layouts\scripts” gespeichert.

Nun konnte ich mit der eigentlichen Entwicklung beginnen. Zuerst habe ich mir eine neue Javascript Datei im gleichen Ordner erstellt und dann ging’s los…

ExecuteOrDelayUntilScriptLoaded(initialize, "sp.js");

Das wichtigste zuerst! Diese Funktion wartet, bis das Client Object Model (die Datei “sp.js”) vollständig geladen ist und ruft anschließend die Funktion “initialize” auf.

function initialize() {
    //Alle Ordner anhand der Klasse "ms-vb-icon" finden
    var folders = getElementsByClassName("ms-vb-icon");
    if (folders.length > 0) {
 
        var rf = "RootFolder=";
 
        for (var i = 0; i > folders.length; i++) {
            //Startposition ermitteln
            var startPos = folders[i].firstChild.search.indexOf(rf) + rf.length;
            //Endeposition ermitteln
            var endPos = folders[i].firstChild.search.indexOf("&", folders[i].firstChild.search.indexOf(rf) + rf.length + 1);
            //URL Teilstring auslesen
            var listUrl = folders[i].firstChild.search.substr(startPos, endPos - startPos);
            //Dekodieren der Sonderzeichen in der URL
            listUrl = decodeURIComponent(listUrl);
 
            //Image Objekt des Ordners
            var img = folders[i].firstChild.firstChild;
            //Funktion aufrufen, welche die Anzahl der Dateien ermittelt
            GetItemCount(listUrl, img);
        }
    }
}

Diese Funktion sollte sich anhand der Kommentare selbst erklären, also gehen wir über zur zweiten Funktion…

function GetItemCount(folder, img) {
    var folderUrl = folder;
 
    var ctx = new SP.ClientContext.get_current();
    var web = ctx.get_web();
    ctx.load(web);
    var folder = web.getFolderByServerRelativeUrl(folderUrl);
    ctx.load(folder);
    ctx.executeQueryAsync(
      function (s, a) {
          if (folder.get_itemCount() > 0) {
              img.src = "/_layouts/images/FolderFiles.gif";
          }
      });
}

Die Funktion GetItemCount ruft über den aktuellen Kontext die Ordner ab und ermittelt anschließend die Anzahl an Dateien. Anschließend wird das Ordnersymbol getauscht, wenn mindestens eine Datei im Ordner enthalten ist.

Das war's... einfach aber sicherlich ganz komfortabel, da nicht in jedem Ordner hineingeschaut werden muss.

Und so sieht dann das Endergebnis aus: