Client Side Rendering

Henning Eiben, busitec GmbH

ShareConf – 09.06.2015

Referent

Henning Eiben

Henning

Eiben

@nyn3x

blog.busitec.desharepoint-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:

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.

➜ 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

➜ Schwer verständlich

➜ Kein Tooling

➜ Nicht ad-hoc

➜ Server Deployment

Client Side Rendering

CAML

Client Side Rendering

XSL

➜ Benötigt SharePoint Designer &

➜ Kann ad-hoc passieren

➜ Kein Deployment

➜ Reduzierter Funktionsumfang

➜ Schwer zu Debuggen

➜ Beliebiger Editor

➜ Viele Werkzeuge

➜ Ausführung erfolgt auf dem Client

Client Side Rendering

Javascript

Client Side Rendering

Ausprägungen

Felder

Listen / Ansichten

Formulare

Content Search WebPart

Suchergebnisse

Vorschau

JSLink Display Template

➜ Anpassung

➜ Template beschreiben

➜ Names des Feldes ➜ DisplayMode

➜ Registrieren des Templates

➜ Einbinden des Scripts

Vorgehen

Feldanpassungen

Live-DemoListen-Felder

Möglichkeiten

Anpassungen

Field

DisplayMode

ListTemplateType

BaseViewID

Header

Body

Item

Field

Footer

OnPreRender

OnPostRender

Bereiche Ereignisse Bindung

Live-DemoListen / Ansichten

➜ Verantwortung Daten zu verarbeiten

➜ Formular-Ereignissen

➜ Registrieren von Event-Handlern

Notwendigkeiten

Formular-Bearbeitung

Live-DemoFormular-Felder

➜ Minimal Download Strategie (MDS)

➜ Namespaces

➜ Paging

➜ Tokens für JSLink

Das sollten Sie bedenken

Live-DemoNoch was …

➜ 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

if (you === "interested"){

stay_in_contact();}

@nyn3x

blog.busitec.desharepoint-rhein-ruhr.de

eiben@busitec.de

Präsentation auf slideshare

http://delicious.com/eiben/shareconf_csr

Backup

Client Side Rendering

Demo 1a

Client Side Rendering

Demo 1a

Client Side RenderingDemo 1a

Client Side Rendering

Demo 1a

Client Side Rendering

Demo 1b

Client Side Rendering

Demo 1b

Client Side Rendering

Demo 2a

Client Side Rendering

Demo 2b

Client Side Rendering

Demo 2b

Client Side Rendering

Demo 3

Client Side Rendering

Demo 3

Client Side Rendering

Demo 3