From 0ba627b7edd5ceabe21130c32d71743319ffd679 Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Mon, 7 Nov 2022 22:43:55 -0500 Subject: [PATCH] Added container, upgraded readme and sample.json --- .../.devcontainer/devcontainer.json | 74 +++++++++---------- .../.devcontainer/spfx-startup.sh | 8 +- samples/js-advanced-commenting/README.md | 25 ++++--- .../js-advanced-commenting/assets/sample.json | 4 +- .../js-advanced-commenting/package-lock.json | 50 +++++++------ 5 files changed, 86 insertions(+), 75 deletions(-) diff --git a/samples/js-advanced-commenting/.devcontainer/devcontainer.json b/samples/js-advanced-commenting/.devcontainer/devcontainer.json index cac81f0bf..cafba89b1 100644 --- a/samples/js-advanced-commenting/.devcontainer/devcontainer.json +++ b/samples/js-advanced-commenting/.devcontainer/devcontainer.json @@ -1,39 +1,39 @@ // For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer { - "name": "SPFx 1.9.1", - "image": "docker.io/m365pnp/spfx:1.9.1", - // Set *default* container specific settings.json values on container create. - "settings": {}, - // Add the IDs of extensions you want installed when the container is created. - "extensions": [ - "editorconfig.editorconfig", - "dbaeumer.vscode-eslint" - ], - // Use 'forwardPorts' to make a list of ports inside the container available locally. - "forwardPorts": [ - 4321, - 35729, - 5432 - ], - "portsAttributes": { - "4321": { - "protocol": "https", - "label": "Manifest", - "onAutoForward": "silent", - "requireLocalPort": true - }, - "5432": { - "protocol": "https", - "label": "Workbench", - "onAutoForward": "silent" - }, - "35729": { - "protocol": "https", - "label": "LiveReload", - "onAutoForward": "silent", - "requireLocalPort": true - } - }, - "postCreateCommand": "bash .devcontainer/spfx-startup.sh", - "remoteUser": "node" -} \ No newline at end of file + "name": "SPFx 1.15.0", + "image": "docker.io/m365pnp/spfx:1.15.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + // Not needed for SPFx>= 1.12.1 + // "5432": { + // "protocol": "https", + // "label": "Workbench", + // "onAutoForward": "silent" + // }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} diff --git a/samples/js-advanced-commenting/.devcontainer/spfx-startup.sh b/samples/js-advanced-commenting/.devcontainer/spfx-startup.sh index ca531bdf2..8e7450b28 100644 --- a/samples/js-advanced-commenting/.devcontainer/spfx-startup.sh +++ b/samples/js-advanced-commenting/.devcontainer/spfx-startup.sh @@ -7,9 +7,11 @@ echo echo -e "\e[1;94mGenerating dev certificate\e[0m" gulp trust-dev-cert +# Convert the generated PEM certificate to a CER certificate +openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer -cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer -cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem +# Copy the PEM ecrtificate for non-Windows hosts +cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem ## add *.cer to .gitignore to prevent certificates from being saved in repo if ! grep -Fxq '*.cer' ./.gitignore @@ -28,4 +30,4 @@ fi echo echo -e "\e[1;92mReady!\e[0m" -echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" diff --git a/samples/js-advanced-commenting/README.md b/samples/js-advanced-commenting/README.md index 8bf0bf6ef..14022bdf4 100644 --- a/samples/js-advanced-commenting/README.md +++ b/samples/js-advanced-commenting/README.md @@ -35,26 +35,30 @@ 9. **_Document Preview_** can be enabled or disabled for the office files and videos. - -## Preview ![Advanced-Comments-Box](./assets/Advanced-Comments-Box.gif) ## Compatibility -![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) -![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) +This sample is optimally compatible with the following environment configuration: + +![SPFx 1.15.2](https://img.shields.io/badge/SPFx-1.15.2-green.svg) +![Node.js v16 | v14 | v12](https://img.shields.io/badge/Node.js-v16%20%7C%20v14%20%7C%20v12-green.svg) ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg) ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower") ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") -![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to SharePoint content") +![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg) +For more information about SPFx compatibility, please refer to + ## Applies to -* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) -* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) +* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) +* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) + +> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/m365devprogram) ## Prerequisites @@ -71,6 +75,7 @@ SPFxPageComments | [Sudharsan K.](https://github.com/sudharsank) ([@sudharsank]( Version|Date|Comments -------|----|-------- 1.0.0.0|Feb 05 2020|Initial release +1.1.0.0|Oct 06, 2022|Upgraded to 1.15.2 ## Minimal Path to Awesome @@ -85,15 +90,18 @@ Version|Date|Comments > This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions. ## Features + - Used [SharePoint Framework Property Controls](https://sharepoint.github.io/sp-dev-fx-property-controls/) to create the property pane controls(Text, ListPicker, Toggle) with callout. - Used [PnP](https://pnp.github.io/pnpjs/) for communication with SharePoint. - Used [jquery-comments](https://viima.github.io/jquery-comments/) for comments control with some customization. - Used [Moment.js](https://momentjs.com/) for datetime formatting. #### Local Mode + This solution doesn't work on local mode. -#### SharePoint Mode +#### SharePoint Mode4 + If you want to try on a real environment, open: [O365 Workbench](https://your-domain.sharepoint.com/_layouts/15/workbench.aspx) @@ -101,7 +109,6 @@ If you want to try on a real environment, open: [![Building an enhanced commenting web part with SPFx](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=ndHMdfFscsk "Building an enhanced commenting web part with SPFx") - ## Help We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. diff --git a/samples/js-advanced-commenting/assets/sample.json b/samples/js-advanced-commenting/assets/sample.json index ba5efa22c..23289202a 100644 --- a/samples/js-advanced-commenting/assets/sample.json +++ b/samples/js-advanced-commenting/assets/sample.json @@ -9,7 +9,7 @@ "This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments." ], "creationDateTime": "2020-02-05", - "updateDateTime": "2020-02-05", + "updateDateTime": "2022-10-06", "products": [ "SharePoint" ], @@ -20,7 +20,7 @@ }, { "key": "SPFX-VERSION", - "value": "1.9.1" + "value": "1.15.2" }, { "key": "PNPCONTROLS", diff --git a/samples/js-advanced-commenting/package-lock.json b/samples/js-advanced-commenting/package-lock.json index 9cd1dff08..ee575fc6f 100644 --- a/samples/js-advanced-commenting/package-lock.json +++ b/samples/js-advanced-commenting/package-lock.json @@ -2889,15 +2889,6 @@ } } }, - "@microsoft/microsoft-graph-clientV3": { - "version": "npm:@microsoft/microsoft-graph-client@3.0.2", - "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz", - "integrity": "sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==", - "requires": { - "@babel/runtime": "^7.12.5", - "tslib": "^2.2.0" - } - }, "@microsoft/node-core-library": { "version": "3.13.0", "resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-3.13.0.tgz", @@ -4075,6 +4066,32 @@ "adal-angular": "1.0.16", "msalLegacy": "npm:msal@1.4.12", "tslib": "2.3.1" + }, + "dependencies": { + "@microsoft/microsoft-graph-clientV3": { + "version": "npm:@microsoft/microsoft-graph-client@3.0.2", + "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz", + "integrity": "sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==", + "requires": { + "@babel/runtime": "^7.12.5", + "tslib": "^2.2.0" + } + }, + "msalLegacy": { + "version": "npm:msal@1.4.12", + "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz", + "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==", + "requires": { + "tslib": "^1.9.3" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + } } }, "@microsoft/sp-image-helper": { @@ -17576,21 +17593,6 @@ } } }, - "msalLegacy": { - "version": "npm:msal@1.4.12", - "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz", - "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==", - "requires": { - "tslib": "^1.9.3" - }, - "dependencies": { - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - } - } - }, "multicast-dns": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",