The document summarizes Thomas Daly's presentation on creating cross-site collection navigation using SharePoint Framework (SPFx) extensions, PowerShell PnP, and PnP-JS. It discusses using a SharePoint list as the data source for global navigation and creating templates for it using PnP Powershell. It also covers building an SPFx Application Customizer to connect to the list and render the navigation, as well as options for caching and deploying the solution across a tenant.

1. SPS Virginia Beach
Presented by: Thomas Daly
Cross Site Collection Navigation using SPFx,
Powershell PnP & PnP-JS

2. About me
• SharePoint Team Lead @ SoHo Dragon - NYC
• Senior Developer for Office 365 & SharePoint
• Enjoys the UI side of things
• front end dev, branding, design
• Community Involvement
• International Speaker!
• NJ SharePoint User Group Organizer
• SharePoint Saturday NYC Organizer [10th year]
• NJ & NYC Global Office 365 Dev Bootcamp Organizer
• NJ Azure Bootcamp Organizer
• SharePoint Saturday NJ Organizer [2013-2014]
• My SharePoint Blog
• Git Hub [corp directory controls / o365 sticky footer /
bootstrap navigation]

3. SharePoint / Office 365 / Azure / Data
Intranets - Migrations - Development
Recruiting - Staffing

4. Outline
• Background
• Solution Architecture
• Creating Templates via PnP Powershell
• Create an SPFx Extension
• Application Customizer
• Deployment & Development
• Other Examples / Enhancements

5. Background
• Security / Permissions
• Database Sizing
• Isolated Configurations (ex. Search)
• Specific Functionality
Many organizations
opt for multiple site
collections for a
variety of reasons
• Each modern site is a site collection
• Modern Site architecture is wide rather than deep [sub sites]
• Sub site model still exists
• Modern “Hub” sites are meant to logically group site collections
“Modern“ Sites have
flat architecture

6. Background
Cross Site Collection Navigation has been an issue since
the beginning
Microsoft has never offered a solid solution to this
problem
Company’s & Consultants have been building solutions to
fill the gap for almost every version of SharePoint

7. Hub Sites
• A SharePoint Hub Site can be associated with
multiple teams and communication sites (or
site collections).
• It provides the following common features:
• Navigational structure
• Logo
• Look and feel
• Scoped search
• Creating Hub Sites

8. Mega Menu
Available Now

9. Solution Architecture
• In this solution we will have 1 list that drives the navigation
• Each site collection will get a SPFx Extension / Application Customizer
• The SPFx Extension / Application Customer will connect to the SP list

10. SP LIST
Site 1
Site 2
Site 3
Root Site
Site Collections
Global Nav
Package
App Catalog

11. Date Source Variations
Using List Items
01
Using Text / HTML
Files
02
Using Managed
Meta Data
03

12. Concerns
Users must have
access to the
navigation source
1
Solutions needs to
be able to target the
source via a URL
2
Security Trimming
Respected
3

13. SharePoint
List Structure
•Single Line of Text
•using OOTB Title, the display name of the Node
Title
•Single Line of Text
•the link where the Node navigates to
Url
•Yes/No
•Specify if you want to navigate in a new tab or current window
Open In New Window
•Number
•Allows us to sorts the navigation
Order
•Lookup
•Points to itself, allowing a node to have a parent
Parent Node

14. List
Deployment
Options
Manually Make List1
Create list schema for deployment via SPFx2
Create list programmatically via PowerShell
PnP3
Create list schema via PowerShell PnP, use the
provisioning engine4

15. PnP PowerShell
• A library of PowerShell commands that
allows you to perform complex
provisioning and artifact management
actions towards SharePoint.
• 100’s of cmdlets that work against
both SharePoint Online and SharePoint
On-Premises. (2013, 2016 & Office 365)
• Can be combined into very powerful
scripts for configuration, testing &
automated deployment

