the state of communication sites & ui customization in ...... · •modern sites –...
TRANSCRIPT
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
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
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
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
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
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