This presentation will be showcasing a number of patterns from the Office365 Developer Patterns and Practices resources developed by Microsoft and hosted on GitHub (https://github.com/OfficeDev/PnP). To brand a SharePoint site you have a lot of options, but for SharePoint Online these options are limited, part of the limitation is by design but other limitations are just recommendations and best practices. In this session Osama will list the latest Office365 Developer Patterns and Practices and demonstrate how to brand your SharePoint site with some solutions like responsive pages, security trimmed cross site collection navigation and breadcrumb just by using SharePoint Hosted Apps.

1. Branding SharePoint Online
Atlanta SharePoint User Group - April 20, 2015
Osama Mourad
Senior Software Engineer
Atlanta SharePoint User Group - April 20th 2015

2. Office 365 /
SharePoint
Implementations * Upgrades
Hybrid * Portals
Workflows * Search
Data Analytics
Visualization * Warehouse
Big Data * SQL Server
Tableau
Cloud Enterprise
Transformation
Hybrid * Platform Services
Mobile * Security
Application Integration
Digital
Marketing
Internet Sites * CMS
eCommerce * Sitecore
Transform your business with RDA!
rdacorp.com | 888 441-1278 | marketing@rdacorp.com

3. © 2015 RDA Corporation. All rights reserved.
Osama Mourad
 Senior Software Engineer with RDA Corporation
 Over 14 years of experience with Microsoft
technologies, with a special emphasis on ASP.NET
and SharePoint
 Worked in the Middle East and Gulf regions as well
as the United States
twitter.com/omourad | omourad.blogspot.com

4. © 2015 RDA Corporation. All rights reserved.
Agenda
 Office 365 Developer Patterns and Practices
 Transform SharePoint Customizations to SharePoint
App Model
 To brand or not to brand
 Careful JavaScript Injection
 CDN Manager
 Navigation options for SharePoint Online

5. © 2015 RDA Corporation. All rights reserved.
 Formed in 2013 by a group of Microsoft
consultants then extended to community
contributions
 Many valuable assets shared publicly on
GitHub.com
 Samples, videos and guidance
documentation
 Monthly Community call – second Tuesday
from 11:00 AM to 12:00 PM
aka.ms/OfficeDevPnPYammer
aka.ms/OfficeDevPnPMSDN
aka.ms/OfficeDevPnPVideos
aka.ms/OfficeDevPnPTraining
aka.ms/OfficeDevPnP

6. © 2015 RDA Corporation. All rights reserved.
PnP Model
* Source: PnP Community Call - 2015 March.pptx

7. © 2015 RDA Corporation. All rights reserved.
“You do not brand Outlook or Word,
why do you need to do branding on
collaboration sites?”
Applying branding is absolutely supported and
understandable for intranet portals, but what
about collaboration sites? It is recommended to
consider the cost versus gain
Good question…
* Source: MVA - Transform SharePoint Customizations to SharePoint App Model

8. © 2015 RDA Corporation. All rights reserved.
Transform SharePoint Customizations to
SharePoint App Model
• Avoid custom master
pages
• Use Office 365 themes if
possible
• Consider using Alternate
CSS
• Themes as viable option
to control color and fonts
http://tinyurl.com/l45u86c

9. © 2015 RDA Corporation. All rights reserved.
Custom Master Page
• Full control on how
the site is rendered
• Applied to each site,
except for publishing
sites
• Any updates to oob
master pages are not
automatically reflected
on the sites
Alternate CSS
• Can be used to
override whatever CSS
settings
• Control to color, fonts
and even layout
settings
• Configuration applied
to each site
Theme
• Can be used to control
branding, fonts and
background image of
the sites
• Configuration applied
to each site
Options
Flexibility
Cost
impact
(short and
long term)
Support
Branding options for SharePoint sites
Unlimited Good Average Fair
Office 365 Themes
• Can be used to
centrally control
branding cross all
services in the Office
365
• Limited settings
currently
• Can be overridden in
site level
• Only in Office 365, not
in on-premises
* Source: MVA - Transform SharePoint Customizations to SharePoint App Model

10. Demo
Branding options for SharePoint sites

11. © 2015 RDA Corporation. All rights reserved.
To brand or not to brand?
 A need or a nice to have?
 Collaboration or Publishing sites?
 How many sites do you have?
 Can you just use themes?
 Can it be done with Alternate CSS
 Just few JavaScript can help?

12. © 2015 RDA Corporation. All rights reserved.
Careful JavaScript Injection

13. © 2015 RDA Corporation. All rights reserved.
Careful JavaScript Injection

14. © 2015 RDA Corporation. All rights reserved.
CDN Manager

15. Demo
JavaScript Injection

16. © 2015 RDA Corporation. All rights reserved.
Navigation options for SharePoint Online
Structural navigation Managed navigation Search-driven navigation
Pros:
• Easy to configure
• Security-trimmed
• Automatically updates as sites are added
Pros:
• Easy to maintain
• Performs well even with complex navigation
Pros:
• Security-trimmed
• Automatically updates as sites are added
• Fast loading time and locally cached
navigation structure
Cons:
• Can perform poorly with complex site
structure
Cons:
• Not security-trimmed
• Not automatically updated to reflect site
structure
Cons:
• No ability to easily order sites
• Requires customization of the master page
(technical skills required)
* Source: https://msdn.microsoft.com/en-us/library/dn850367.aspx

17. © 2015 RDA Corporation. All rights reserved.
Managed security-trimmed navigation
 Read ordered data from the Term Store – managed
metadata
 Get the nodes security-trimmed by search
 Locally cache trimmed navigation structure for fast
loading
 Inject the navigation to the page – no master page
customization

18. Demo
Managed Security-trimmed navigation

19. Questions?