your intranet, your way
TRANSCRIPT
Your Intranet, Your WayBy: Dave Feldman and D’arce Hess
Custom Master Pages
Agenda
Introduction Challenges
Themes
Display Templates
Angular.js
Alternate CSS
Client-Side Rendering
Questions
Custom Master Pages
Introduction
Custom Master Pages
D’arce Hess
@darcehess
https://www.linkedin.com/in/darcehess
Custom Master Pages
Custom Master Pages
Farm Solutions
Master Pages
Custom .NETWeb Parts
Custom .NET Application Pages
Traditional SharePoint Customization ApproachesMany of the traditional approaches are unavailable or not recommended for Office 365.
Custom Master Pages
Different Approaches for cloud or onprem
Client SideAvoid
Master PagesNew
Extensibility Capabilities
Single Page Applications
Custom Master Pages
SharePoint Customization ContinuumConfigure
Configure Customize Extend Custom
Theming• O365• SharePointOffice 365 LogoCustom Tiles in the App LauncherWeb Parts on PageAuthored Content
Custom Master Pages
SharePoint Customization ContinuumCustomize
Configure Customize Extend Custom
• Custom SharePoint Theme• Alternate CSS• Custom Page Layouts• JSLink Client-side Rendering• Display Templates
Custom Master Pages
SharePoint Customization ContinuumExtend
Configure Customize Extend Custom
JavaScript Embedding (Injection)
Custom Master Pages
SharePoint Customization ContinuumCustom Experiences
Configure Customize Extend Custom
Full Page Experiences
Themes
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 ThemesO365 Themes are used to brand the Suite of O365 applications.
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 ThemesPrimary way to brand Collaboration Sites in SharePoint.
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 ToolEasily customize .spcolor files
Custom Master Pages
Configure Customize Extend Custom
Alternate CSSAlternate 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.
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
Custom Master Pages
Configure Customize Extend Custom
Custom Page LayoutCode Sample
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 RenderingControl the rendering of SharePoint data with JavaScript
Custom Master Pages
Configure Customize Extend Custom
JSLink Client Side RenderingReal world examples: Custom News List
Custom Master Pages
Configure Customize Extend Custom
JSLink Client Side RenderingReal world examples: Upcoming Events Calendar
Custom Master Pages
Configure Customize Extend Custom
JSLink Client Side RenderingReal world examples: Custom Links
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 RenderingCode Sample
*of same list type
Custom Master Pages
Configure Customize Extend Custom
• Custom .NET WebParts• Custom .NET Application Pages• Script Editor Hacks
JSLink Client Side RenderingProvides an alternative to:
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 TemplateThis 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 TemplatesTwo kinds of display templates
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 TemplatesCustom Search Experiences
Custom Master Pages
Configure Customize Extend Custom
Display TemplatesAdd interactivity
Custom Master Pages
Configure Customize Extend Custom
Display Templateshttps://mytenant.sharepoint.com/_catalogs/masterpage/Display%20Templates/Search
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
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
Custom Master Pages
Configure Customize Extend Custom
JavaScript Embedding (Injection)Add a custom header or footer without master page customizations
Custom Master Pages
Configure Customize Extend Custom
JavaScript Embedding (Injection)Hide / Replace the Create SubSite link
Custom Master Pages
Configure Customize Extend Custom
JavaScript Embedding (Injection)Code Sample
https://github.com/OfficeDev/PnP/tree/master/Samples/Core.EmbedJavaScript/Core.EmbedJavaScriptWeb
Custom Master Pages
Configure Customize Extend Custom
• Full page HTML / JavaScript Applications• Hosted inside SharePoint• No constraints - Leverage your frameworks of choice
Full Page ExperiencesCustom Experiences with AngularJS
Video Portal Delve Blogs OneDrive for Business
Your Custom Experiences
Custom Master Pages
Configure Customize Extend Custom
Full Page ExperiencesFull Responsive Employee Directory
Custom Master Pages
Configure Customize Extend Custom
Full Page ExperiencesSite Catalog
Custom Master Pages
Configure Customize Extend Custom
Full Page ExperiencesFully Customized Homepage with Background Video, Animation, PowerBI and more
Custom Master Pages
Demos
Custom Master Pages
Questions
?? ?