9. ABOUT THE PNP
STARTER KIT
Is an open source (MIT)
solution designed for
SharePoint Online which
provides numerous web
parts, extensions, and
other components
which you can use as an
example and inspiration
for your own
customisations.
10. OBJECTIVES
1
Automated
provisioning of
simple demo
content within a
communication
site
2
Automated
provisioning of the
whole solution to
any tenant within
minutes
3
Automated
configuration of
Site Scripts and
Site Designs at the
tenant level using
the PnP Remote
Provisioning
engine
4
Implementation of
different
customizations for
SharePoint Online
5
Usage of Office UI
Fabric and
reusable PnP SPFx
controls within the
customizations
11. WHAT DOES
IT INCLUDE?
(1.3 version)
Provisioning
Template with
Columns
Lists
Pages
Resources
Themes
Files
17 SPFX WebParts
7 SPFx Extensions
13. WEB PARTS
Banner
Creates a banner with an image and overlaid text
Followed Sites
Shows the list of sites which the current user is
following
14. WEB PARTS
Links
Link list web part which is using collection data editor
and stores the links in web part properties
LOB
Sample web part to surface LOB information from API
hosted in Azure
15. WEB PARTS
People directory
People directory web part uses the people search API
to get list of people to show
Personal Calendar
Shows upcoming calendar meetings for the current
user using Microsoft Graph
16. WEB PARTS
Personal Contacts
Personal contacts for the current user using Microsoft
Graph
Personal Email
List latest personal emails for the current user using
Microsoft Graph
17. WEB PARTS
Personal Tasks
Show personal tasks for the current user using
Microsoft Graph
Recent Contacts
Show recent contacts for the current user using
Microsoft Graph
18. WEB PARTS
Recently Used Documents
Show recently used documents for the current user
using Microsoft Graph
Recently Visited Sites
Show recently visited sites for current user using
Microsoft Graph
19. WEB PARTS
Site Information
Intended to collect and present additional metadata
for group associated team sites
Stock Information
Display stock information by using the live stocks
service provided by Alpha Advantage.
20. WEB PARTS
Tiles
Renders set of tiles. Icons are from Office UI Fabric and you can
configure tiles using collection editor in web part properties
Weather Information
Weather information web part which is using Yahoo Weather
APIs to get the forecast information
23. EXTENSIONS
Alert Notification
Shows informational or important messages in the header section
of pages based on a custom list information in the hub site.
Collaboration Footer
Shows company wide links and personalized links
24. EXTENSIONS
Discuss Now
Custom list view command set to add new custom dialog for
document library
Portal Footer
Expanding footer for communication site. Show standard
company links and also supports personalized links
25. EXTENSIONS
Site Classification
Renders a header with site classification information
Redirect
Can be used to perform automatic redirections of
URLs in the site based on a custom list.
Tab Page
Renders a header with links between two different
pages in the site
27. PRE
REQUIREMENTS
1/3
• You need to be a tenant administrator to be
able to deploy this solution
• Automatic end-to-end provisioning only
works with English tenants
• Make sure your tenant is “targeted release for
everyone” (Wait 24 hours)
• Make sure your tenant has an app catalog
(Wait 24 hours)
• Make sure you are a term store administrator.
28. PRE
REQUIREMENTS
2/3
Create a Custom Property in the User Profile
Service with the following settings:
• Name: PnP-CollabFooter-MyLinks
• Display name: PnP-CollabFooter-MyLinks
• Type: string (Single Value)
• Length: 3600 (which is the maximum
allowed)
• Policy Setting: Optional
• Allow users to edit values for this property:
Checked
29. PRE
REQUIREMENTS
3/3
Using the latest version
of ”SharePointPnPPowerShellOnline” by:
Install:
Install-Module
SharePointPnPPowerShellOnline
Update:
Update-Module SharePointPnPPowerShell*
30. INSTALL
Use the following commands:
Connect-PnPOnline -Url
https://[yourtenant].sharepoint.com
Simple Scenario:
Apply-PnPProvisioningHierarchy -Path
starterkit.pnp
Passing Parameters:
Apply-PnPProvisioningHierarchy -Path
starterkit.pnp -Parameters
@{"Company"="Your Company Name";
"SiteUrlPrefix"="YourCompany";
"WeatherCity"="Paris" }
33. HOW IS BUILT
PnP
Provisioning
Engine
SPFx
WebParts
SPFx
Extensions
Office UI
Fabric
Microsoft
Graph
• PnP Provisioning Engine:
For provisioning all assets
structures and configurations
• SPFx:
Modern client side framework
• Office UI Fabric:
Modern UI Styles and Components
across MS Services
• Microsoft Graph:
For interact across services in the
Office 365 Tenant
36. HOW TO
CUSTOMIZE
MODIFY OR
REUSE
PnP PROVISIONING TEMPLATE
ADD OR
REUSE
CODE LIKE WEB PARTS AND / OR EXTENSIONS
LEARN SPFx!!!
LEARN SASS!!!
LEARN REACT!!!