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.

1. Peter Ward #Amazing #O365 #Beautiful
SharePoint Saturday Philadelphia June 22nd 2019

2. {
background : “Founder/CTO ",
employee : “SoHo Dragon",
skill : “SharePoint, O365",
books : “Co author of 4 SharePoint books”
writing : “Write for Forbes magazine”
Co organizer : “SharePoint Saturday New York, Meetup”
location : “New York”
old school : “Like projects on time and on budget”
hobbies : “Yoga, cooking vegetarian food",
}

3. {
Approach
}

4. {
Introductions
}

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

11. 8
 The Explorer view doesn’t exist anymore

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

19. https://channel9.msdn.com/

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

22.  spfx-announcements
 Slider
 News ticker
 Animated Text
 3D Carousel

24. {
Where to start with modern
Code
How to get started
QA
Code example giveaways – links
}

25. QUESTIONS
{
t - @HelloPeterNYC
b - www.wardpeter.com
w - www.sohodragon.nyc
}

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)