upgrade react-application-tenant-global-navbar to spfx v1.20.0, refactor, fix & optimize

samples/react-application-tenant-global-navbar/.gitignore

@@ -9,9 +9,11 @@ node_modules
 # Build generated files
 dist
 lib
+release
 solution
 temp
 *.sppkg
+.heft
 
 # Coverage directory used by tools like istanbul
 coverage

samples/react-application-tenant-global-navbar/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-application-tenant-global-navbar/.yo-rc.json

@@ -1,8 +1,22 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.2.0",
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.20.4",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
     "libraryName": "spfx-tenant-global-navbar",
-    "libraryId": "4556ccdc-b9eb-48d3-b2f4-2b33a8ef25ea",
-    "environment": "spo"
+    "libraryId": "bbfa2182-5e1e-4501-a900-daed71b1f11b",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "spfx-tenant-global-navbar",
+    "solutionShortDescription": "spfx-tenant-global-navbar description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "extension",
+    "extensionType": "ApplicationCustomizer"
   }
-}
+}

samples/react-application-tenant-global-navbar/README.md

@@ -19,11 +19,11 @@ extensions:
 
 Sample SharePoint Framework application customizer showing how to create a tenant global NavBar and Footer NavBar for modern sites, reading menu items from the Term Store.
 
-![The Tenant Global NavBar Application Customizer in action](./assets/Tenant-Global-NavBar.png)
+![The Tenant Global NavBar Application Customizer in action](image/README/Tenant-Global-NavBar.png)
 
 ## Used SharePoint Framework Version
 
