The State of Communication Sites & UI

Customization in SharePoint Online

Online Conference

June 17th and 18th 2015

EVENTS.COLLAB365.COMMUNITY
 Randy Drisgill
Rackspace
Product Manager
Microsoft MVP – Office Servers & Services

Twitter: @drisgill
Blog: blog.drisgill.com
LinkedIn: linkedin.com/in/drisgill

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

EVENTS.COLLAB365.COMMUNITY
 Introduction

WWW.COLLAB365.EVENTS
 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

EVENTS.COLLAB365.COMMUNITY
 Intro to Communication Sites

WWW.COLLAB365.EVENTS
 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 – List
– Document – News
– Document library – Office 365 video
– Embed – People
– Events – Power BI report
– Group calendar – Quick chart
– Hero – Quick links
– Highlighted content – Site activity
– Image – Stream
– Image gallery – Text
– Link – Yammer feed

• Many more announced at Ignite coming soon!

– Spaces & Dividers

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

EVENTS.COLLAB365.COMMUNITY
 Demo: Communication Sites

WWW.COLLAB365.EVENTS
 Configuration Options

WWW.COLLAB365.EVENTS
 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
Today: Future:
• 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

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

EVENTS.COLLAB365.COMMUNITY
 Demo: Configuration Options

WWW.COLLAB365.EVENTS
 Intro to SharePoint Framework
(SPFx)

WWW.COLLAB365.EVENTS
 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

EVENTS.COLLAB365.COMMUNITY
 Demo: Framework Extensions

WWW.COLLAB365.EVENTS
 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
 Thanks for watching!
Stay tuned for more great sessions …

EVENTS.COLLAB365.COMMUNITY