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