-![SPFx v1.3](https://img.shields.io/badge/SPFx-1.3-green.svg)
+![SPFx v1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
 
 ## Applies to
 
@@ -32,15 +32,17 @@ Sample SharePoint Framework application customizer showing how to create a tenan
 
 ## Solution
 
-Solution|Author(s)
---------|---------
-react-application-tenant-global-navbar|Paolo Pialorsi (MCM, MVP, [PiaSys.com](https://piasys.com), [@PaoloPia](https://twitter.com/PaoloPia))
+| Solution                                      | Author(s)                                                                                       |
+| --------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| react-application-tenant-global-navbar        | Paolo Pialorsi (MCM, MVP,[PiaSys.com](https://piasys.com), [@PaoloPia](https://twitter.com/PaoloPia)) |
+| [email protected] | Thomas Daly (MVP, [@\_tomdaly\_](https://www.twitter.com/_tomdaly_))                              |
 
 ## Version history
 
-Version|Date|Comments
--------|----|--------
-1.0.0|September 28, 2017|Initial release
+| Version | Date               | Comments                       |
+| ------- | ------------------ | ------------------------------ |
+| 1.0.0   | September 28, 2017 | Initial release                |
+| 1.1.0   | October 2, 2024    | Upgrade SPFx v1.2.0 to v1.20.0 |
 
 ## Disclaimer
 
@@ -69,24 +71,53 @@ Version|Date|Comments
 ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"b1efedb9-b371-4f5c-a90f-3742d1842cf3":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"TopMenuTermSet":"TenantGlobalNavBar","BottomMenuTermSet":"TenantGlobalFooterBar"}}}
 ```
 
+## Term Sets Setup
+
+1) Create term set for Global Nav Bar named 'TenantGlobalNavBar' & Global Footer Bar named 'TenantGlobalFooterBar'
+   ***These are the default term set names configured into the application customizer settings***
+
+   ![1727901590592](image/README/1727901590592.png)
+2) Enable for Site Navigation
+
+   ![1727901582485](image/README/1727901582485.png)
+3) Configure Term Urls
+
+   Menu items with sub items will not be clickable even if you configure a link url
+
+   ![1727901720468](image/README/1727901720468.png)
+4) Adding Icons
+
+   You can add a custom property to include an icon
+
+   ![1727901830559](image/README/1727901830559.png)
+5) Sort Order
+
+You can control the sort order by setting the property on the Term Set
+
+![1727903457776](image/README/1727903457776.png)
+
 ## Deployment
 
 In order to deploy the sample solution in a real environment, or at least in order to skip using the debug mode, you need to execute the following steps:
+
 * publish the solution on any hosting environment or CDN and update the _cdnBasePath_ property in the write-manifests.json file with the base URL of your hosting environment
 * bundle and package the solution by executing the following commands in the command line:
+
   * `gulp bundle --ship`
   * `gulp package-solution --ship`
 * upload the content of the ./temp/deploy subfolder of the sample root folder into the target hosting environment
 * add to the "Apps for SharePoint" library of the AppCatalog in your tenant the spfx-tenant-global-navbar.sppkg file that you will find under the ./sharepoint/solution subfolder of the sample root folder
 * the sample is tenant-wide available, so you don't need to install it to every single target site, you simply need to bind the application customizer to the target site. In order to do that, you can use the PowerShell script [TenantGlobalNavBarProvisionCustomizer.ps1](./TenantGlobalNavBarProvisionCustomizer.ps1)
 
+  **NOTE** as of Sept 9th, 2024 to run the PnP PowerShell Cmdlets you must [register an Entra ID Application](https://pnp.github.io/powershell/articles/registerapplication.html) to use to run the cmdlets
+
 ## Features
 
 This project contains sample SharePoint Framework application customizer extension built using React and Office UI Fabric React. The application customizer renders a top navbar and a footer navbar, with hierarchical navigation nodes that are read from the taxonomy based managed navigation.
 
 This sample illustrates the following concepts on top of the SharePoint Framework:
 
-* using Office UI Fabric React to build SharePoint Framework application customizers that seamlessly integrate with SharePoint
+* using Fluent UI React to build SharePoint Framework application customizers that seamlessly integrate with SharePoint
 * using React to build SharePoint Framework application customizers
 * logging information to console using a custom SharePoint Framework log handler
 * consuming the SharePoint Online taxonomy service using REST requests against the _client.svc/ProcessQuery_ service of CSOM

samples/react-application-tenant-global-navbar/TenantGlobalNavBarProvisionCustomizer.ps1

@@ -1,4 +1,4 @@
-Connect-PnPOnline "https://<your-tenant>.sharepoint.com/sites/<your-site>" -UseWebLogin
+Connect-PnPOnline "https://<your-tenant>.sharepoint.com/sites/<your-site>" -Interactive -ClientId "<your-new-registered-entra-id-application-id>"
 
 Add-PnPCustomAction -Title "TenantGlobalNavBarCustomAction" `
 					-Name "TenantGlobalNavBarCustomAction" `

samples/react-application-tenant-global-navbar/assets/sample.json

@@ -9,7 +9,7 @@
       "Sample SharePoint Framework application customizer showing how to create a tenant global NavBar and Footer NavBar for modern sites, reading menu items from the Term Store."
     ],
     "creationDateTime": "2017-09-28",
-    "updateDateTime": "2017-09-28",
+    "updateDateTime": "2024-10-05",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.3"
+        "value": "1.20.0"
       }
     ],
 "tags": [],

samples/react-application-tenant-global-navbar/build.cmd

@@ -0,0 +1,9 @@
+cls
+
+call gulp clean
+
+call gulp bundle --ship
+
+call gulp package-solution --ship
+
+call explorer .\sharepoint\solution\

samples/react-application-tenant-global-navbar/config/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
   "version": "2.0",
   "bundles": {
     "tenant-global-nav-bar-application-customizer": {

samples/react-application-tenant-global-navbar/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "spfx-tenant-global-navbar",
   "accessKey": "<!-- ACCESS KEY -->"

samples/react-application-tenant-global-navbar/config/package-solution.json

@@ -1,10 +1,44 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "spfx-tenant-global-navbar-client-side-solution",
-    "id": "4556ccdc-b9eb-48d3-b2f4-2b33a8ef25ea",
-    "version": "1.0.0.0",
-    "skipFeatureDeployment": true
+    "id": "bbfa2182-5e1e-4501-a900-daed71b1f11b",
+    "version": "1.1.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.20.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "spfx-tenant-global-navbar description"
+      },
+      "longDescription": {
+        "default": "spfx-tenant-global-navbar description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "Application Extension - Deployment of custom action",
+        "description": "Deploys a custom action with ClientSideComponentId association",
+        "id": "3630d194-f102-436f-990b-48c0ddcdb05e",
+        "version": "1.0.0.0",
+        "assets": {
+          "elementManifests": [
+            "elements.xml",
+            "ClientSideInstance.xml"
+          ]
+        }
+      }
+    ]
   },
   "paths": {
     "zippedPackage": "solution/spfx-tenant-global-navbar.sppkg"

samples/react-application-tenant-global-navbar/config/sass.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/react-application-tenant-global-navbar/config/serve.json

@@ -1,10 +1,31 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
   "port": 4321,
-  "initialPage": "https://localhost:5432/workbench",
   "https": true,
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  "serveConfigurations": {
+    "default": {
+      "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
+      "customActions": {
+        "b1efedb9-b371-4f5c-a90f-3742d1842cf3": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {
+            "TopMenuTermSet": "TenantGlobalNavBar",
+            "BottomMenuTermSet": "TenantGlobalFooterBar"
+          }
+        }
+      }
+    },
+    "tenantGlobalNavBar": {
+      "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
+      "customActions": {
+        "b1efedb9-b371-4f5c-a90f-3742d1842cf3": {
+          "location": "ClientSideExtension.ApplicationCustomizer",
+          "properties": {
+            "TopMenuTermSet": "TenantGlobalNavBar",
+            "BottomMenuTermSet": "TenantGlobalFooterBar"
+          }
+        }
+      }
+    }
   }
 }

samples/react-application-tenant-global-navbar/config/write-manifests.json

@@ -1,4 +1,4 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
   "cdnBasePath": "<!-- PATH TO CDN -->"
 }

samples/react-application-tenant-global-navbar/gulpfile.js

@@ -1,6 +1,16 @@
 'use strict';
 
-const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 
-build.initialize(gulp);
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+build.initialize(require('gulp'));