Client Side Rendering im SharePoint 2013
-
Upload
henning-eiben -
Category
Documents
-
view
146 -
download
1
Transcript of Client Side Rendering im SharePoint 2013
![Page 1: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/1.jpg)
Client Side Rendering
Henning Eiben, busitec GmbH
ShareConf – 09.06.2015
![Page 2: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/2.jpg)
Referent
Henning Eiben
Henning
Eiben
@nyn3x
blog.busitec.desharepoint-rhein-ruhr.de
Berufung:
➜ Geschäftsführer
➜ Leitender Consultant/ Entwickler/ IT-Pro
➜ Familienvater
Erfahrungen:
➜ Seit 10 Jahren Web Entwicklung
➜ Seit 8 Jahren SharePoint Entwicklung
Kontakt:
![Page 3: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/3.jpg)
Sie möchten… eine schlankeIT-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.
![Page 4: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/4.jpg)
➜ 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
![Page 5: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/5.jpg)
➜ Schwer verständlich
➜ Kein Tooling
➜ Nicht ad-hoc
➜ Server Deployment
Client Side Rendering
CAML
![Page 6: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/6.jpg)
Client Side Rendering
XSL
➜ Benötigt SharePoint Designer &
➜ Kann ad-hoc passieren
➜ Kein Deployment
➜ Reduzierter Funktionsumfang
➜ Schwer zu Debuggen
![Page 7: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/7.jpg)
➜ Beliebiger Editor
➜ Viele Werkzeuge
➜ Ausführung erfolgt auf dem Client
Client Side Rendering
Javascript
![Page 8: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/8.jpg)
Client Side Rendering
Ausprägungen
Felder
Listen / Ansichten
Formulare
Content Search WebPart
Suchergebnisse
Vorschau
JSLink Display Template
![Page 9: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/9.jpg)
➜ Anpassung
➜ Template beschreiben
➜ Names des Feldes ➜ DisplayMode
➜ Registrieren des Templates
➜ Einbinden des Scripts
Vorgehen
Feldanpassungen
![Page 10: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/10.jpg)
Live-DemoListen-Felder
![Page 11: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/11.jpg)
Möglichkeiten
Anpassungen
Field
DisplayMode
ListTemplateType
BaseViewID
Header
Body
Item
Field
Footer
OnPreRender
OnPostRender
Bereiche Ereignisse Bindung
![Page 12: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/12.jpg)
Live-DemoListen / Ansichten
![Page 13: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/13.jpg)
➜ Verantwortung Daten zu verarbeiten
➜ Formular-Ereignissen
➜ Registrieren von Event-Handlern
Notwendigkeiten
Formular-Bearbeitung
![Page 14: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/14.jpg)
Live-DemoFormular-Felder
![Page 15: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/15.jpg)
➜ Minimal Download Strategie (MDS)
➜ Namespaces
➜ Paging
➜ Tokens für JSLink
Das sollten Sie bedenken
![Page 16: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/16.jpg)
Live-DemoNoch was …
![Page 17: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/17.jpg)
➜ 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.ht
ml
➜ Demo-Code
➜ https://github.com/henningeiben/presentations/tree/master/2015-ShareConf
…
Client Side Rendering
Referenzen
![Page 18: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/18.jpg)
if (you === "interested"){
stay_in_contact();}
@nyn3x
blog.busitec.desharepoint-rhein-ruhr.de
Präsentation auf slideshare
http://delicious.com/eiben/shareconf_csr
![Page 19: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/19.jpg)
Backup
![Page 20: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/20.jpg)
Client Side Rendering
Demo 1a
![Page 21: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/21.jpg)
Client Side Rendering
Demo 1a
![Page 22: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/22.jpg)
Client Side RenderingDemo 1a
![Page 23: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/23.jpg)
Client Side Rendering
Demo 1a
![Page 24: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/24.jpg)
Client Side Rendering
Demo 1b
![Page 25: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/25.jpg)
Client Side Rendering
Demo 1b
![Page 26: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/26.jpg)
Client Side Rendering
Demo 2a
![Page 27: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/27.jpg)
Client Side Rendering
Demo 2b
![Page 28: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/28.jpg)
Client Side Rendering
Demo 2b
![Page 29: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/29.jpg)
Client Side Rendering
Demo 3
![Page 30: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/30.jpg)
Client Side Rendering
Demo 3
![Page 31: Client Side Rendering im SharePoint 2013](https://reader034.fdocuments.net/reader034/viewer/2022052401/55cb2ee8bb61eb93248b462b/html5/thumbnails/31.jpg)
Client Side Rendering
Demo 3