© Kellie L. Folkerts/Shutterstock.com
Webcamschnappschüsse in SharePoint

Bitte recht freundlich!


„People over Pixels“ – dieser schlaue Facebook-Spruch findet nicht nur Anklang in der Unternehmenskultur des sozialen Netzwerks. Personalisierung ist „in“. Was liegt somit näher, als das Intranet mit Webcambildern persönlicher zu gestalten? Dieser Artikel gibt Einblick in eine mit JavaScript umgesetzte Lösung zur Erweiterung der My Site in SharePoint.

Mit HTML5 bekommen Entwickler viele neue Möglichkeiten, die Netzerfahrung ihrer User zu gestalten. Was die neue Version unter anderem ausmacht, ist die Fülle an Möglichkeiten, die sich über JavaScript bietet. Mussten früher beispielsweise aufwändige Flash-Anwendungen herangezogen werden, um den Benutzer mithilfe seiner Webcam abzulichten, ist das heute über wenige Zeilen JavaScript möglich. Einziger Wermutstropfen: gegenwärtig funktioniert das entsprechende API nicht im Internet Explorer – Fallback-Lösungen sind im Netz aber vorhanden [1].

Um das Beispiel so einfach und gleichzeitig ausbaufähig wie möglich zu halten, legen wir in Visual Studio eine neue SharePoint Farm Solution an. Seit der Version 2010 von Microsofts Entwicklungsumgebung sind hilfreiche Assistenten eingebaut, die das mit wenigen Klicks ermöglichen.

Über das Kontextmenü im Solution Explorer legen wir in unserer neuen Solution nun ein Visual Webpart und ein JavaScript File an (Abb. 1). Bei der Erstellung des ersten Webparts innerhalb einer neuen Solution erstellt Visual Studio gleich ein SharePoint-Feature mit – das neue Webpart will schließlich in SharePoint befördert werden. Achten Sie allerdings darauf, dass Sie dem Feature noch einmal explizit mitteilen, dass es unser Webpart mit auf die Reise nehmen soll. Die Assistenten des Visual Studios sind hier abermals hilfreich. Über Drag and Drop oder Doppelklick kann das Webpart in der Ansicht des Features mit ins Boot geholt werden.

kernstock_webcam_1.png

Abb. 1: Im Solution Explorer werden alle benötigten Projektdateien angelegt

Los geht’s!

Nun ist es an der Zeit, Code zu schreiben. Öffnen Sie die ASCX-Datei Ihres Webparts. In dieser Datei befindet sich sein HTML-Code. Auch ASP-Code müssen Sie hier unterbringen, sollten Sie das Webpart später noch um Funktionalitäten erweitern wollen. Platzieren Sie folgenden Code am Ende der Datei:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script src="/_layouts/15/WebcamWebpart/WebcamWebpart.js?x22936" ></script>

<div id="webcam-webpart">
<video></video>
</div>

Einfacher geht es nicht: jQuery, den Industriestandard zur Arbeit mit dem HTML Object Model, lassen wir uns von Google hosten. Als zweite JavaScript-Datei binden wir unsere WebcamWebpart.js ein. Nun folgt noch ein DIV-Container mit einer ID, um selbigen eindeutig zu identifizieren, und das HTML-Herzstück unseres Webparts: das Videotag. Das war es auch schon mit der ASCX-Datei. Die restliche Arbeit an unserem Webpart findet in der von uns erstellten JavaScript-Datei statt:

jQuery(function ($)
{
// Bitte hier coden.
});

Hier zeigt jQuery bereits, dass die Bibliothek es mit ihrem Motto „Write less, do more“ ernst meint, denn diese paar Zeilen haben es in sich: JavaScript ist eine funktionale Programmiersprache, was bedeutet, dass wir Funktionen innerhalb des Codes behandeln können wie Variablen. C#-Entwickler dürften dieses Konzept als Delegates kennen. Innerhalb der Funktion, die wir jQuery übergeben, haben wir nun folgende zwei Boni: zum einen können wir uns sicher sein, dass der DOM geladen ist, zum anderen, dass die $-Variable in unserer Ummantelung für jQuery steht und für nichts anderes. Denn obwohl man bei der Entwicklung mit jQuery das Nutzen der $-Variable gewohnt ist, haben die Entwickler von jQuery keinerlei Sonderrechte oder dergleichen auf selbige Variable. Es kann durchaus sein, dass es sich eine vollkommen andere Bibliothek ebenfalls nicht nehmen lassen will, über die kurze und prägnante $-Variable angesprochen zu werden. Auf die beschriebene Weise vermeiden Sie hier aber Konflikte – robust soll unser Code schließlich sein.

Achten Sie darauf, alle folgenden JavaScri...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang