The document discusses customizing the modern SharePoint experience. It provides an overview of modern vs classic sites and pages. Key differences are discussed around navigation, Office 365 group association, and components. Modern sites can be created in several ways. Hub sites are introduced as a way to associate communication and team sites together. Options for customizing modern sites include JSON formatting, site designs, themes, and SharePoint Framework extensions and web parts. Site designs allow limited customizations like lists, columns and workflows. Extensions inject CSS and web parts are client-side components.

1. + Cincinnati + Louisville
+ Nashville + Columbus
+ Detroit + Indianapolis
Understanding and Customizing
the Modern SharePoint Experience

2. About Me
2
• Principal Consultant, Collaboration at KiZAN in Louisville, KY
• Microsoft Certified Trainer since 2000
• Worked in the SharePoint world since ~ 2005
Patrick.Tucker@KiZAN.com
@tuckersnet
www.linkedin.com/in/tuckersnet
Patrick Tucker

3. 3
Agenda
Who is this session for?
1. Site Collection admins and Site Owners
2. Power users who’ve customized prior versions of SharePoint
3. Those moving from SharePoint on-premises to SharePoint
Online/SP 2019
What questions will we answer?
1. What are modern sites and pages?
2. What are hub sites?
3. How are modern and classic sites different from each other?
4. What options do we have to customize the UI of modern sites?
5. How do SharePoint Framework customizations fit into the picture?

4. Customer & KiZAN confidential 4
Modern vs Classic Sites
• Two Types
• Team Site
• Communication Site
• Key Differences
• Quick launch navigation
• Office 365 Group association
Modern Sites
• Classic Team Sites
• Publishing Sites
• Document and Record Center
• Search Center
Classic Sites

5. Customer & KiZAN confidential 5
How New Modern Sites are Made
A user going to the SharePoint home page
An admin from the “new” SPO Admin Center
When a Team is created in MS Teams
When a Group is created in Yammer
When a Plan is created in Planner

6. Customer & KiZAN confidential 6
Office 365 Groups (thanks Matt Wade)
http://icansharepoint.com/everyday-guide-office-365-groups/

7. Customer & KiZAN confidential 7
Modern vs Classic Experiences
Pages
• “Modern" pages are delivered by using the Site
Pages web scoped feature
• Classic and Modern each built from its own
toolbox.
• The components don’t mix and match
Lists and Libraries
• Modern experience enables PowerApps & Flow
integration
• Most libraries are in modern mode by default
• Can be switched back on a per user/library basis

8. Customer & KiZAN confidential 8
A mixed skyline
• Classic sites may have modern pages
• Modern sites may have classic pages
• List and Libraries begin in modern mode, but
revert to classic (for now)
MS says “We're not deprecating the classic experience; both classic and modern will coexist.”

9. Customer & KiZAN confidential 9
Converting sites
There is no direct conversion, but there are options – “in-place modernization”
https://docs.microsoft.com/en-us/sharepoint/dev/transform/modernize-userinterface-site-pages-ui
The Page Transformation UI is an
option in beta:

10. Customer & KiZAN confidential 10
Hub Sites
Communication sitesTeam sites
Created by users or admins Created by users or adminsCreated by admins
Navigation
Theme and logo
Search scope
Hub sites
A communication site
or team site
News, activity, and calendar rollup

11. Customer & KiZAN confidential 11
HUB = HOA
Hubs are sites that are associated together, like an HOA
When you join the HOA, your house is your own but you must
follow the rules of the neighborhood
You have some resources that are your own,
and some are shared
You keep the keys to your own house
https://docs.microsoft.com/en-us/sharepoint/planning-hub-sites

12. Customer & KiZAN confidential 12
Demo

13. 13
Customizing Modern Sites
What’s available out of the box?
Which customizations are supported?
What are site scripts, designs and themes?
What are modern web parts and extensions?

14. Customer & KiZAN confidential 14
Goodbye to Old Friends
Many classic Customizations
are no longer supported on
modern pages…
Inside the page:
Script Editor
Content Editor
Content Query/Search
Outside the page:
Master Pages
CSS

15. Customer & KiZAN confidential 15
What’s out of the box?

