JavaScript in SharePoint and not just for Apps. Wictor Wilén

Transkript

1 JavaScript in SharePoint and not just for Apps Wictor Wilén

2 Wictor Wilén

3 Agenda Varför JavaScript? JavaScript bibliotek SharePoint JS bibliotek JavaScript Client Side Object Model (JSOM/CSOM) REST Client Side Rendering (CSR)/JSLink

4 VARFÖR JAVASCRIPT?

5 Varför använda JavaScript? JavaScript is the Assembly Language for the Web Scott Hanselman Enkelt att lära (!?) Webbläsare och hårdvara mer kapabla nu Ingen Server Side kod! Behöver inte tillgång till servrar Enklare underhåll To the cloud!

6 JavaScript bibiliotek Uppfinn inte hjulet igen! jquery duh! Knockout MVVM Modernizr HTML5 and CSS3 features LESS enklare CSS SPServices - SharePoint

7 JAVASCRIPT IN SHAREPOINT

8 SharePoint JavaScript Mycket odokumenterat Förstå varför det är odokumenterat! UI Features Modal Dialogs Alerts Status Messages Callouts (nytt i 2013) Utility metoder Hämta nuvarande site, användare, spark mm URL encoding (SP.Utilities.HttpUtility.*) Bygga URLer (SP.Utilities.Utility.* & SP.Utilities.UrlBuilder) Script-On-Demand

9 Tjänster som stödjer JavaScript Excel Services API kallat Ewa Läs och beräkna Workbooks, Sheets & Celler Visio Services API kallat Vwa Tillgång till Pages och Shapes Kan lägga till Overlays Zoom och navigering

10 Registrera JavaScripts Undvik registrera alla JavaScripts i master pagen Blir bara en massa extra last Orsakar fler onödiga requests till server/cachen Använd ScriptLink kontrollen och SOD metoderna

11 Script-On-Demand (SOD) JavaScript ramverk för att ladda JavaScripts Tillåter fördröjd laddning av script Lazy loading On Demand Händelser när script laddas och/eller när objekt är redo

12 Använd Script-On-Demand myscript.js Server Side Client Side

13 Callout.js Ny UI funktion i 2013 Title Content Actions Events Click Hover

14

15 CSOM AND REST

16 Client Side Object Model Introducerades i SharePoint 2010.NET, Silverlight och JavaScript implementationer Batched kommandon, optimerat för att reducera bandbredd Innehåll bara Foundation features Igenkänning med Server API Förbättrat i SharePoint 2013 Social Publishing User Profiles Search Taxonomy JavaScript CSOM kallas även JSOM

17 JSOM problem Kopplat till en Site Collection Workaround: Search JSOM eller REST Se upp för Cross Site Scripting (XSS) problem Kan bara användas I SharePoint

18 REST beskrivet i en slide REST = Representational State Transfer Baserat på HTTP GET, PUT, POST, DELETE och MERGE Returnerar OData (XML i AtomPub format) Kan även returnera JSON Notera: POST operationer i SharePoint kräver Form Digest i X-RequestDigest headern REQUESTDIGEST _api/contextinfo

19 SharePoint REST interface Introducerades i SharePoint 2010 /_vti_bin/listdata.svc Enkla list operationer Rekonstruerat för SharePoint 2013 /_api/* Stödjer mer features; Search, Social Kan behöva en OAuth access token Men inte i JavaScript i SharePoint

20 REST operation sample Service URI = Web Resource Path = SharePoint endpoint Query String = filter (ej obligatorisk) HTTP GET JSON svar istället för XML: Accept: application/json;odata=verbose header Kan behöva: Authorization: Bearer XXX header

21 REST and jquery

22

23 SNYGGARE LISTOR OCH VYER

24 Client Side Rendering (CSR) Kallas också JSLink Ersätter Field controller med JavaScript mallar Kan användas på: Site Columns Content Types List Views List Forms Web Parts (XLV) SPClientTemplates registrerar mallar SPClientForms validering

25 The JSLink attribute

26 Minimal Download Strategy (MDS) JavaScript och Server Side ramverk Gör så att endast delta behöver laddas ner Ökar perceived performance Reducerar krävd bandbredd Kan hantera partiell JavaScript updatering och registrering Intressanta URLer /_layouts/15/start.aspx#/default.aspx

27 Problem med MDS Ett enda litet JavaScript fel gör så att MDS inte fungerar Kan orsaka att sida laddas två gånger Dålig prestanda JavaScript måste registreras och laddas korrekt Använd Script-On-Demand Använd RegisterModuleInit() metoden Gör er inte beroende av jquery document.ready() Glöm inte MDSClient attributet För server side kod!

28

29 Display Templates Nytt sätt att visa tex Sök resultat Ersätter XSLT rendering XSLT is fallback HTML snuttar med JavaScript och lite speciella taggar.html konverteras till.js filer

30 Sammanfattning JavaScript är nu i högsta grad ett intressant programmeringsspråk för SharePoint Kan användas för applikationslogik Bör användas för UI anpassningar Är mer eller mindre ett krav för alla SharePoint utvecklare

31