Manchmal ist die Standard-Darstellung von SharePoint einfach nicht passend. Anstatt umständlich mit XML und XSL das Aussehen zu beeinflussen kann dieses in SharePoint 2013 mit JavaScript und Client-Side-Rendering angepasst werden. Damit lassen sich sowohl Listen als auch Formulare und die Darstellung von Suchergebnissen anpassen.

1. Client Side Rendering
Henning Eiben, busitec GmbH
ShareConf – 09.06.2015

2. Referent
Henning Eiben
Henning
Eiben
@nyn3x
blog.busitec.de
sharepoint-rhein-ruhr.de
eiben@busitec.de
Berufung:
➜ Geschäftsführer
➜ Leitender Consultant/ Entwickler/ IT-Pro
➜ Familienvater
Erfahrungen:
➜ Seit 10 Jahren Web Entwicklung
➜ Seit 8 Jahren SharePoint Entwicklung
Kontakt:

3. Sie möchten… eine schlanke
IT-Umgebung
keine
Insellösungen
wenig Individual-
entwicklung
Wir
auch!
Daher ist unser Motto:
So viel Standard wie möglich
und so viel Individualität wie
nötig.

4. ➜ Typische Frage: „kann negative Zahlen in einer Liste nicht rot darstellen?“
➜ Antwort: „es kommt darauf an“
 MOSS 2007: CAML
 SharePoint 2010: XSL
 SharePoint 2013: Javascript
Client Side Rendering
Customizing SharePoint

5. ➜ Schwer verständlich 
➜ Kein Tooling 
➜ Nicht ad-hoc 
➜ Server Deployment 
Client Side Rendering
CAML

6. Client Side Rendering
XSL
➜ Benötigt SharePoint Designer  & 
➜ Kann ad-hoc passieren 
➜ Kein Deployment 
➜ Reduzierter Funktionsumfang 
➜ Schwer zu Debuggen 

7. ➜ Beliebiger Editor 
➜ Viele Werkzeuge 
➜ Ausführung erfolgt auf dem Client 
Client Side Rendering
Javascript

8. Client Side Rendering
Ausprägungen
 Felder
 Listen / Ansichten
 Formulare
 Content Search WebPart
 Suchergebnisse
 Vorschau
JSLink Display Template

9. ➜ Anpassung
➜ Template beschreiben
➜ Names des Feldes
➜ DisplayMode
➜ Registrieren des Templates
➜ Einbinden des Scripts
Vorgehen
Feldanpassungen

10. Live-Demo
Listen-Felder

11. Möglichkeiten
Anpassungen
 Field
 DisplayMode
 ListTemplateType
 BaseViewID
 Header
 Body
 Item
 Field
 Footer
 OnPreRender
 OnPostRender
Bereiche Ereignisse Bindung

12. Live-Demo
Listen / Ansichten

13. ➜ Verantwortung Daten zu verarbeiten
➜ Formular-Ereignissen
➜ Registrieren von Event-Handlern
Notwendigkeiten
Formular-Bearbeitung

14. Live-Demo
Formular-Felder

15. ➜ Minimal Download Strategie (MDS)
➜ Namespaces
➜ Paging
➜ Tokens für JSLink
Das sollten Sie bedenken

16. Live-Demo
Noch was …

17. ➜ MSDN
➜ Client-side rendering (JS Link) code samples
➜ https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
➜ Chris O‘Brien
➜ Using JSLink to change the UI of a SharePoint list/view
➜ http://www.sharepointnutsandbolts.com/2013/01/using-jslink-to-change-ui-of-sharepoint_20.html
➜ Demo-Code
➜ https://github.com/henningeiben/presentations/tree/master/2015-ShareConf
…
Client Side Rendering
Referenzen

18. if (you === "interested")
{
stay_in_contact();
}
@nyn3x
blog.busitec.de
sharepoint-rhein-ruhr.de
eiben@busitec.de
Präsentation auf slideshare
http://delicious.com/eiben/shareconf_csr

19. Backup

20. Client Side Rendering
Demo 1a

21. Client Side Rendering
Demo 1a

22. Client Side Rendering
Demo 1a

23. Client Side Rendering
Demo 1a

24. Client Side Rendering
Demo 1b

25. Client Side Rendering
Demo 1b

26. Client Side Rendering
Demo 2a

27. Client Side Rendering
Demo 2b

28. Client Side Rendering
Demo 2b

29. Client Side Rendering
Demo 3

30. Client Side Rendering
Demo 3

31. Client Side Rendering
Demo 3