JavaScript in SharePoint and not just for Apps Wictor Wilén
Wictor Wilén
Agenda Varför JavaScript? JavaScript bibliotek SharePoint JS bibliotek JavaScript Client Side Object Model (JSOM/CSOM) REST Client Side Rendering (CSR)/JSLink
VARFÖR JAVASCRIPT?
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!
JavaScript bibiliotek Uppfinn inte hjulet igen! jquery duh! Knockout MVVM Modernizr HTML5 and CSS3 features LESS enklare CSS SPServices - SharePoint 2007-2013
JAVASCRIPT IN SHAREPOINT
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
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
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
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
Använd Script-On-Demand myscript.js Server Side Client Side
Callout.js Ny UI funktion i 2013 Title Content Actions Events Click Hover
CSOM AND REST
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
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
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
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
REST operation sample http://server/_api/web/lists/documents?$filter=title 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
REST and jquery
SNYGGARE LISTOR OCH VYER
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
The JSLink attribute
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
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!
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
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
Tack! @wictor www.wictorwilen.se wictor@wictorwilen.se