your intranet, your way

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

David Feldman@bostonmusicdavehttps://www.linkedin.com/in/bostonmusicdavebostonmusicdave@gmail.com

Custom Master Pages

D’arce Hess

@darcehess

https://www.linkedin.com/in/darcehess

Darce.Hess@avepoint.com

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

?? ?