Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cross Site Collection Navigation with SPFX, PowerShell PnP, PnP-JS, Office UI


Published on

Cross Site Collection Navigation with SPFX, PowerShell PnP, PnP-JS, Office UI

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cross Site Collection Navigation with SPFX, PowerShell PnP, PnP-JS, Office UI

  1. 1. Presented by: Thomas Daly Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
  2. 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 [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]
  3. 3. SharePoint / Office 365 / Azure / Data Intranets - Migrations - Development Recruiting - Staffing
  4. 4. Outline • Background • Solution Architecture • Creating Templates via PnP Powershell • Create an SPFx Extension • Application Customizer • Deployment & Development • Other Examples / Enhancements
  5. 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. 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. 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. 8. Mega Menu Available Now
  9. 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. 10. SP LIST Site 1 Site 2 Site 3 Root Site Site Collections Global Nav Package App Catalog
  11. 11. Date Source Variations Using List Items 01 Using Text / HTML Files 02 Using Managed Meta Data 03
  12. 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. 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. 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. 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. 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. 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. 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. 19. Global Navigation • Define Interfaces - TypeScript is your friend! • Global Navigation Provider • Root Global Nav Component • Nav Node Components (both parent & child)
  20. 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 •
  21. 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. 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. 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. 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. 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. • deployment
  26. 26. Demos Building list via PnP Building an SPFx Application Customizer Add Data Calls with PnP JS calls Show Site Menu Variation
  27. 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. 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. 29. 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
  30. 30. 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
  31. 31. New Project Dependencies
  32. 32. Secondary Webpack Configuration • This tells the solution how to bundle for Classic Mode • Where to start, What to include first
  33. 33. 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
  34. 34. Slides, Demos & Contact • • navigation Email: Twitter: @_tomdaly_ LinkedIn: profile