SharePoint Saturday Boston
Branding with Both HandsTied Behind Your BackScot [email protected]@ScotHillier
Scot Hillier
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 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