Post on 29-Jan-2018
transcript
TUGA IT 2016LISBON, PORTUGAL
THANK YOU TO OUR
SPONSORS
THANK YOU TO OUR
TEAMANDRÉ BATISTA ANDRÉ MELANCIA ANDRÉ VALA ANTÓNIO LOURENÇO BRUNO LOPES CLÁUDIO SILVA
NIKO NEUGEBAUER
RUI REISRICARDO CABRAL
NUNO CANCELO PAULO MATOS PEDRO SIMÕES
SANDRA MORGADO SANDRO PEREIRARUI BASTOS
NUNO ÁRIAS SILVA
Collaboration SharePoint & JavaScript
André Lage
Datalynx AG
Presentation André Lage
• Working as Head of Solutions for Datalynx AG in Switzerland.• Microsoft SharePoint MVP for 7 Years.• Working with SharePoint tecnologies since from SharePoint 2003
to SharePoint 2013/Office 365 for different types of enviroments.• Speaker in different conferences about SharePoint such us,
Techdays in Portugal, Speaker at Netponto in Lisbon/Porto, Community days in Spain, Collaboration Days in Switzerland, ask the expert "SharePoint" in Swiss Techdays, speaker on SharePoint Iberian Conference in Spain and speaker on SharePoint User group in Portugal and now speaker at SharePoint Saturday in Helsinki, Finland.
• Blog: https://aaclage.blogspot.com• Twitter: @aaclage
Presentation André Lage
• SharePoint JSOM/REST
• Office 365
• Integration with other JS Plug-in• Jquery, AngularJS
• JavaScript Object Oriented
• Manage User Custom Actions• Ribbons Management • Minimal Download Strategy and JS support files
• Client Side Rendering (CSR)
• SharePoint-Hosted Apps and App Parts
• Support Tools
Topic 1
Javascript SharePoint Object Model
Javascript SharePoint Object Model
Communicate your SharePoint with Javascript
• Javascript SharePoint Objet Model exists since SharePoint 2010 to communicate between SharePoint Data with Javascript.
• JavaScript object library reference contains information that you can use to build custom sites, farm solutions, and apps for SharePoint. • JSOM in SharePoint 2013 derives the nomenclature from the .NET server programming model
• Async GET/POST operations using Ajax Library
• JSOM Response (REST)• "Accept": "application/json; odata=verbose“• JSON Light (Office365) link
Javascript SharePoint Object Model
SharePoint 2016 .NET Server, CSOM, JSOM, and REST API indexhttp://msdn.microsoft.com/en-us/library/office/dn268594(v=office.15).aspx
JSOM Code Life Cycle
SharePoint 2016 REST Service
REST Operations
REST Operations• $Select, specify which fields to return
• $Top, Select the first n items
• $Skip, Skip the number of item to return
• $Filter, Query option to select which items to return
• $Expand, Display sub objects from Main Object REST call
• $OrderBy, How to sort the items
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
Example
Office 365 and SharePoint
Office 365
Office 365
What you get in Collaboration Sites
• Office 365 and SharePoint Online hate CustomizationsRecomendations:• No change of Masterpages and no changes in Office Menu• No DOM changes in SharePoint Objects Masterpage• Customization Tax (every change have cost)
• Hosted provided and SharePoint App aproach• App Permission level• XML (limitations)
• No ScriptLinks• No Enable option in Ribbon Actions
• Script Injection App – Web App to Host Web (JSOM/REST)
Tuga IT
Office 365
• Follow the PnP Patterns and Pratices
• Office 365 Administration• Option to Disable Scripts
• Living system with improvements in the SharePoint JSOM and REST
• SharePoint Client Object Model to interact with Office 365
• CDN support files
• Site where improvements in Office 365 can be requested• Uservoice https://officespdev.uservoice.com/
What you get in Collaboration Sites
Office 365
Example
Topic 3
SharePoint Javascript Plug-ins
Javascript Plug-in
What you normally get in SharePoint Sites
• Javascript SharePoint Object Model (JSOM)
• Jquery • http://jquery.com/
• AngularJS• https://angularjs.org/
• Breezejs• http://www.breezejs.com/
Jquery Plug-in
Why Jquery
• DOM element
• Multiple enviroments support (Browser, Mobiles)
• REST-friendly
• Highly extensible
• Simple, Clean, powerfull
• Ajax Support
• Widely used Javascript Library
AngularJS Plug-in
AngularJS is a framework
• Two way data binding• MVW pattern (MVC-ish)• Template• REST-friendly• Deep Linking (set up a link for any dynamic page)• Form Validation• Server Communication• Localization• Dependency injection• Full testing environment (both unit, e2e)
Javascript Plug-in
Example
Topic 3
Javascript Object Oriented
Javascript Object Oriented
What you normally get in SharePoint Sites
• Flat code file without structure
• Web Parts with embedded Javascript
• Multiple deploy of same plug-in and different versions in the same Site
• Hard to manage code and indentify existing Code in SharePoint Site
• Low description of the code
• Problem with migrations and changing of Branding
Javascript Object Oriented
Why we should use
• Class, Methodos and Properties
• Encapsulation and Inheritance of code
• Easy to Maintain by developers
• Management of Versions
• More efiencient loading of code by solution/page/Site
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 LoadLoad Dynamic JS file by Jquery
Load Dynamic CSS file
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);}
Load Dynamic JS file by Javascript
Object Orient JS in SharePoint
Load dynamic JS
Company.alert.js
Load dynamic
CSS
Company.alert.css
Object Orient JS in SharePoint
Example
Topic 4
Manage User Custom Actions
Manage User Custom Actions
SP.UserCustomAction object (sp.js)http://msdn.microsoft.com/en-us/library/office/jj245920(v=office.15).aspxUser Custom Actions Resourceshttp://msdn.microsoft.com/en-us/library/office/dn531432(v=office.15).aspx#bk_UserCustomAction
• Deployment of Javascript files by scopes (Site Collection/Web/Lists)
• Management of Ribbons to Custom Solutions
• Powerfull SharePoint Object to Customizate SharePoint Sites
Manage User Custom Actions Scriptlinks
Advantages of Scriptlinks
• Extension of Out of the Box SharePoint Object
• Link between developer and Site Manager
• Respect Policy of company
• No change of Masterpages or support page
• No Webparts in Pages with embedded JS code
• Easy Management of code and fast response to client
• Better Management of Cache/version
• Reduce implementation Time (no Declarative XML)
• Reduce costs with maintenance
Manage User Custom Actions
Manage User Custom Actions Ribbons
Customize Ribbon using Javascript
• Manage Ribbon using JSOM/REST • SP.UserCustomAction object (sp.js)
• Create Ribbons using SharePoint API• sp.ribbon.js
SP.UserCustomAction object (sp.js)http://msdn.microsoft.com/en-us/library/office/jj245920(v=office.15).aspxUser Custom Actions Resourceshttp://msdn.microsoft.com/en-us/library/office/dn531432(v=office.15).aspx#bk_UserCustomAction
Manage Ribbons JSOM/RESTCustomize Ribbon using Javascript
Manage Ribbons APICustomize Ribbon using Javascript• SP.SOD.executeOrDelayUntilScriptLoaded(SP.Ribbon.PageManager.get_instance();……, "sp.ribbon.js");
Manage User Custom Actions
Example
Topic 5
Client-Side Rendering
Client-Side Rendering
• Client-side rendering (CSR) Customize the UI using JavaScript and not Server Code
Client-Side Rendering
Customize form and views in Lists:
Javascript
JSON
HTML
Client-Side Rendering
• OnPreRender: The JavaScript event handler is loaded before the fields are rendered.
• OnPostRender: The JavaScript event handler is loaded after the HTML is rendered.
CSR JSLink and JS Link Properties
Client-Side Rendering
Example
Topic 6
SharePoint-Hosted Apps and App Parts
SharePoint-Hosted Apps and App Parts
SharePoint App Part and Host web
• SharePoint App approach• SharePoint-Hosted base in Javascript• Remove Custom Server Side code on SharePoint Hive
• App Parts are Iframes• Communication with Host Web made by EventListeners and postMessage from Iframe
• Recommend Radars in Host-webs for App Parts• EventListeners break the MDS
SharePoint-Hosted Apps and App Parts
SharePoint-Hosted Apps and App Parts
Example
Support Tools
Tools
• PnP Office 365 Patterns & Practices
• Jquery• http://jquery.com/
• AngularJS• https://angularjs.org/
• Fiddler • http://www.telerik.com/fiddler
• SharePoint 2013 Client Browser• http://spcb.codeplex.com/
• Web Essentials• https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361
• Manage User Custom Actions• PnP example
Q&A
That’s all for now.Thank you!!!!
THANK YOU TO OUR
SPONSORS