42
SharePoint Saturday Boston Branding with Both Hands Tied Behind Your Back Scot Hillier [email protected] @ScotHillier

[email protected] @ScotHillier Studies/SearchResult.aspx?q=hillier

Embed Size (px)

Citation preview

Page 1: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

SharePoint Saturday Boston

Branding with Both HandsTied Behind Your BackScot [email protected]@ScotHillier

Page 3: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=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

Page 4: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Branding challenges How we got our hands tied

Branding techniques Themes Alternate CSS Display templates JavaScript injection

A complete intranet

Agenda

Page 5: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

What is branding? It’s more than fonts and colors. Branding is a form of organizational communication that extends to the entire look and feel of the UX.

Page 6: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Branding challenges

Page 7: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

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

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

Avoiding sandbox solutionsOnly supported with declarative elements, so same orphan problem.

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

Page 8: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Branding techniques

Page 9: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Themes

Page 10: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

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

Apply themes to many sites with remote provisioning

Page 11: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

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();

Page 12: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with add-in

12

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

User logs in andlaunches add-in

Page 13: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with add-in

13

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Request Context token

Page 14: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with add-in

14

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Context Token returned

Page 15: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with add-in

15

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Context Token returnedand user redirected to add-in

Page 16: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with add-in

16

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Add-In extracts Refresh Token from Context Token

Page 17: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with add-in

17

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Add-In requests add-in-onlyAccess Token

using refresh Token

Page 18: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with add-in

18

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Access Token returned

Page 19: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with add-in

19

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Access Token presentedAlong with request to

set new theme

Page 20: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

DEMOProvisioning theme with add-in

Page 21: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Alternate CSS

Page 22: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

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

Page 23: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with adal.js

23

End User

Azure Active Directory

Azure Web Site

SharePoint Online

Page 24: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with adal.js

24

End User

Azure Active Directory

Azure Web Site

SharePoint Online

User accesses application

ADAL JS Librariesloaded and initialized

Page 25: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with adal.js

25

End User

Azure Active Directory

Azure Web Site

SharePoint Online

User redirected to AADFor sign in and consent

Page 26: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with adal.js

26

End User

Azure Active Directory

Azure Web Site

SharePoint Online

Access token returnedand cached in web storage

Page 27: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with adal.js

27

End User

Azure Active Directory

Azure Web Site

SharePoint Online

AJAX call initialized andIntercepted by ADAL JS

Page 28: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Remote provisioning with adal.js

28

End User

Azure Active Directory

Azure Web Site

SharePoint Online

Access token attached and call made

Page 29: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Setting alternate CSS and logo with adal.js

$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"     }});

Page 30: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

DEMOAlternate CSS and logo with adal.js

Page 31: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Display templates

Page 32: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

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

Page 33: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Setting display templates with PowerShell

Page 34: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

DEMODisplay templates with PowerShell

Page 35: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

JavaScript injection

Page 36: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

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

Page 37: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

JavaScript injection challengesMultiple references to JavaScript librariesEach developers making their own references

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

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

Page 38: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Script injection with CDN Manager

<div>     <div data-bind='text: firstName'></div>     <div data-bind='text: lastName'></div> </div> <script>   CDNManager.getScript(['jquery-1.11.2.min.js','knockout-2.2.1.js'],function() {     var viewModel = {     'firstName': ko.observable('Scot'),     'lastName': ko.observable('Hillier')     };     ko.applyBindings(viewModel);   }); </script>

Page 39: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

DEMOJavaScript injection with CDN Manager

Page 40: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

A complete intranet

Page 41: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

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

Page 42: scot@scothillier.net @ScotHillier    Studies/SearchResult.aspx?q=hillier

Branding challenges How we got our hands tied

Branding techniques Themes Alternate CSS Display templates JavaScript injection

A complete intranet

Summary