sps helsinki 2015: collaborative sharepoint and javascript
TRANSCRIPT
SharePoint Saturday
Helsinki 2015
14/03/2015
Collaboration SharePoint & JavaScript
SharePoint Saturday Helsinki
Thank you to our sponsors!
Agenda
Topic 1
Javascript SharePoint Object Model
link
Javascript SharePoint Object Model
SharePoint 2013 .NET Server, CSOM, JSOM, and REST API index
http://msdn.microsoft.com/en-us/library/office/dn268594(v=office.15).aspx
JSOM Code Life Cycle
SharePoint 2013 REST Service
REST Operations
App Type Cross-domain data access scenario Example endpoint URI
SharePoint-
hosted
App web component accessing data
in another site collection (tenant-
scoped apps only)
<app web url>/_api/SP.AppContextSite(@target)/web/title?@target='<target site url>'
SharePoint REST/JSOM
Office 365 and SharePoint
Office 365
Customization Tax (every change could have cost)
Office 365
Topic 3
Javascript Plug-in
http://jquery.com/
https://angularjs.org/
http://www.breezejs.com/
Jquery Plug-in
AngularJS Plug-in
Javascript Plug-in
Topic 3
Javascript Object Oriented
Javascript Object Oriented
Structure your Objects in JS
Main [Core]
Company.Core.js
Page Solution
Company.[Pagename].
js
Global Operations
Company.Common.js
Data Manipulation
Company.Data.js
Dynamic Css Page
Company.[Pagename].css
Dynamic load
Company.[Plugin].jsCountry Resources
Company.Resources.[Lang].js
Global Resources
Company.Resources.js
Country Resources
Company.Resources.[Lang].js
Javascript Dynamic File Load
function loadScript(url, callback) {var script = document.createElement("script");script.type = "text/javascript";if (script.readyState) {
script.onreadystatechange = function () {if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null; callback();}
};} else {script.onload = function () { callback();};}script.src = url;document.getElementsByTagName("head")[0].appendChild(script);}
Object Orient JS in SharePoint
Load dynamic JS
Company.alert.js
Load dynamic
CSS
Company.alert.css
Object Orient JS in SharePoint
Topic 4
Manage User Custom Actions
SP.UserCustomAction object (sp.js)
http://msdn.microsoft.com/en-us/library/office/jj245920(v=office.15).aspx
User Custom Actions Resources
http://msdn.microsoft.com/en-us/library/office/dn531432(v=office.15).aspx#bk_UserCustomAction
Manage User Custom Actions Scriptlinks
Manage User Custom Actions
Manage User Custom Actions Ribbons
SP.UserCustomAction object (sp.js)
http://msdn.microsoft.com/en-us/library/office/jj245920(v=office.15).aspx
User Custom Actions Resources
http://msdn.microsoft.com/en-us/library/office/dn531432(v=office.15).aspx#bk_UserCustomAction
Manage Ribbons JSOM/REST
Manage Ribbons API
Manage User Custom Actions
Topic 5
Client-Side Rendering
Client-Side Rendering
Client-Side Rendering
CSR JSLink and JS Link Properties
Client-Side Rendering
Topic 6
SharePoint-Hosted Apps and App Parts
SharePoint-Hosted Apps and App Parts
SharePoint-Hosted Apps and App Parts
Support Tools
http://jquery.com/
https://angularjs.org/
http://www.telerik.com/fiddler
http://spcb.codeplex.com/
SPCAF
https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361
https://store.office.com/processlynx-custom-action-and-ribbon-manager-demo-WA104374259.aspx?assetid=WA104374259
SharePoint Saturday Helsinki
Thank you to our sponsors!