Migrating Full-Trust Solutions to the Cloud Scot Hillier [email protected] @ScotHillier.

Migrating Full-Trust Solutionsto the Cloud

Scot [email protected]

@ScotHillier

Scot Hillier

[email protected]@ScotHillier

www.itunity.com/users/scot-hillier

www.criticalpathtraining.com

www.microsoftvirtualacademy.com/Studies/SearchResult.aspx?q=hillier

channel9.msdn.com/Search?term=hillier#ch9Search

www.pluralsight.com/search/?searchTerm=hillier

Apologizing in advance

Out with the old… In with the new…

Apps for SharePoint SharePoint Add-Ins

App Web Add-In Web

App Part Add-In Part

SharePoint App Model SharePoint Add-In Model

Apps for Office Office Add-Ins

Office App Model Office Add-In Model

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

Agenda

Branding

The challengesEmerging bias against branding collaboration sitesDo you brand Word? Office 365 as suite-level experience.

Avoiding custom master pagesMicrosoft will modify functionality without notice

SharePoint online public sites discontinuedExisting public sites expire in 2017. New customers don’t get the capability

Branding TechniquesThemesCustom colors and fonts

Alternate CSSOverride colors fonts and layouts

Display TemplatesSearch results

JavaScript InjectionJSLinkUser custom actionsScript web parts

ThemingOffice 365 themesBrand the entire suite

Site themesOut-of-the-box themes

Create custom themeSharePoint Color Palette Toolhttps://www.microsoft.com/en-us/download/details.aspx?id=38182

Setting themeMicrosoft.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 CSSUsed to override OOB CSS settingsControl to color, fonts and even layout settings Configuration applied to each siteUtilize the new CSOM capabilities to set

Setting alternate CSS and logo

$http({ url: "https://spsboston/_api/web",     method: "POST",     headers: {         "accept": "application/json",         "contentType": "application/json",         "X-RequestDigest": digest,         "X-HTTP-Method": "MERGE",         "content-length": 84     },     data: {         "AlternateCssUrl": "https://spsboston/SiteAssets/contoso.css",         "SiteLogoUrl": "https://spsboston/SiteAssets/pnp.png"     }});

Display TemplatesAllow search results display to be changedOOB support in CBS, refinement, and search resultsCreate custom display templates for branding

JavaScript injection methodsScript editor web partSimply drop on page and add script

Scripting user custom actionInject script into the site as a user custom action

JSLinkAssociate JavaScript to modify a site, list, or field

Script Editor Web Parts

Adding User Custom Actions to a Siteexecutor.executeAsync({     url: "../_api/SP.AppContextSite(@target)/web/usercustomactions" +          "?@target='" + 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 challengesMultiple references to JavaScript librariesEach developers making their own references

References to different versions of the same libraryOld references are never updated

JSLink references with multiple web partsAffects all list of the same template type

Demo

JavaScript Injection with CDN Manager

Provisioning

Provisioning Techniques

SharePoint Add-In Office 365 APIs PowerShell

Provisioning with an Add-In

SharePoint Online

Host Web

Add-In Web

Azure Web Sites

CSS

png

aspx

master

js

New/Existing Sites and Webs

Provisioning with Office 365 APIs

SharePoint OnlineAzure Web Sites

CSS

png

aspx

master

js

New/Existing Sites and Webs

Provisioning with PowerShell

SharePoint OnlinePowerShell Client

j

New/Existing Sites and Webs

PnP Provisioning EngineSupports the extraction of sites into a template fileSupports applying the template to new sitesPowerShell cmdletsConnect-SPOnlineGet-SPOProvisioningTemplate –Out filename.xmlApply-SPOProvisioningTemplate –Web https://company.sharepoint.com –Path filename.xml

NuGet packagesOfficeDev PnP CoreOfficeDev PnP Core V15

Demo

PnP Provisioning Engine

Sandbox Solutions

What are Sandboxed Solutions?

Site Collection Solutions Gallery

Proxy Process(SUCWorkerProcessProxy.exe)

Worker Service

(SPUCWorkerProcess.exe)

Full Object Model

Host Services (SPUCHostService.exe)

Subset Object Model

Untrusted Code

User CodeService

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

While they still work for the time being, it’s best to

Avoid all use of Sandboxed Solutions

What does it all mean?The future of Sandboxed Solutions is in doubtProbably worse than “in doubt”

User code is deprecated and may be removed at any timeNo support for programmatic elements

Avoiding declarative CAML elementsUpdates are difficult and inconsistent. Orphans sometimes left behind.

Consider other approaches

Add-Ins v Office 365 APIs

SharePoint Add-In ChallengesTightly coupled to SharePointAdd-Ins need to be installed to a SharePoint site for app authentication

Global rollout of an app is problematicTenant-scoped installs appropriate sometimes, but not always..

User experience is constrainedUser must access from SharePoint

Little support for native device apps

Office 365 API BenefitsTruly standaloneGlobally accessible within Office 365App Launcher and My Apps page

Integrated with Office 365 authenticationSSO with Azure AD

Open ArchitectureDevelop with .NET, JavaScript, iOS, Android libraries – or use the REST API

Office 365 API capabilities

Mail Contacts Calendar

Files Users & groups

Discovery Service

Included in Office 365 Subscription

Users & Groups managed in Office 365 PortalChanges persisted in Azure AD

Azure Active Directory (Azure AD)

Single auth flow for Office 365Azure AD Graph, Exchange, SharePointDevice apps and web sitesAdmin and end-user consent

Secure protocolOAuth 2.0No capturing user credentialsFine-grained access scopesSupports MFA and federated user sign-inLong-term access through refresh tokens

Azure AD OAuth in Office 365

37

Application TypesCustom developedThird-party, published in the gallery

Office 365 SharePoint, ExchangeDynamics CRMThousands of others

Custom ApplicationsWeb Application and/or WebAPI Native Client

Application Registration

38

Connected Services in Visual Studio

Implicit Flow and Angular JSADAL.JS, ADAL-ANGULAR.JSSpecifically designed to work with Angular applications

Implicit FlowAppropriate for JavaScript apps that cannot defend a Client SecretMust explicitly enable explicit flow in the Azure manifest

Demo

Implicit Flow with ADAL.JS

ReferencesOffice Dev Centerhttp://dev.office.com/

Patterns and Practices Sampleshttps://github.com/OfficeDev/PnP/tree/master/Samples

Articles on IT Unityhttp://www.itunity.com/users/scot-hillier

CDN Managerhttps://github.com/OfficeDev/PnP/tree/master/Solutions/Core.CDNManager

SharePoint Color Palette Toolhttps://www.microsoft.com/en-us/download/details.aspx?id=38182

PnP PowerShell Cmdletshttps://github.com/OfficeDev/PnP/tree/master/Binaries/PowerShell.Commands