5 Kommentare

SharePoint 2013 Kontaktliste mit Fotos erweitern

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

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

  1. 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.
    SharePoint Photo Column
  2. JavaScripts speichern unter ~/SiteAssets/Scripts
    jQuery and Contacts JS
    jQuery: http://code.jquery.com/jquery-1.11.1.min.js
    Contacts.js: http://www.spugs.ch/SPUGSBlog/SiteAssets/Lists/Posts/Contacts.js.txt
  3. jQuery in der Master Page einbinden
    <SharePoint:ScriptLink language=“javascript“ name=“~sitecollection/SiteAssets/Scripts/jquery-1.11.1.min.js“ runat=“server“ Localizable=“false“ />
    Embed jQuery into MasterPage
  4. Auf der Listen-Ansicht die Seite bearbeiten, WebPart bearbeiten und JS Link eintragen
    JS Link - Contacts
    Resultat:
    SharePoint Contacts with Photo
  5. Gleiches Vorgehen bei der Detail-Ansicht
    SharePoint Contact Details Photo

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

Über Benjamin Gemperle

Web Developer bei 2sic Internet Solutions GmbH seit 2006. Entwickelt Software-Lösungen mit Web-Standards und Microsoft-Technologien. Mein Daily Business: SharePoint, DNN, AngularJS, ASP.Net, C#, SQL Server, IIS, InfoPath, Access, Excel, PowerShell sowie gängigen Web-Sprachen HTML, CSS, JavaScript (jQuery, AngularJS), AJAX, XML, XSL/XSLT. Mein Ausgleich: Reisen, Natur, fein Kochen und Essen, Fitness, Biken, Skiing.

5 Kommentare zu “SharePoint 2013 Kontaktliste mit Fotos erweitern

  1. 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.

  2. 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.

  3. 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;
    }

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: