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

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]

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

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

“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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/ SP PnP-JS

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?

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

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

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

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

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=https://localhost:4321/temp/manifests.js&loadSPFX=true

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

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

Slides, Demos & Contact https://www.slideshare.net/tommdaly https://github.com/tom- daly/demos/tree/master/sps-ahmedabad Email: thomasd@sohodragon.com Twitter: @_tomdaly_ LinkedIn: profile