2018-10-17 J1 5D - Use the PnP SharePoint starter kit to create your Intranet in a box - Fabio Franzini

1. Fabio Franzini
@franzinifabio
Use the "PnP SharePoint Starter Kit" to
create your Intranet in a box
#MWCP18

2. MODERN WORKPLACE CONFERENCE PARIS
DU 16 AU 18 OCTOBRE 2018
#MWCP18

3. ABOUT ME
FABIO FRANZINI
▪ @FRANZINIFABIO
▪ FABIO@FABIOFRANZINI.COM
▪ HTTP://FABIOFRANZINI.COM
▪ HTTPS://GITHUB.COM/FABIOFRANZINI

4. AGENDA
• INTRANET EXAMPLES
• ABOUT THE "PNP STARTER KIT"
• HOW TO INSTALL
• HOW IS BUILT
• HOW TO CUSTOMIZE

5. SOME INTRANET SCENARIO

6. INTRANET EXAMPLE

7. INTRANET EXAMPLE

8. ABOUT THE "PNP STARTER KIT"

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

12. WEB PARTS

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

21. WEB PARTS
World Time
Clock web part to show the time in specific time
zone.

22. EXTENSIONS

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

26. HOW TO INSTALL

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" }

31. HOW TO INSTALL
DEMO

32. HOW IS BUILT

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

34. HOW IS BUILT
SHOW THE CODE

35. HOW TO CUSTOMIZE

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!!!

37. MODIFY
SCHEMA
AND
RECREATE
PNP FILE
$kit = Read-PnPProvisioningHierarchy -Path
.starterkit.xml
Save-PnPProvisioningHierarchy -Hierarchy $kit -
Out yourStarterKit.pnp

38. RESOURCES
• https://github.com/SharePoint/sp-starter-kit/
• https://github.com/SharePoint/PnP-
Provisioning-Schema
• https://channel9.msdn.com/blogs/OfficeDevP
nP/Getting-Started-with-PnP-Provisioning-
Engine
• https://docs.microsoft.com/en-
us/sharepoint/dev/spfx/sharepoint-
framework-overview
• https://developer.microsoft.com/en-us/fabric
• https://sharepoint.github.io/sp-dev-fx-
controls-react

39. MERCI BEAUCOUP!
THANK YOU! #MWCP18