Application Top Placeholder Navigation

Summary

This is an SPFx extension acting as a Top placeholder. It uses a FluentUi CommandBar to display a search-driven navigation and diverse permission settings of artefacts in the current side on the right. It furthermore notifies if current site is enabled for external sharing or not.

Menu live in action inside a Communication site

Site and list permissions in right-side panel live in action

External Sharing and Sharing Links in right-side panel live in action

For further details see the author's blog series

Compatibility

Tested with Node version:v16.13.2 and SPFx 1.17.4 (previous version)

Tested with Node version:v18.18.2 and SPFx 1.18.2 (current version)

Used SharePoint Framework Version

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Get your own free development tenant by subscribing to Microsoft 365 developer program

Version history

Version	Date	Author	Comments
0.1	Jul 27, 2023	Markus Moeller	Initial release
1.0	Aug 11, 2023	Markus Moeller	Public release
1.1	Jan 20, 2024	Markus Moeller	Upgraded to SPFx 1.18.2

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

---

Minimal Path to Awesome

• Clone this repository

• Ensure that you are at the solution folder

• in the command-line run:

  • npm install
  • gulp serve --nobrowser

• To grant necessary MS Graph permissions for some functionality

  • Either grant them manually (see package-solution.json which ones)
  • Grant them via Admin center
  • in the command-line run:
  • gulp bundle --ship
  • gulp package-solution --ship
  • Upload app to app catalog
  • Enable
  • Grant requested permissions via API access as suggested

• Open a SharePoint site of your choice

• Attach the following to your site url:

  ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"315298b1-ad03-4730-8423-0a07941a96d9":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"useTeamsites":true,"useCommsites": true,"useHubsites": true,"useTeams": true,"useGraph": true}}}
  

• Confirm 'Load Debug Scripts'

• Play around with the properties in above's url

Features

• Create a SharePoint framework extension application placeholder
• Use the MSGraphClientV3 to connect to Microsoft Graph
  • Use the Microsoft Search API to query data
  • Use Microsoft Graph API to handle sharing links
• Use FluentUI CommandBar, ContextualMenu, Dialog, List, Panel, PersonaInitialsColor, Pivot, TextField (incl 'Clear' icon)
• Use SharePoint Rest API to work with permissions

References

• Getting started with SharePoint Framework
• Building for Microsoft teams
• Use Microsoft Graph in your solution
• Publish SharePoint Framework applications to the Marketplace
• Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development