16. Customer & KiZAN confidential 16
What’s Supported?
• JSON Column and/or View Formatting
https://go.microsoft.com/fwlink/?linkid=856302
• Site Designs and Themes
• A custom theme
• Custom lists, libraries, site columns, content types
• SharePoint Framework Extensions and Web Parts

17. Customer & KiZAN confidential 17
Not Supported
•Custom master pages
•Custom page layouts
•AlternateCSSUrl property
•Modern subsites
•Enabling publishing features

18. Customer & KiZAN confidential 18
SharePoint Designer
By default, modern sites don’t allow Custom Script (which means no SPD)

19. Customer & KiZAN confidential 19
Demo

20. Customer & KiZAN confidential 20
Column/View Formatting
Use JSON and predefined classes to…
• Apply conditional formatting
• Create clickable actions/URLs
• Create data visualizations
• Create a button to start a Flow

21. Customer & KiZAN confidential 21
Site Designs and Themes

22. Customer & KiZAN confidential 22
Puzzling Pieces
Site Script
Actions
ID
Site Design
Title
Script
Template
Site Theme
Colors Name
Script
• contains actions
Design
• Points to script
• Named for deployment
Theme
• Collection of colors
There is a limit of 100 site scripts and 100 site
designs per tenant.
Limited to 30 w/ Invoke-SPOSiteDesig
or 300 actions otherwise

23. Interior of Designs
Back End
• A JSON file is created for the Theme and Design
• The JSON file is processed by a PowerShell script
Front End
• Choose Create Site from the SharePoint home page
• Choose the custom Site Design
• Apply a site design to an existing site

24. Customer & KiZAN confidential 24
Site Themes
https://aka.ms/themedesigner
https://laurakokkarinen.com/how-to-create-a-multicolored-theme-
for-a-modern-sharepoint-online-site/

25. Customer & KiZAN confidential 25
Site Design
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-design-json-schema
• Site designs are available to everyone by default
• You can limit which users can see a given design
• Site Designs are created in JSON
• They are deployed/applied via PowerShell
• They can be applied from the SPO UI

26. What's Included?
•Creating a new list or library (or modifying the default one created with the site)
•Creating site columns, content types, and configuring other list settings
•Applying a theme
•Setting a site logo (on Team Sites)
•Adding navigation
•Triggering a Microsoft Flow
•Installing a deployed solution from the app catalog
•Setting regional settings for the site
•Adding principals (users and groups) to SharePoint roles
•Setting external sharing capability for the site

27. What's Excluded?
• Adding or Configuring web parts on pages
• Custom CSS or master pages
• Addition of documents/content

28. Customer & KiZAN confidential 28
Site Design Deployment
1. Download SharePoint Online Management Shell
2. Download PnP PowerShell Module
3. Connect to the SPO Site (admin creds required)
4. Run the following PowerShell cmdlets:
Other options include invoking a Site Design and Removing a Site Design
1.Add-
SPOSiteScript
Add-
SPOSiteDesign
Set-
SPOSiteDesign

29. Customer & KiZAN confidential 29
Demo

30. Customer & KiZAN confidential 30
Page Templates
https://support.office.com/en-gb/article/page-templates-in-sharepoint-online-faa92408-0c84-4e3d-8460-3c28065e7873
• Not included in a site design
• Can be created after site creation
• Available when a page is published

31. Customer & KiZAN confidential 31
Extensions and Web Parts
We can develop custom components
with the SharePoint Framework
Extensions are client-side code that:
• target well-known areas
(header/footer)
• change how fields are displayed
in lists
• display new commands
Web Parts are client-side UI
components:
• Built with HTML and JavaScript
• SPO and SP Server 2019

32. Customer & KiZAN confidential 32
Inject CSS
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/overview-extensions
Using extensions, we can inject CSS:
• Into the well defined area
• Into the HTML Head element.

33. Customer & KiZAN confidential 33
Deployment
Web Parts and Extensions must be added to the tenant App Catalog
They may be deployed as apps from “Site Contents”
They may be deployed as part of a Site Design (PnP needed to get the IDs)

34. Customer & KiZAN confidential 34
Demo

35. Customer & KiZAN confidential 35
Questions
@tuckersnet
Patrick.Tucker@KiZAN.com
www.tuckersnet.com