Presented by David Feldman and D'arce Hess at SPTechCon Austin, TX, February 2016

1. Your Intranet, Your Way
By: Dave Feldman and D’arce Hess

2. Custom
Master Pages
Agenda
Introduction Challenges Themes
Display TemplatesAngular.js Alternate CSS
Client-Side
Rendering
Questions

3. Custom
Master Pages
Introduction

4. Custom
Master Pages
David Feldman
@bostonmusicdave
https://www.linkedin.com/in/bostonmusicdaveboston
musicdave@gmail.com

5. Custom
Master Pages
D’arce Hess
@darcehess
https://www.linkedin.com/in/darcehess
Darce.Hess@avepoint.com

6. Custom
Master Pages
Custom
Master Pages
Farm Solutions
Master Pages
Custom .NET
Web Parts
Custom .NET
Application Pages
Traditional SharePoint Customization ApproachesMany of the traditional approaches are unavailable or not recommended for Office 365.

7. Custom
Master Pages
Different Approaches for cloud or onprem
Client Side
Avoid
Master Pages
New
Extensibility
Capabilities
Single Page
Applications

8. Custom
Master Pages
SharePoint Customization Continuum
Configure
Configure Customize Extend Custom
Theming
• O365
• SharePoint
Office 365 Logo
Custom Tiles in the App Launcher
Web Parts on Page
Authored Content

9. Custom
Master Pages
SharePoint Customization Continuum
Customize
Configure Customize Extend Custom
• Custom SharePoint Theme
• Alternate CSS
• Custom Page Layouts
• JSLink Client-side Rendering
• Display Templates

10. Custom
Master Pages
SharePoint Customization Continuum
Extend
Configure Customize Extend Custom
JavaScript Embedding (Injection)

11. Custom
Master Pages
SharePoint Customization Continuum
Custom Experiences
Configure Customize Extend Custom
Full Page Experiences

12. Themes

13. Custom
Master Pages
Configure Customize Extend Custom
You can:
• change the color of the Suite bar
• Add a logo in center of the Suite Bar
• Add a background image
• Change color of App Launcher icon
Functionality is available through the Central
Admin tile in the App Launcher menu.
The theme cannot be uninstalled once applied.
If a SharePoint theme is applied, it will overwrite
the tenant theme.
Office 365 Themes
O365 Themes are used to brand the Suite of O365 applications.

14. Custom
Master Pages
Configure Customize Extend Custom
SharePoint comes with several
Themes/Composed Looks OOTB. You can
create your own custom Theme using the
SharePoint Color Palette Tool.
Consist of the following:
• Master Page
• .spcolor file
• .spfont file
• Background Image
SharePoint Themes
Primary way to brand Collaboration Sites in SharePoint.

15. Custom
Master Pages
Configure Customize Extend Custom
The SharePoint Color Palette Tool allows for
an interface to create the .spcolor file that
is a part of the composed look in
Sharepoint.
SharePoint Color Palette Tool:
https://www.microsoft.com/en-
us/download/details.aspx?id=38182
SharePoint Color Palette Tool
Easily customize .spcolor files

16. Custom
Master Pages
Configure Customize Extend Custom
Alternate CSS
Alternate CSS allows for additional customization without the need for
customizing the Master Page. Some of the items Alternate CSS can be used
for:
• Responsive Web Design (RWD)
• Additional Color Changes un the UI
• Additional Font and Font Size Changes
• Styling of Custom Page Layouts
Added in through the Master Page Site Settings vs Registration in the
Master Page. Only one field, so multiple Style Sheets may need to be
@import into the one file.

17. Custom
Master Pages
Configure Customize Extend Custom
Custom Page Layouts
Custom Page Layouts are available in both on prem and O365
versions of SharePoint. The styling for the look and feel for the layouts
is complete using Alternate CSS.
Page Layouts can be associated with a Content Type for additional
functionality.
Custom Page Layouts are available to be used in tenants where
Publishing features have been activated. They are not able to be used
in Collaboration Sites such as Team Sites

18. Custom
Master Pages
Configure Customize Extend Custom
Custom Page Layout
Code Sample

19. Custom
Master Pages
Configure Customize Extend Custom
Fields Edit Forms Validation List Views
http://dev.office.com/patterns-and-practices-detail/1851
JSLink Client Side Rendering
Control the rendering of SharePoint data with JavaScript

20. Custom
Master Pages
Configure Customize Extend Custom
JSLink Client Side Rendering
Real world examples: Custom News List

21. Custom
Master Pages
Configure Customize Extend Custom
JSLink Client Side Rendering
Real world examples: Upcoming Events Calendar

22. Custom
Master Pages
Configure Customize Extend Custom
JSLink Client Side Rendering
Real world examples: Custom Links

23. Custom
Master Pages
Configure Customize Extend Custom
Overrides rendering of
• Header
• Item
• Footer
Create any HTML/CSS
Applies to all lists on page*
Use the list title for targeting
JSLink Client Side Rendering
Code Sample
*of same list type

24. Custom
Master Pages
Configure Customize Extend Custom
• Custom .NET WebParts
• Custom .NET Application Pages
• Script Editor Hacks
JSLink Client Side Rendering
Provides an alternative to:

25. Custom
Master Pages
Configure Customize Extend Custom
Control Template
It’s the container around your results
where you refer to any custom CSS or
JS files you may want to use. This is
the part does not get repeated as each
items gets loaded in the Search
Results.
Item Template
This is where you design how each
item will look like, which managed
properties from the result item will be
used and the html used to display
them.
Display Templates
Two kinds of display templates

26. Custom
Master Pages
Configure Customize Extend Custom
Display Templates are used to display data from SharePoint search.
Search is the best way to aggregate data from across SharePoint or even
integrate data from outside SharePoint.
Display Templates provide a framework to create a custom experiences
with data from the search engine.
This is a custom card template used to make a Site Catalog experience in
an intranet
Display Templates
Custom Search Experiences

27. Custom
Master Pages
Configure Customize Extend Custom
Display Templates
Add interactivity

28. Custom
Master Pages
Configure Customize Extend Custom
Display Templates
https://mytenant.sharepoint.com/_catalogs/masterpage/Display%20Templates/Search

29. Custom
Master Pages
Configure Customize Extend Custom
• Search results
• People results
• Personal Experiences: Actions, Files, Appointments, Tasks
• ECM Style Solutions
• Template Center
• P&P Center
Display Templates
Work great for

30. Custom
Master Pages
Configure Customize Extend Custom
Customize any aspect of any SharePoint page using JavaScript
Add banners, headers, footers, ribbons, or modify any page in SharePoint
JavaScript Embedding (Injection)
User Custom Actions

31. Custom
Master Pages
Configure Customize Extend Custom
JavaScript Embedding (Injection)
Add a custom header or footer without master page customizations

32. Custom
Master Pages
Configure Customize Extend Custom
JavaScript Embedding (Injection)
Hide / Replace the Create SubSite link

33. Custom
Master Pages
Configure Customize Extend Custom
JavaScript Embedding (Injection)
Code Sample
https://github.com/OfficeDev/PnP/tree/master/Samples/Core.EmbedJavaScript/Core.EmbedJavaScriptWeb

34. Custom
Master Pages
Configure Customize Extend Custom
• Full page HTML / JavaScript Applications
• Hosted inside SharePoint
• No constraints - Leverage your frameworks of choice
Full Page Experiences
Custom Experiences with AngularJS
Video Portal Delve Blogs OneDrive for
Business
Your Custom
Experiences

35. Custom
Master Pages
Configure Customize Extend Custom
Full Page Experiences
Full Responsive Employee Directory

36. Custom
Master Pages
Configure Customize Extend Custom
Full Page Experiences
Site Catalog

37. Custom
Master Pages
Configure Customize Extend Custom
Full Page Experiences
Fully Customized Homepage with Background Video, Animation, PowerBI and more

38. Custom
Master Pages
Demos

39. Custom
Master Pages
Questions
??
?