Migrating Full-Trust Solutions to the Cloud Scot

@ScotHillier dies/SearchResult.aspx?q=hillier channel9.msdn.com/Search?t erm=hillier#ch9Search /? s earchTerm=hillier

Apologizing in advance Out with the old…In with the new… Apps for SharePointSharePoint Add-Ins App WebAdd-In Web App PartAdd-In Part SharePoint App ModelSharePoint Add-In Model Apps for OfficeOffice Add-Ins Office App ModelOffice Add-In Model

 Branding  Provisioning  Sandbox Solutions  SharePoint Add-Ins v Office 365 APIs Agenda

The challenges

Branding Techniques

Theming

Setting theme Microsoft.SharePoint.Client.ListItem themeEntry =... web.ApplyTheme(themeEntry["ThemeUrl"] as FieldUrlValue, themeEntry["FontSchemeUrl"] as FieldUrlValue, themeEntry["ImageUrl"] as FieldUrlValue, false); web.MasterUrl = (themeEntry["MasterPageUrl"] as FieldUrlValue); web.Context.ExecuteQuery();

Alternate CSS

Setting alternate CSS and logo $http({ url: " method: "POST", headers: { "accept": "application/json", "contentType": "application/json", "X-RequestDigest": digest, "X-HTTP-Method": "MERGE", "content-length": 84 }, data: { "AlternateCssUrl": " "SiteLogoUrl": " }});

Display Templates

JavaScript injection methods

Script Editor Web Parts

Adding User Custom Actions to a Site executor.executeAsync({ url: + + hostWebUrl + "'", method: "POST", body: JSON.stringify({ 'Sequence': 0, 'Description': 'CDNManager', 'Location': 'ScriptLink', 'ScriptBlock': script }), headers: "content-type": "application/json", "accept": "application/json", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() }, success: function (data) {...}, error: function (err) {...} })

Utilizing JSLink (function () { // Initialize the variables for overrides objects var overrideCtx = {}; overrideCtx.Templates = {}; // Override field data overrideCtx.Templates.Fields = { // PercentComplate = internal name of the % Complete // View = you want to change the field rendering of a view // <dev... = here we define what the output of the field will be. 'PercentComplete': { 'View': '<div class="progress"... ' } }; // Register the override of the field SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })();

JavaScript injection challenges

JavaScript Injection with CDN Manager

Provisioning Techniques  SharePoint Add-In  Office 365 APIs  PowerShell

SharePoint Online Host Web Add-In Web Azure Web Sites CSS png aspx master js New/Existing Sites and Webs

SharePoint Online Azure Web Sites CSS png aspx master js New/Existing Sites and Webs

SharePoint Online PowerShell Client j New/Existing Sites and Webs

PnP Provisioning Engine

Proxy Process Proxy Process (SUCWorkerProcessProxy.exe) Worker Service ( ) (SPUCWorkerProcess.ex e) Host Services () Host Services (SPUCHostService.exe) Untrusted Code Declarative Items: Web Templates Lists and Libraries Site Columns and Content Types File deployment Custom Actions Client Code

Sandboxed Solutions The Good  Customize SharePoint without a farm solution:  Declarative Features (lists, libraries, files, client side code)  User Code (web parts, InfoPath forms, event receivers, workflow actions)  Multi-tenant friendly The Bad and the Ugly  Limited server side API  Provisioned content is brittle  Versioning is a black art  No central way to manage, update  Scalability Problems

What does it all mean?

SharePoint Add-In Challenges

Office 365 API Benefits

Office 365 API capabilities MailContactsCalendar Files Users & groups Discovery Service

Included in Office 365 Subscription Users & Groups managed in Office 365 Portal Changes persisted in Azure AD

Single auth flow for Office 365 Azure AD Graph, Exchange, SharePoint Device apps and web sites Admin and end-user consent Secure protocol OAuth 2.0 No capturing user credentials Fine-grained access scopes Supports MFA and federated user sign-in Long-term access through refresh tokens

Application Types Custom developed Third-party, published in the gallery Office 365 SharePoint, Exchange Dynamics CRM Thousands of others Custom Applications Web Application and/or WebAPI Native Client

Implicit Flow and Angular JS

Implicit Flow with ADAL.JS

References