16. SharePoint
Framework
(SPFx)
Extensions
• Extend the SharePoint user experience within modern
pages and document libraries
• Used to customize more facets of the SharePoint
experience, including notification areas, toolbars, and
list data views.
• SharePoint Framework tools and libraries for client-side
development.
• Application Customizers. Adds scripts to the page,
and accesses well-known HTML element
placeholders and extends them with custom
renderings.
• Field Customizers. Provides modified views to
data for fields within a list.
• Command Sets. Extends the SharePoint command
surfaces to add new actions, and provides client-
side code that you can use to implement
behaviors.
• Building your first extension

17. Application
Customizer
• Provides access to well-known
locations on SharePoint pages that you
can modify based on your business and
functional requirements
• For example, you can create dynamic
header and footer experiences that
render across all the pages in
SharePoint Online.
• Starts out as plain old JavaScript shell,
but you can add React
• Building Application Customizer

18. Adding
React
Elements
• Include libraries & types similar to SPFx1.6 Web Part
• npm install @types/react@15.6.6 @types/react-
dom@15.5.6 react@15.6.2 react-dom@15.6.2 –save
• Creating React Components

19. Global Navigation
• Define Interfaces - TypeScript is your friend!
• Global Navigation Provider
• Root Global Nav Component
• Nav Node Components (both parent & child)

20. SP PnP-JS
• PnP JS is a collection of fluent libraries
for consuming SharePoint, Graph, and
Office 365 REST APIs in a type-safe way
• https://pnp.github.io/pnpjs/

21. Benefits of Using SP-PnP-JS
• Intellisense & TypeChecking
• Simplify development experience
• Intuitive using fluent library
• Easier to read code intent
• Asynchronous, built on Promises
• Built-in caching
• Abstracts devs from low level details
Something like SPServices?

22. Caching
• Use when data doesn’t change
quickly / often
• Caching Timeout
• Global Disable [for
testing/debugging]
• Storage Options
• Session Storage – persists
until window closed
• Local Storage – persists
until explicitly deleted

23. Office UI Fabric
• Official UX design framework
for Office Apps/Add-ins
• Contains Styles, Icons &
Components
• Focus on developing
functionality instead of
design
• New SharePoint experiences
are built with Fabric and the
SharePoint Framework
comes with it baked in to
make things simple

24. Office UI Fabric Icons
• Fabric uses a custom font for its
iconography.
• Includes glyphs that you can
scale, color, and style in any way
• See all the icons - here

25. Tenant Wide Deployment
• SharePoint Framework components can be set to be immediately available
across the tenant when the solution package is installed to the tenant app
catalog
• This can be configured by using the skipFeatureDeployment attribute in
the package-solution.json file
• When the solution has this attribute enabled, the tenant administrator is
provided the option to enable the solution to be available automatically
across all site collections and sites in the tenant when the solution package
is installed to the tenant app catalog.
• https://docs.microsoft.com/en-us/sharepoint/dev/spfx/tenant-scoped-
deployment

26. Demos
Building list via PnP
Building an SPFx Application
Customizer
Add Data Calls with PnP JS calls
Show Site Menu Variation

27. Enhancements – Different Data Sources
• Some scenarios in would have
multiple “environments” per tenant.
• /sites/contoso
• /sites/mySite
• /sites/anotherSite
• /sites/contosoDEV
• /sites/mySiteDEV
• /sites/anotherSiteDEV
• /sites/contosoSTG
• /sites/mySiteSTG
• /sites/anotherSiteSTG
• You might want to just target the
root site as the data source

28. Enhancements – Caching
• Reduce unnecessary calls, client/server impact & faster load times
• Global Navigation Solutions are excellent candidates for caching
• Specify Global Caching or Per Call caching parameters
• If you plan to security trim you need to be cautious

29. Slides, Demos & Contact
• https://www.slideshare.net/tommdaly
• https://github.com/tom-daly/spfx-global-
navigation
Email: thomasd@sohodragon.com
Twitter: @_tomdaly_
LinkedIn: profile