Cross Site Collection Navigation

Cross Site Collection Navigation

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 [10 th 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

6. Background

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

12. Concerns

13. SharePoint List Structure

14. List Deployment Options

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/[email protected] @types/[email protected] [email protected] [email protected] –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

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: [email protected] Twitter: @_ tomdaly _ LinkedIn: profile