2. Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
SPS Ahmedabad 2018
Presented by: Thomas Daly

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 [10th year]
NJ & NYC Global Office 365 Dev Bootcamp Organizer
NJ Azure Bootcamp Organizer
SharePoint Saturday NJ Organizer [ ]
My SharePoint Blog
Git Hub [corp directory controls / o365 sticky footer / bootstrap navigation]

5. SharePoint / Office 365 / Azure / Data
Intranets - Migrations - Development
Recruiting - Staffing
Hiring – Ahmedabad Office

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

7. “Modern“ Sites have flat architecture
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
Background

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

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

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. Site Collections
Site 1
Root Site
App Catalog
SP LIST
Site 2
Global Nav Package
Site 3

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

13. 1 2 3 Concerns Users must have access to the navigation source
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
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
SharePoint List Structure

15. List Deployment Options
Manually Make List 1
Create list schema for deployment via SPFx 2
Create list programmatically via PowerShell PnP 3
Create list schema via PowerShell PnP, use the provisioning engine 4
Manually – not feasible, repeatable, weird list field formats
Via spfx – list deployed 1 time with every package install – unnecessary for each site to have this list
Could do this, lomit
Best way in my opinion for total control over schema and most powerfull

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

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
SharePoint Framework (SPFx) Extensions

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
Application Customizer

19. Adding React Elements
Include libraries & types similar to SPFx1.6 Web Part
npm –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. PnP JS is a collection of fluent libraries for consuming SharePoint, Graph, and Office 365 REST APIs in a type-safe way
SP PnP-JS

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
Office UI Fabric

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

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

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
INSERT PICTURE FOR

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. Slides, Demos & Contact https://www.slideshare.net/tommdaly
daly/demos/tree/master/sps-ahmedabad
LinkedIn: profile