scot@scothillier.net @scothillier studies/searchresult.aspx?q=hillier

SharePoint Saturday Boston

Branding with Both HandsTied Behind Your BackScot Hillierscot@scothillier.net@ScotHillier

Scot Hillier

Scot Hillier

scot@scothillier.net@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 challenges How we got our hands tied

Branding techniques Themes Alternate CSS Display templates JavaScript injection

A complete intranet

Agenda

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.

Branding challenges

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

Branding techniques

Themes

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

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

Remote provisioning with add-in

12

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

User logs in andlaunches add-in

Remote provisioning with add-in

13

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Request Context token

Remote provisioning with add-in

14

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Context Token returned

Remote provisioning with add-in

15

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Context Token returnedand user redirected to add-in

Remote provisioning with add-in

16

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Add-In extracts Refresh Token from Context Token

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

Remote provisioning with add-in

18

End User

Azure ACS/AD

Provider-HostedAdd-In

SharePoint Online

Access Token returned

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

DEMOProvisioning theme with add-in

Alternate CSS

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

Remote provisioning with adal.js

23

End User

Azure Active Directory

Azure Web Site

SharePoint Online

Remote provisioning with adal.js

24

End User

Azure Active Directory

Azure Web Site

SharePoint Online

User accesses application

ADAL JS Librariesloaded and initialized

Remote provisioning with adal.js

25

End User

Azure Active Directory

Azure Web Site

SharePoint Online

User redirected to AADFor sign in and consent

Remote provisioning with adal.js

26

End User

Azure Active Directory

Azure Web Site

SharePoint Online

Access token returnedand cached in web storage

Remote provisioning with adal.js

27

End User

Azure Active Directory

Azure Web Site

SharePoint Online

AJAX call initialized andIntercepted by ADAL JS

Remote provisioning with adal.js

28

End User

Azure Active Directory

Azure Web Site

SharePoint Online

Access token attached and call made

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

DEMOAlternate CSS and logo with adal.js

Display templates

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

Setting display templates with PowerShell

DEMODisplay templates with PowerShell

JavaScript injection

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

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

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>

DEMOJavaScript injection with CDN Manager

A complete intranet

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

Branding challenges How we got our hands tied

Branding techniques Themes Alternate CSS Display templates JavaScript injection

A complete intranet

Summary