Thomas Daly presented on creating cross-site collection navigation in SharePoint using SPFx, PowerShell PnP, and PnP-JS. The solution uses a SharePoint list as the data source for the global navigation which is then rendered on sites using an SPFx application customizer. The customizer retrieves the navigation data from the list using PnP-JS calls and renders the navigation using React components. The solution can be deployed tenant-wide using features in SPFx and is extensible to support additional data sources and caching.

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

3. 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 [11th 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]

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

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

6. 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

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

8. 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

9. Mega Menu
Available Now

10. 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

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

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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

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

21. 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/

22. 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?

23. 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

24. 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

25. 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

26. 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

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

28. 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

29. 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

30. Bonus – Build Once Use Twice!
• Leveraging the Concepts of Reusable React Components
• Add a second “bootstrapping” component for Classic Mode
• Build a second webpack config to properly bundle for Classic Mode

31. Classic Mode Component
• Creating a new entry
point for our webpack
config
• Require any specific
Classic Mode CSS
adjustments
• MUST include polyfills
for IE …yuck
• Register to
window.load event
• Bootstrap ‘GlobalNav’
component AS-IS into
a placeholder on the
Classic Page

32. New Project
Dependencies

33. Secondary Webpack
Configuration
• This tells the solution how to bundle for Classic
Mode
• Where to start, What to include first

34. Deploying to Classic Mode Sites
• Copy / Paste single .JS file into Style Library or Site Assets
• Link to Classic Sites Collections or Sites
• SP Editor / Chrome Extension
• PowerShell PnP

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