Upgrade jquery-application-toastr to SPFx v1.20.0

samples/jquery-application-toastr/.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/jquery-application-toastr/.npmignore

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

samples/jquery-application-toastr/.nvmrc

@@ -0,0 +1 @@
+v18.20.4

samples/jquery-application-toastr/.yo-rc.json

@@ -1,8 +1,22 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.4.1",
+    "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": "jquery-application-toastr",
     "libraryId": "461c7ee8-3ab9-47ee-b52d-44c77087d9e8",
-    "environment": "spo"
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "jquery-application-toastr",
+    "solutionShortDescription": "jquery-application-toastr description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "extension",
+    "extensionType": "ApplicationCustomizer"
   }
-}
+}

samples/jquery-application-toastr/README.md

@@ -16,12 +16,14 @@ extensions:
 # SPFx Toastr Application Customizer
 
 ## Summary
+
 Sample SharePoint Framework application customizer extension that shows toast notifications configured from a SharePoint list. Demonstrates jQuery module loading, barrel configuration, promise chaining, and localStorage caching.
 
 ![Toasts shown on a Communication Site](./assets/spfxToastr-Preview.PNG)
 
-## Used SharePoint Framework version 
-![1.4.1](https://img.shields.io/badge/version-1.4.1-green.svg)
+## Used SharePoint Framework version
+
+![1.20.0](https://img.shields.io/badge/version-1.20.0-green.svg)
 
 ## Applies to
 
@@ -30,22 +32,25 @@ Sample SharePoint Framework application customizer extension that shows toast no
 
 ## Solution
 
-Solution|Author(s)
---------|---------
-jquery-application-toastr | Chris Kent ([thechriskent.com](https://thechriskent.com), [@thechriskent](https://twitter.com/thechriskent))
+| Solution                        | Author(s)                                                                                              |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| jquery-application-toastr       | Chris Kent ([thechriskent.com](https://thechriskent.com), [@thechriskent](https://twitter.com/thechriskent)) |
+| [email protected] | Thomas Daly (MVP,[@\_tomdaly\_](https://www.twitter.com/_tomdaly_))                                       |
 
 ## Version history
 
-Version|Date|Comments
--------|----|--------
-1.0|July 9, 2017|Initial release
-1.1|August 20, 2017|Updated to use framework 1.1.3
-1.2|August 30, 2017|Updated to SPFx Release Candidate 1.2.0
-1.3|September 27, 2017|Updated for SPFx GA 1.3.0
-1.4|February 1, 2018|Updated to SPFx 1.4.0
-1.5|December 6, 2021|Fixed issue with icons and updated to SPFx 1.4.1
+| Version | Date               | Comments                                         |
+| ------- | ------------------ | ------------------------------------------------ |
+| 1.0     | July 9, 2017       | Initial release                                  |
+| 1.1     | August 20, 2017    | Updated to use framework 1.1.3                   |
+| 1.2     | August 30, 2017    | Updated to SPFx Release Candidate 1.2.0          |
+| 1.3     | September 27, 2017 | Updated for SPFx GA 1.3.0                        |
+| 1.4     | February 1, 2018   | Updated to SPFx 1.4.0                            |
+| 1.5     | December 6, 2021   | Fixed issue with icons and updated to SPFx 1.4.1 |
+| 1.6     | October 4, 2024    | Updated to SPFx 1.20.0                           |
 
 ## 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.**
 
 ---
@@ -66,6 +71,7 @@ Version|Date|Comments
   - Stand in awe of the glory of Toast
 
 ## Features
+
 SPFx Toastr utilizes Toastr to demonstrate how to display beautiful notifications in a familiar and intuitive manner.
 
 This extension illustrates the following concepts:
@@ -82,13 +88,15 @@ This extension illustrates the following concepts:
 - Optionally, **PnP Remote Provisioning** PowerShell list deployment _(see below)_
 
 ## Debug URL for testing
+
 Here's a debug querystring for testing this sample:
 
 ```
 ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a861c815-e425-416d-9520-04bcdf557e27":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{}}}
 ```
 
 Your URL will look similar to the following (replace with your domain and site address):
+
 ```
 https://yourtenant.sharepoint.com/sites/yoursite?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a861c815-e425-416d-9520-04bcdf557e27":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{}}}
 ```
@@ -127,24 +135,25 @@ You can always manually create the list using the SharePoint UI:
 2. Name the list _**Toast**_ and click **Create**
 3. Add and configure the columns as listed below:
 
-Column | Type | Required | Details
---- | --- | --- | ---
-Title | Text | Yes |
-Message | Text | Yes |
-Severity | Choice | Yes | Info, Warning, Error, Success
-StartDate | DateTime | Yes | Date and Time, Default =Today
-EndDate | DateTime | Yes | Date and Time, Default =Today+7
-Frequency | Choice | Yes | Once, Once Per Day, Always
-Enabled | Yes/No | | Default = Yes
+| Column    | Type     | Required | Details                         |
+| --------- | -------- | -------- | ------------------------------- |
+| Title     | Text     | Yes      |                                 |
+| Message   | Text     | Yes      |                                 |
+| Severity  | Choice   | Yes      | Info, Warning, Error, Success   |
+| StartDate | DateTime | Yes      | Date and Time, Default =Today   |
+| EndDate   | DateTime | Yes      | Date and Time, Default =Today+7 |
+| Frequency | Choice   | Yes      | Once, Once Per Day, Always      |
+| Enabled   | Yes/No   |          | Default = Yes                   |
 
 ## Deploying to your tenant
+
 - In the command line navigate to **samples/jquery-application-toastr** and run:
   - `gulp bundle --ship`
   - `gulp package-solution --ship`
 - Open the **samples/jquery-application-toastr/sharepoint** folder
   - Drag the **toastr.sppkg** onto the **Apps for SharePoint** library of your app catalog
   - Check the box for tenant wide deployment and click **Deploy**:
-  ![Deploy to Catalog](./assets/DeployToCatalog.png)
+    ![Deploy to Catalog](./assets/DeployToCatalog.png)
 - You'll need to add the Custom Action to your site(s) using one of the methods below. You'll also need the list added using one of the options listed above in the List Deployment section
 
 ### Adding the custom action to your site
@@ -174,6 +183,7 @@ You'll be prompted for your credentials and then the action will be added. The o
 > Read More Here: [Introducing the PnP Provisioning Engine](https://github.com/SharePoint/PnP-Guidance/blob/551b9f6a66cf94058ba5497e310d519647afb20c/articles/Introducing-the-PnP-Provisioning-Engine.md)
 
 ### Option 2: Use the SPFx Extensions CLI
+
 You can use the [spfx-extensions-cli](https://www.npmjs.com/package/spfx-extensions-cli) to manage your extension custom actions across your sites.
 
 Install the CLI if you haven't already:
@@ -192,9 +202,5 @@ Remember, that you'll also need the list with some configured notifications in o
 
 > You can see what extensions you have on your site with `spfx-ext --site`
 
-## Known issues
-- UI Fabric Icons are not currently displaying in SPFx Extensions: 
-  - [Issue 1279](https://github.com/SharePoint/sp-dev-docs/issues/1279) - Solution has been found, but fix has not yet been implemented
-
 
-<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/jquery-application-toastr" />
+`<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/jquery-application-toastr" />`

samples/jquery-application-toastr/assets/sample.json

@@ -9,7 +9,7 @@
       "Sample SharePoint Framework application customizer extension that shows toast notifications configured from a SharePoint list. Demonstrates jQuery module loading, barrel configuration, promise chaining, and localStorage caching."
     ],
     "creationDateTime": "2018-02-01",
-    "updateDateTime": "2018-02-01",
+    "updateDateTime": "2024-10-05",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.4.0"
+        "value": "1.20.0"
       }
     ],
 "tags": [],

samples/jquery-application-toastr/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": {
     "spfx-toastr-application-customizer": {
@@ -11,10 +11,7 @@
       ]
     }
   },
-  "externals": {
-    "jquery": "https://code.jquery.com/jquery-2.2.4.min.js",
-    "toastr": "https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
-  },
+  "externals": {},
   "localizedResources": {
     "SpfxToastrApplicationCustomizerStrings": "lib/extensions/spfxToastr/loc/{locale}.js"
   }

samples/jquery-application-toastr/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": "jquery-application-toastr",
   "accessKey": "<!-- ACCESS KEY -->"

samples/jquery-application-toastr/config/package-solution.json

@@ -1,14 +1,47 @@
 {
-  "$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": "Toastr Notifications",
+    "name": "jquery-application-toastr-client-side-solution",
     "id": "461c7ee8-3ab9-47ee-b52d-44c77087d9e8",
-    "version": "1.4.0.0",
+    "version": "1.6.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
-    "iconPath": "AppIcon.png"
+    "isDomainIsolated": false,
+    "iconPath": "AppIcon.png",
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.20.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "jquery-application-toastr description"
+      },
+      "longDescription": {
+        "default": "jquery-application-toastr description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "Application Extension - Deployment of custom action",
+        "description": "Deploys a custom action with ClientSideComponentId association",
+        "id": "e19853ac-f257-448d-aba4-45b4461143a0",
+        "version": "1.6.0.0",
+        "assets": {
+          "elementManifests": [
+            "elements.xml",
+            "ClientSideInstance.xml"
+          ]
+        }
+      }
+    ]
   },
   "paths": {
-    "zippedPackage": "solution/toastr.sppkg"
+    "zippedPackage": "solution/jquery-application-toastr.sppkg"
   }
 }

samples/jquery-application-toastr/config/sass.json

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

samples/jquery-application-toastr/config/serve.json

@@ -1,10 +1,10 @@
 {
-  "$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,
   "https": true,
   "serveConfigurations": {
     "default": {
-      "pageUrl": "https://thechriskent.sharepoint.com/sites/WarriorHorses",
+      "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
       "customActions": {
         "a861c815-e425-416d-9520-04bcdf557e27": {
           "location": "ClientSideExtension.ApplicationCustomizer",
@@ -13,7 +13,7 @@
       }
     },
     "spfxToastr": {
-      "pageUrl": "https://thechriskent.sharepoint.com/sites/WarriorHorses",
+      "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
       "customActions": {
         "a861c815-e425-416d-9520-04bcdf557e27": {
           "location": "ClientSideExtension.ApplicationCustomizer",

samples/jquery-application-toastr/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/jquery-application-toastr/gulpfile.js

@@ -1,7 +1,16 @@
 'use strict';
 
-const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
+
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
-build.initialize(gulp);
+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'));