SharePoint Kontaktlisten können per Mausklick im Outlook angezeigt werden. Dort kann auch für jeden Kontakt ein Foto hinterlegt und gespeichert werden, jedoch erscheint dieses auf der SharePoint Website überall nur als Attachment ohne Bildvorschau. Dank JS Link bzw. JavaScript kann dies im Browser sehr leicht angezeigt werden. Das Resultat sieht dann so aus:
Resultat mit JS Link in der Listenansicht
Update 12.12.2014
SharePoint hat die Darstellung des Kontaktfotos bereits eingebaut. Dazu muss „aus vorhandenen Websitespalten hinzufügen“ die Spalte „Kontaktfoto“ zur Liste hinzugefügt werden. Dieses ist ein „Link oder Bild“ Feld, in welches automatisch die Bild-URL (des Attachments) eingetragen wird.
Vielen Dank an Uwe für den Hinweis.
Wird im Outlook in einer SharePoint Kontaktliste einem Kontakt ein Foto hinzugefügt, wird das Foto als Item-Attachment mit fixem Dateinamen ContactPicture.jpg gespeichert.
In SharePoint 2013 hat Microsoft das Client Side Rendering eingefügt, womit auf standardisierte Weise das Rendering bzw. die Darstellung jedes Feldes in allen Ansichten und Formularen gesteuert werden kann per JavaScript. Ross Bradbrook hat einen guten Artikel dazu geschrieben in seinem Blog www.rbradbrook.co.uk/sharepoint-2013/introduction-to-client-side-rendering-in-sharepoint-2013/. Es gibt bereits eine kleine Sammlung an Code Beispielen auf der Microsoft Website: http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a.
Dank JS Link muss nun noch bei den gewünschten Web Parts in den Einstellungen der Pfad zur JavaScript Datei eingetragen werden, der Rest geschieht quasi von selbst. Das macht die Anwendung insbesondere für Anwender ohne HTML-Kenntnisse einfacher.
In meinem JS Link muss in der Listenansicht die Attachments-Spalte angezeigt werden, diese wird dann per jQuery wieder ausgeblendet. Diesen Schritt habe ich gewählt, damit nicht bei jedem Kontakt versucht wird ein Bild anzuzeigen, wenn gar kein Attachment vorhanden ist. Deshalb bitte die Attachments-Spalte in den Views einblenden.
Vorgehen zur Initial-Einrichtung inklusive jQuery Integration
- In der Kontakte-Liste eine Platzhalter-Spalte erstellen für das Foto (Spaltenname Photo). Ich empfehle dafür eine berechnete Spalte, da diese in den New- und Edit-Formularen nicht erscheint. Als Formel kann =“ “ eingetragen werden.
- JavaScripts speichern unter ~/SiteAssets/Scripts
jQuery: http://code.jquery.com/jquery-1.11.1.min.js
Contacts.js: http://www.spugs.ch/SPUGSBlog/SiteAssets/Lists/Posts/Contacts.js.txt - jQuery in der Master Page einbinden
<SharePoint:ScriptLink language=“javascript“ name=“~sitecollection/SiteAssets/Scripts/jquery-1.11.1.min.js“ runat=“server“ Localizable=“false“ />
- Auf der Listen-Ansicht die Seite bearbeiten, WebPart bearbeiten und JS Link eintragen
Resultat:
- Gleiches Vorgehen bei der Detail-Ansicht
-
- Standard Listen-Ansicht eines Kontakts in SharePoint 2013
-
- Kontakt im Outlook bearbeiten und Foto speichern
-
- Bitte den Namen Photo wählen, dieser ist im JS Link fix hinterlegt
-
- jQuery und Contacts JavaScript Dateien in /SiteAssets/Scripts/ speichern
-
- jQuery in der MasterPage einbinden
-
- Listenansicht Seite bearbeiten um die Web Part Einstellungen zu öffen
-
- JS Link bei dem Listen-Ansicht Web Part eintragen
-
- Resultat mit JS Link in der Listenansicht
-
- JS Link bei dem Detail-Ansicht Web Part eintragen
Update 4.7.2014
Anstelle er Einbindung in die Master Page funktioniert auch die simplere Einbindung nur über die JS-Link Einstellung: ~sitecollection/SiteAssets/Scripts/jquery-1.11.1.min.js|~sitecollection/SiteAssets/Scripts/Contacts.js
2sicgeeks 
So kompliziert muss es gar nicht sein. Einfach die Websitespalte „Kontaktfoto“ hinzufügen, dann geht das auch schon. Man müsste mit dem CSR dann lediglich noch die maximale Größe anpassen.
Vielen Dank für den Hinweis! Ich habe den Beitrag soeben damit ergänzt.
Funktioniert das auch mit der Foundationversion? Ich sehe nur die Klammer und muss die Bild URl händisch reinkopieren, dann zeigt er das Bild an.
Ja, funktioniert auch mit SharePoint Foundation 2013. Entscheidend ist, dass das Foto über die Kontakte-Verwaltung in Microsoft Outlook hinzugefügt wird.
Als Ergänzung zu Uwe’s Kommentar…
Falls die Bilder zu groß dargestellt werden: Ein Skrip-WebPart einfügen und per CSS die img Größe (width) definieren.
z. B.
img {
width: 80px;
}
Leider funktioniert der Link zum JS-Skript nicht mehr. Könnt Ihr mir das Skript senden?
(http://www.spugs.ch/SPUGSBlog/SiteAssets/Lists/Posts/Contacts.js.txt)
Diese Lösung ist veraltet. Bitte beachte das Update vom 12.12.2014. SharePoint kann das schon standardmässig.