Online Conference

June 17th and 18th 2015EVENTS.COLLAB365.COMMUNITY

The State of Communication Sites & UI Customization in SharePoint Online

EVENTS.COLLAB365.COMMUNITY

Randy DrisgillRackspace

Twitter: @drisgillBlog: blog.drisgill.comLinkedIn: linkedin.com/in/drisgill

Product ManagerMicrosoft MVP – Office Servers & Services

EVENTS.COLLAB365.COMMUNITY

Session Objectives• Classic options for UI Customization in

SharePoint• Communication Sites Intro• UI configuration options - Themes• Intro to SharePoint Framework (SPFx)

– SPFx Extensions – Using App Customizer for header & footer

WWW.COLLAB365.EVENTS

Introduction

EVENTS.COLLAB365.COMMUNITY

Classic SP UI Customization• Custom Master Pages & Page Layouts• Custom / Alternate CSS• JavaScript injection via Custom Actions w/ ScriptLink• Script Editor Web Part

EVENTS.COLLAB365.COMMUNITY

Modern SP Site Limitations• Customizations that are not supported:

– Custom Master Pages & page layouts– Sandbox and Farm Solutions– SharePoint Designer editing– Classic web parts on "modern" pages– Custom CSS via Alternate CSS– Custom JavaScript embedded via User Custom

Actions – Classic web parts like Script Editor Web Part are

gone (but not forgotten)

EVENTS.COLLAB365.COMMUNITY

Modern SP UI Customization - Today• Modern Sites

– Communication Site layouts– Modern Web Parts in Team & Comm. Sites

• Configuration Options– Office 365 Site Themes– SharePoint Themes (Classic & Modern)– Site Logo

• SharePoint Framework– Extensions – Application Customizers– Custom Modern Web Parts

WWW.COLLAB365.EVENTS

Intro to Communication Sites

EVENTS.COLLAB365.COMMUNITY

Communication Sites• Similar to Modern Team Sites• Geared towards content authors

communicating to large groups of consumers

• Includes various full page & multi-column layouts

• Mobile friendly!

EVENTS.COLLAB365.COMMUNITY

Comm. Sites - Layouts• Includes various section layouts for

arranging content in appealing ways• Full width to show content edge-to-

edge in browser– Limited to Hero & Image Web Parts

currently

• Single and Multi-column layouts

EVENTS.COLLAB365.COMMUNITY

Modern Web Parts• Modern Web Parts for displaying rich

content:– Bing maps– Document– Document library– Embed– Events– Group calendar– Hero– Highlighted content– Image– Image gallery– Link

• Many more announced at Ignite coming soon!– Spaces & Dividers

– List– News– Office 365 video– People– Power BI report– Quick chart– Quick links– Site activity– Stream– Text– Yammer feed

EVENTS.COLLAB365.COMMUNITY

Coming Soon: Hub Sites• Associate multiple Team & Comm.

Sites to one Hub Site• Roll-up content from sites to the Hub

Site• Hub Sites add consistent navigation,

theme colors & logo to all rolled-up sites

WWW.COLLAB365.EVENTS

Demo: Communication Sites

WWW.COLLAB365.EVENTS

Configuration Options

EVENTS.COLLAB365.COMMUNITY

Office 365 Themes• Change the look of the top bar in Office 365 • Use canned options at the Site level:

– Gear Menu > Change Theme– Just changing background image / color

EVENTS.COLLAB365.COMMUNITY

Office 365 Themes• If Admin, you can use custom theme options globally:

– App Launcher > Admin > Settings > Org. Profile > Manage custom themes for your org.– Upload custom logo for center of top bar– Add URL for clickable logo– Upload background image for top bar– Set colors: Accent color, background, Text color, and App launcher icon color– Option to prevent users from overriding Global theme with their own

EVENTS.COLLAB365.COMMUNITY

Change the Look – SharePoint Themes• Gear menu > Change the look

• Classic mode is still available• Modern lets you pick from 6 canned color

schemes• Recently added ability to add custom

themes & hide default themes

Today: Future:

EVENTS.COLLAB365.COMMUNITY

Custom SharePoint Themes• Ability to upload custom theme

colors for your SharePoint sites• PowerShell instructions:

– Add-SPOTheme -Name "Road Ahead" -Palette $themeRoadAhead -IsInverted $false

– https://aka.ms/spsitetheming

• Theme Generator:– https://aka.ms/spthemebuilder

WWW.COLLAB365.EVENTS

Demo: Configuration Options

WWW.COLLAB365.EVENTS

Intro to SharePoint Framework (SPFx)

EVENTS.COLLAB365.COMMUNITY

What is the SharePoint Framework• Framework for building client-side web parts• Uses modern JavaScript techniques• Cross platform (Mac and PC) • Based on GitHub, Yeoman, Gulp, Typescript, & React• Includes SharePoint Workbench for quick offline testing

EVENTS.COLLAB365.COMMUNITY

What can you do with SPFx?• Build client-side Web Parts for SPO in Office 365• Work in Modern or Classic 365 UI • Now also available in SP Server 2016 w/ Feature Pack 2

– https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-2016-support

• SPFx Extensions to take SP UI further

EVENTS.COLLAB365.COMMUNITY

SPFx Developer Toolchain• Node.js - https://nodejs.org• NPM - https://www.npmjs.com/• Yeoman - http://yeoman.io/• Gulp - http://gulpjs.com/• TypeScript - https://www.typescriptlang.org/

EVENTS.COLLAB365.COMMUNITY

JavaScript Frameworks• React - Microsoft uses React to build

their Framework apps– https://facebook.github.io/react/

• Examples from Microsoft will likely be written using React.

• You don’t have to use React for your Framework dev

EVENTS.COLLAB365.COMMUNITY

Setting Up Dev Environment• Get an O365 Tenant (or user SP2016 w/ Feature Pack 2)

– Dev Tenant for using SPFx preview code

• Create App Catalog• Install NodeJS• Install Yeoman & Gulp• Install Yeoman SharePoint Generator

Details:• https://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant• https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment

EVENTS.COLLAB365.COMMUNITY

Framework Extensions• Extend SharePoint UI

– Application Customizers• Adds scripts to the page• Custom rendering in pre-defined placeholders

– Field Customizers• Modify fields in Lists

– Command Sets• Add new actions with client-side code

EVENTS.COLLAB365.COMMUNITY

Application Customizers• Provide access to well-known locations on SharePoint pages• Currently – Top & Bottom locations can be used to pin header

& footer dynamically on all pages in SPO• More page locations could be added in the future

WWW.COLLAB365.EVENTS

Demo: Framework Extensions

EVENTS.COLLAB365.COMMUNITY

More Info• Microsoft Docs – Demos:

– Your first extension: • https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

– Page Placeholders: • https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

– Load SPFx in debug mode:• ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={“YOUR

GUID":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{YOUR PROPERTIES}}}

– Theme Colors in SPFx:• https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-theme-colors-in-your-customizations

• GitHub for examples:– https://github.com/rdrisgill/collab365

EVENTS.COLLAB365.COMMUNITY

Stay tuned for more great sessions …

Thanks for watching!