This document contains a summary of a presentation by Peter Ward on modern SharePoint sites. Some key points covered include:
- Modern sites use a "hub" navigation model where sites are more loosely connected than classic sites.
- The modern look and feel integrates well with mobile devices and Office 365 tools like Teams and Groups.
- Branding is less customizable out of the box in modern sites compared to classic sites which use master pages.
- Modern sites have easier content navigation and moving/copying of items between locations.
5. {
You do not need to write
anything down. Everything, is
on my blog.
www.wardpeter.com
}
6. REPEAT
SLIDE{
You do not need to write
anything down. Everything, is
on my blog.
www.wardpeter.com
}
7. It’s not responsive
Branding … is a science project and $$$$
Make page editing easier.. More user friendly
It’s Microsoft’s attempt to get users to use SharePoint as SharePoint
Out of the box features that are really useful
8. Classic UI isn’t going away any time soon….. Like in the next 18 months
It isn’t always faster on page loads.... If you use React (Fabric UI)
Both Classic and Modern can co exist
Modern UI is not easily customizable for branding
Need know modern command line development- Tooling
No page layout
Less templates . No record center
You cannot add snippets of code into modern sites from the UI itself –OOB
Search results page- isn’t easy to be customized .. As of date of the ppt.
The template approach is different with site design (not as good)
9. 10
Will need to you PnP provisioning engine or SPFx web parts
Angular JS- MS doesn’t support Angular scaffolding template
Behind the scenes : modern pages are React
SPFX web parts. The code is run separately, so over riding
doesn’t happen
Now need to application customizer- this put angular main files into the
masterpage
SP Go
Tool Tip: Can use the modern script editor web part (Github)
10. 9
These developed applications can be deployed as
Azure hosted apps or azure API management and
SPFx web parts
And use Graph API’s, Azure AD, ETC . SP API –
can be little restrictive
12. 7
Branding is not easy to change out of the box, only a few themes and patterns
available that you can switch between.... (SharePoint actually looks like a decent
intranet site)
Since masterpages don’t exist, you cannot customize look and feel. Say goodbye to
you completely customized look. USE SPFx extensions, by injecting custom JS
https://marketplace.visualstudio.com/items?itemName=SiteGo.spgo - Work
directly on your site
Personalized user branding - https://www.microsoft.com/en-us/microsoft-
365/blog/2019/05/21/sharepoint-home-sites-microsoft-365-innovations-intelligent-
workplace/
13. 6
Integration to other O365 components Groups, Teams, Planner
Modern site has a notebook, calendar- integrate into Outlook calendars in
Outlook, or all your notes in OneNote, across all sites and your own personal use.
This also comes with the downside of maintain all of these individually
14. 5
Are modern sites different than modern UI??
Not really. Modern UI is a way of Microsoft to convert the
existing classic site's contents to a modern experience. The
sites may still be classic, but the site contents will have a
modern UI, with an option to go back to classic UI.
Modern sites on the other hand will have a modern UI by
default and will not have an option to switch to
classic
Ribbon Goes away
15. 4
Since the modern UI is completely responsive, it
behaves very well on mobile devices
Beware: if you are using the 3rd party script editor web
part, avoid jQuery/ Angular 1.x /JavaScript containing
HTML as it may interfere with responsive design.
EG Reality
16. 3
Microsoft Teams and Groups provision modern SharePoint sites by default. All
modern
17. 2
Easier navigation with modern- Modern sites use a concept called "hubs" where
sites are more loosely connected. The product site can just be switched from the
Division A to the Division B hub, and it will get the navigation, search, and look of
a Division B site. Its URL won't even change, so favorites and links won't break.
Only issue with the hub site though is that each hub site is a site collection. You
can't have them as subsites
Modern sites take away the ability to control the number of templates available
to create subsites.
Demo- Converting a site to a Hub site.
18. 1
The modern look and feel inside lists and libraries have Flow and PowerApps
integration
View formatting on modern lists and libraries enables you to give a cleaner look to
the contents
You can copy and move items- Modern sites give you the flexibility to copy
files/pages to different locations so that you don’t need to download and upload
them at a different location
20. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
App Catalog - This is where your code will be
Modern SharePoint Book
See Code giveaway
https://yeoman.io/ - build the scaffolding for SPfx web part and extension
Install a code editor
You can use any code editor or IDE that supports client-side development to
build your web part, such as:
Visual Studio Code
Atom
Webstorm
21. Page load time – Chrome Extension
Save to Pocket – Great reference
9 Chrome extensions that every SharePoint Developer should use
Postman
SPEditor
JSON Viewer
Sonar
Angularjs – inspector
IE Tab
Clear Cache -
Multiple identities
26. Set up your SharePoint Framework development environment
https://developer.microsoft.com/en-us/office/blogs/update-on-modern-document-libraries-and-
extensiblity/
Planning your SharePoint hub sites
Tooling up SPfX
What is https://wardpeter.com/what-is-angular/
https://wardpeter.com/so-you-want-to-do-a-bit-of-modern-ui/
Using React and Redux in SharePoint Framework (SPFx)