diff --git a/samples/js-display-list/README.md b/samples/js-display-list/README.md index c8ae2d2ac..9d0a9d28c 100644 --- a/samples/js-display-list/README.md +++ b/samples/js-display-list/README.md @@ -14,14 +14,16 @@ extensions: # Display List JavaScript Client-Side Web Part ## Summary -This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list. -![Screeshot of the Display List web part](./assets/display-list-preview.png). +This simplistic sample web part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list. + +![Screenshot of the Display List web part](./assets/display-list-preview.png). > Does only show data when hosted in SharePoint. No mock data at this point for local testing the rendering. ## Used SharePoint Framework Version -![drop](https://img.shields.io/badge/drop-GA-green.svg) + +![SPFx 1.11.0](https://img.shields.io/badge/drop-1.11.0-green.svg) ## Applies to @@ -33,8 +35,10 @@ This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoi Solution|Author(s) --------|--------- -js-display-list|Naamat Al-Aswad, P.Eng. -Updated to GA Version| Velin Georgiev ([@VelinGeorgiev](https://twitter.com/velingeorgiev)) +js-display-list| Naamat Al-Aswad, P.Eng. +js-display-list| Velin Georgiev ([@VelinGeorgiev](https://twitter.com/velingeorgiev)) (Updated to GA Version) +js-display-list| Ryan Schouten ([@ShrPntKnight](https://twitter.com/ShrPntKnight)) (Upgraded to SPFx 1.11.0) + ## Version history @@ -43,9 +47,11 @@ Version|Date|Comments -------|----|-------- 1.0|September 22, 2016|Initial release 1.1|May 15, 2017|Updated to GA Version +2.0|August 29, 2020|Upgraded to SPFx 1.11.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.** --- @@ -61,6 +67,7 @@ Version|Date|Comments - Basic functionality can be tested locally, data is only shown when used in context of SharePoint ## Features + The js-display-list web part displays the content of the list specified in the web part properties pane. This Web Part illustrates the following concepts on top of the SharePoint Framework: diff --git a/samples/js-display-list/config/package-solution.json b/samples/js-display-list/config/package-solution.json index b43d49800..54d2a69b0 100644 --- a/samples/js-display-list/config/package-solution.json +++ b/samples/js-display-list/config/package-solution.json @@ -3,18 +3,11 @@ "solution": { "name": "js-display-list-client-side-solution", "id": "faf13055-4551-491c-8bbf-a00b30adfd54", - "version": "1.0.0.0", + "version": "2.0.0.0", "isDomainIsolated": false, - "includeClientSideAssets": true, - "developer": { - "name": "Contoso", - "privacyUrl": "https://contoso.com/privacy", - "termsOfUseUrl": "https://contoso.com/terms-of-use", - "websiteUrl": "https://contoso.com/my-app", - "mpnId": "000000" - } + "includeClientSideAssets": true }, "paths": { "zippedPackage": "solution/js-display-list.spapp" } -} \ No newline at end of file +} diff --git a/samples/js-display-list/package.json b/samples/js-display-list/package.json index 6bb508860..72e5b046c 100644 --- a/samples/js-display-list/package.json +++ b/samples/js-display-list/package.json @@ -1,6 +1,6 @@ { "name": "js-display-list", - "version": "0.0.2", + "version": "2.0.0", "private": true, "engines": { "node": ">=0.10.0" diff --git a/samples/js-display-list/upgrade-report.md b/samples/js-display-list/upgrade-report.md deleted file mode 100644 index 6f740c502..000000000 --- a/samples/js-display-list/upgrade-report.md +++ /dev/null @@ -1,1671 +0,0 @@ -# Upgrade project js-display-list to v1.11.0 - -Date: 8/25/2020 - -## Findings - -Following is the list of steps required to upgrade your project to SharePoint Framework version 1.11.0. [Summary](#Summary) of the modifications is included at the end of the report. - -### FN001001 @microsoft/sp-core-library | Required - -Upgrade SharePoint Framework dependency package @microsoft/sp-core-library - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-core-library@1.11.0 -``` - -File: [./package.json](./package.json) - -### FN001004 @microsoft/sp-webpart-base | Required - -Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-webpart-base@1.11.0 -``` - -File: [./package.json](./package.json) - -### FN001007 @types/webpack-env | Required - -Remove SharePoint Framework dependency package @types/webpack-env - -Execute the following command: - -```sh -npm un -S @types/webpack-env -``` - -File: [./package.json](./package.json) - -### FN001021 @microsoft/sp-property-pane | Required - -Install SharePoint Framework dependency package @microsoft/sp-property-pane - -Execute the following command: - -```sh -npm i -SE @microsoft/sp-property-pane@1.11.0 -``` - -File: [./package.json](./package.json) - -### FN002001 @microsoft/sp-build-web | Required - -Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web - -Execute the following command: - -```sh -npm i -DE @microsoft/sp-build-web@1.11.0 -``` - -File: [./package.json](./package.json) - -### FN002002 @microsoft/sp-module-interfaces | Required - -Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces - -Execute the following command: - -```sh -npm i -DE @microsoft/sp-module-interfaces@1.11.0 -``` - -File: [./package.json](./package.json) - -### FN002003 @microsoft/sp-webpart-workbench | Required - -Upgrade SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench - -Execute the following command: - -```sh -npm i -DE @microsoft/sp-webpart-workbench@1.11.0 -``` - -File: [./package.json](./package.json) - -### FN002009 @microsoft/sp-tslint-rules | Required - -Install SharePoint Framework dev dependency package @microsoft/sp-tslint-rules - -Execute the following command: - -```sh -npm i -DE @microsoft/sp-tslint-rules@1.11.0 -``` - -File: [./package.json](./package.json) - -### FN002013 @types/webpack-env | Required - -Install SharePoint Framework dev dependency package @types/webpack-env - -Execute the following command: - -```sh -npm i -DE @types/webpack-env@1.13.1 -``` - -File: [./package.json](./package.json) - -### FN002014 @types/es6-promise | Required - -Install SharePoint Framework dev dependency package @types/es6-promise - -Execute the following command: - -```sh -npm i -DE @types/es6-promise@0.0.33 -``` - -File: [./package.json](./package.json) - -### FN006004 package-solution.json developer | Optional - -In package-solution.json add developer section - -In file [./config/package-solution.json](./config/package-solution.json) update the code as follows: - -```json -{ - "solution": { - "developer": { - "name": "Contoso", - "privacyUrl": "https://contoso.com/privacy", - "termsOfUseUrl": "https://contoso.com/terms-of-use", - "websiteUrl": "https://contoso.com/my-app", - "mpnId": "000000" - } - } -} -``` - -File: [./config/package-solution.json](./config/package-solution.json) - -### FN010001 .yo-rc.json version | Recommended - -Update version in .yo-rc.json - -In file [./.yo-rc.json](./.yo-rc.json) update the code as follows: - -```json -{ - "@microsoft/generator-sharepoint": { - "version": "1.11.0" - } -} -``` - -File: [./.yo-rc.json](./.yo-rc.json) - -### FN012012 tsconfig.json include property | Required - -Update tsconfig.json include property - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "include": [ - "src/**/*.tsx" - ] -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN002012 @microsoft/rush-stack-compiler-3.3 | Required - -Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-3.3 - -Execute the following command: - -```sh -npm i -DE @microsoft/rush-stack-compiler-3.3@0.3.5 -``` - -File: [./package.json](./package.json) - -### FN012017 tsconfig.json extends property | Required - -Update tsconfig.json extends property - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json" -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN016004 Property pane property import change to @microsoft/sp-property-pane | Required - -Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package - -In file [src\webparts\jsDisplayList\JsDisplayListWebPart.ts](src\webparts\jsDisplayList\JsDisplayListWebPart.ts) update the code as follows: - -```ts -import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base"; -import { IPropertyPaneConfiguration, PropertyPaneDropdown, IPropertyPaneDropdownOption } from "@microsoft/sp-property-pane"; -``` - -File: [src\webparts\jsDisplayList\JsDisplayListWebPart.ts:1:1](src\webparts\jsDisplayList\JsDisplayListWebPart.ts) - -### FN021001 main | Required - -Add package.json property - -In file [./package.json](./package.json) update the code as follows: - -```json -{ - "main": "lib/index.js" -} -``` - -File: [./package.json](./package.json) - -### FN011011 Web part manifest supportedHosts | Required - -Update the supportedHosts property in the manifest - -In file [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) update the code as follows: - -```json -{ - "supportedHosts": ["SharePointWebPart"] -} -``` - -File: [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) - -### FN012014 tsconfig.json compiler options inlineSources | Required - -Update tsconfig.json inlineSources value - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "inlineSources": false - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012015 tsconfig.json compiler options strictNullChecks | Required - -Update tsconfig.json strictNullChecks value - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "strictNullChecks": false - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012016 tsconfig.json compiler options noUnusedLocals | Required - -Update tsconfig.json noUnusedLocals value - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "noUnusedLocals": false - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN018001 Web part Microsoft Teams tab resources folder | Optional - -Create folder for Microsoft Teams tab resources - -Execute the following command: - -```sh -mkdir F:\Code\sp-dev-fx-webparts\samples\js-display-list/teams -``` - -File: [teams](teams) - -### FN018003 Web part Microsoft Teams tab small icon | Optional - -Create Microsoft Teams tab small icon for the web part - -Execute the following command: - -```sh -cp C:\Users\ryant\AppData\Roaming\npm\node_modules\@pnp\cli-microsoft365\dist\m365\spfx\commands\project\project-upgrade\assets\tab20x20.png F:\Code\sp-dev-fx-webparts\samples\js-display-list\teams\1b513296-0d6c-4992-880a-007876428daa_outline.png -``` - -File: [teams\1b513296-0d6c-4992-880a-007876428daa_outline.png](teams\1b513296-0d6c-4992-880a-007876428daa_outline.png) - -### FN018004 Web part Microsoft Teams tab large icon | Optional - -Create Microsoft Teams tab large icon for the web part - -Execute the following command: - -```sh -cp C:\Users\ryant\AppData\Roaming\npm\node_modules\@pnp\cli-microsoft365\dist\m365\spfx\commands\project\project-upgrade\assets\tab96x96.png F:\Code\sp-dev-fx-webparts\samples\js-display-list\teams\1b513296-0d6c-4992-880a-007876428daa_color.png -``` - -File: [teams\1b513296-0d6c-4992-880a-007876428daa_color.png](teams\1b513296-0d6c-4992-880a-007876428daa_color.png) - -### FN006003 package-solution.json isDomainIsolated | Required - -Update package-solution.json isDomainIsolated - -In file [./config/package-solution.json](./config/package-solution.json) update the code as follows: - -```json -{ - "solution": { - "isDomainIsolated": false - } -} -``` - -File: [./config/package-solution.json](./config/package-solution.json) - -### FN010007 .yo-rc.json isDomainIsolated | Recommended - -Update isDomainIsolated in .yo-rc.json - -In file [./.yo-rc.json](./.yo-rc.json) update the code as follows: - -```json -{ - "@microsoft/generator-sharepoint": { - "isDomainIsolated": false - } -} -``` - -File: [./.yo-rc.json](./.yo-rc.json) - -### FN019001 tslint.json rulesDirectory | Required - -Remove rulesDirectory from tslint.json - -In file [./tslint.json](./tslint.json) update the code as follows: - -```json -{ - "rulesDirectory": [] -} -``` - -File: [./tslint.json](./tslint.json) - -### FN019002 tslint.json extends | Required - -Update tslint.json extends property - -In file [./tslint.json](./tslint.json) update the code as follows: - -```json -{ - "extends": "@microsoft/sp-tslint-rules/base-tslint.json" -} -``` - -File: [./tslint.json](./tslint.json) - -### FN002008 tslint-microsoft-contrib | Required - -Install SharePoint Framework dev dependency package tslint-microsoft-contrib - -Execute the following command: - -```sh -npm i -DE tslint-microsoft-contrib@5.0.0 -``` - -File: [./package.json](./package.json) - -### FN012011 tsconfig.json compiler options outDir | Required - -Update tsconfig.json outDir value - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "outDir": "lib" - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012013 tsconfig.json exclude property | Required - -Update tsconfig.json exclude property - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "exclude": [ - "node_modules", - "lib" - ] -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN015004 config\tslint.json | Required - -Remove file config\tslint.json - -Execute the following command: - -```sh -rm config\tslint.json -``` - -File: [config\tslint.json](config\tslint.json) - -### FN015005 src\index.ts | Required - -Add file src\index.ts - -Execute the following command: - -```sh -cat > src\index.ts << EOF -// A file is required to be in the root of the /src directory by the TypeScript compiler - -EOF -``` - -File: [src\index.ts](src\index.ts) - -### FN001010 @types/es6-promise | Required - -Install SharePoint Framework dependency package @types/es6-promise - -Execute the following command: - -```sh -npm i -SE @types/es6-promise@0.0.33 -``` - -File: [./package.json](./package.json) - -### FN002005 @types/chai | Required - -Upgrade SharePoint Framework dev dependency package @types/chai - -Execute the following command: - -```sh -npm i -DE @types/chai@3.4.34 -``` - -File: [./package.json](./package.json) - -### FN002006 @types/mocha | Required - -Upgrade SharePoint Framework dev dependency package @types/mocha - -Execute the following command: - -```sh -npm i -DE @types/mocha@2.2.38 -``` - -File: [./package.json](./package.json) - -### FN003001 config.json schema | Required - -Update config.json schema URL - -In file [./config/config.json](./config/config.json) update the code as follows: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json" -} -``` - -File: [./config/config.json](./config/config.json) - -### FN005001 deploy-azure-storage.json schema | Required - -Update deploy-azure-storage.json schema URL - -In file [./config/deploy-azure-storage.json](./config/deploy-azure-storage.json) update the code as follows: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json" -} -``` - -File: [./config/deploy-azure-storage.json](./config/deploy-azure-storage.json) - -### FN006001 package-solution.json schema | Required - -Update package-solution.json schema URL - -In file [./config/package-solution.json](./config/package-solution.json) update the code as follows: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json" -} -``` - -File: [./config/package-solution.json](./config/package-solution.json) - -### FN007001 serve.json schema | Required - -Update serve.json schema URL - -In file [./config/serve.json](./config/serve.json) update the code as follows: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json" -} -``` - -File: [./config/serve.json](./config/serve.json) - -### FN009001 write-manifests.json schema | Required - -Update write-manifests.json schema URL - -In file [./config/write-manifests.json](./config/write-manifests.json) update the code as follows: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json" -} -``` - -File: [./config/write-manifests.json](./config/write-manifests.json) - -### FN010002 .yo-rc.json isCreatingSolution | Recommended - -Update isCreatingSolution in .yo-rc.json - -In file [./.yo-rc.json](./.yo-rc.json) update the code as follows: - -```json -{ - "@microsoft/generator-sharepoint": { - "isCreatingSolution": true - } -} -``` - -File: [./.yo-rc.json](./.yo-rc.json) - -### FN010003 .yo-rc.json packageManager | Recommended - -Update packageManager in .yo-rc.json - -In file [./.yo-rc.json](./.yo-rc.json) update the code as follows: - -```json -{ - "@microsoft/generator-sharepoint": { - "packageManager": "npm" - } -} -``` - -File: [./.yo-rc.json](./.yo-rc.json) - -### FN010004 .yo-rc.json componentType | Recommended - -Update componentType in .yo-rc.json - -In file [./.yo-rc.json](./.yo-rc.json) update the code as follows: - -```json -{ - "@microsoft/generator-sharepoint": { - "componentType": "webpart" - } -} -``` - -File: [./.yo-rc.json](./.yo-rc.json) - -### FN011001 Web part manifest schema | Required - -Update schema in manifest - -In file [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) update the code as follows: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json" -} -``` - -File: [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) - -### FN012001 tsconfig.json module | Required - -Update module type in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "module": "esnext" - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012002 tsconfig.json moduleResolution | Required - -Update moduleResolution in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "moduleResolution": "node" - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN006002 package-solution.json includeClientSideAssets | Required - -Update package-solution.json includeClientSideAssets - -In file [./config/package-solution.json](./config/package-solution.json) update the code as follows: - -```json -{ - "solution": { - "includeClientSideAssets": true - } -} -``` - -File: [./config/package-solution.json](./config/package-solution.json) - -### FN012003 tsconfig.json skipLibCheck | Required - -Update skipLibCheck in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "skipLibCheck": true - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012004 tsconfig.json typeRoots ./node_modules/@types | Required - -Add ./node_modules/@types to typeRoots in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "typeRoots": [ - "./node_modules/@types" - ] - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012005 tsconfig.json typeRoots ./node_modules/@microsoft | Required - -Add ./node_modules/@microsoft to typeRoots in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "typeRoots": [ - "./node_modules/@microsoft" - ] - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012006 tsconfig.json es6-collections types | Required - -Remove es6-collections type in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "types": [ - "es6-collections" - ] - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012007 tsconfig.json es5 lib | Required - -Add es5 lib in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "lib": [ - "es5" - ] - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012008 tsconfig.json dom lib | Required - -Add dom lib in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "lib": [ - "dom" - ] - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN012009 tsconfig.json es2015.collection lib | Required - -Add es2015.collection lib in tsconfig.json - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "lib": [ - "es2015.collection" - ] - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN013001 gulpfile.js ms-Grid sass suppression | Recommended - -Add suppression for ms-Grid sass warning - -In file [./gulpfile.js](./gulpfile.js) update the code as follows: - -```js -build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); -``` - -File: [./gulpfile.js](./gulpfile.js) - -### FN002007 ajv | Required - -Install SharePoint Framework dev dependency package ajv - -Execute the following command: - -```sh -npm i -DE ajv@5.2.2 -``` - -File: [./package.json](./package.json) - -### FN014002 .vscode/extensions.json | Recommended - -In the .vscode folder, add the extensions.json file - -In file [.vscode/extensions.json](.vscode/extensions.json) update the code as follows: - -```json -{ - "recommendations": [ - "msjsdiag.debugger-for-chrome" - ] -} -``` - -File: [.vscode/extensions.json](.vscode/extensions.json) - -### FN014003 .vscode/launch.json | Recommended - -In the .vscode folder, add the launch.json file - -In file [.vscode/launch.json](.vscode/launch.json) update the code as follows: - -```json -{ - /** - Install Chrome Debugger Extension for Visual Studio Code - to debug your components with the Chrome browser: - https://aka.ms/spfx-debugger-extensions - */ - "version": "0.2.0", - "configurations": [{ - "name": "Local workbench", - "type": "chrome", - "request": "launch", - "url": "https://localhost:4321/temp/workbench.html", - "webRoot": "${workspaceRoot}", - "sourceMaps": true, - "sourceMapPathOverrides": { - "webpack:///../../../src/*": "${webRoot}/src/*", - "webpack:///../../../../src/*": "${webRoot}/src/*", - "webpack:///../../../../../src/*": "${webRoot}/src/*" - }, - "runtimeArgs": [ - "--remote-debugging-port=9222" - ] - }, - { - "name": "Hosted workbench", - "type": "chrome", - "request": "launch", - "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", - "webRoot": "${workspaceRoot}", - "sourceMaps": true, - "sourceMapPathOverrides": { - "webpack:///../../../src/*": "${webRoot}/src/*", - "webpack:///../../../../src/*": "${webRoot}/src/*", - "webpack:///../../../../../src/*": "${webRoot}/src/*" - }, - "runtimeArgs": [ - "--remote-debugging-port=9222", - "-incognito" - ] - } - ] -} -``` - -File: [.vscode/launch.json](.vscode/launch.json) - -### FN011005 Web part manifest default group | Required - -In the manifest update the default group value - -In file [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) update the code as follows: - -```json -{ - "preconfiguredEntries": [{ - "group": { "default": "Other" } - }] -} -``` - -File: [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) - -### FN003002 config.json version | Required - -Update config.json version number - -In file [./config/config.json](./config/config.json) update the code as follows: - -```json -{ - "version": "2.0" -} -``` - -File: [./config/config.json](./config/config.json) - -### FN003003 config.json bundles | Required - -In config.json add the 'bundles' property - -In file [./config/config.json](./config/config.json) update the code as follows: - -```json -{ - "bundles": { - "js-display-list-web-part": { - "components": [ - { - "entrypoint": "./lib/webparts/jsDisplayList/JsDisplayListWebPart.js", - "manifest": "./src/webparts/jsDisplayList/JsDisplayListWebPart.manifest.json" - } - ] - } - } -} -``` - -File: [./config/config.json](./config/config.json) - -### FN003004 config.json entries | Required - -Remove the "entries" property in ./config/config.json - -In file [./config/config.json](./config/config.json) update the code as follows: - -```json -{ - "entries": [ - { - "entry": "./lib/webparts/jsDisplayList/JsDisplayListWebPart.js", - "manifest": "./src/webparts/jsDisplayList/JsDisplayListWebPart.manifest.json", - "outputPath": "./dist/js-display-list.bundle.js" - } - ] -} -``` - -File: [./config/config.json](./config/config.json) - -### FN003005 Update path of the localized resource | Required - -In the config.json file, update the path of the localized resource - -In file [./config/config.json](./config/config.json) update the code as follows: - -```json -{ - "localizedResources": { - "jsDisplayListStrings": "lib/webparts/jsDisplayList/loc/{locale}.js" - } -} -``` - -File: [./config/config.json](./config/config.json) - -### FN001018 @microsoft/sp-client-base | Required - -Remove SharePoint Framework dependency package @microsoft/sp-client-base - -Execute the following command: - -```sh -npm un -S @microsoft/sp-client-base -``` - -File: [./package.json](./package.json) - -### FN010005 .yo-rc.json environment | Recommended - -Update environment in .yo-rc.json - -In file [./.yo-rc.json](./.yo-rc.json) update the code as follows: - -```json -{ - "@microsoft/generator-sharepoint": { - "environment": "spo" - } -} -``` - -File: [./.yo-rc.json](./.yo-rc.json) - -### FN010006 .yo-rc.json framework | Recommended - -Remove framework in .yo-rc.json - -In file [./.yo-rc.json](./.yo-rc.json) update the code as follows: - -```json -{ - "@microsoft/generator-sharepoint": { - "framework": "" - } -} -``` - -File: [./.yo-rc.json](./.yo-rc.json) - -### FN011009 Web part manifest safeWithCustomScriptDisabled | Required - -Update the safeWithCustomScriptDisabled property in the manifest - -In file [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) update the code as follows: - -```json -{ - "safeWithCustomScriptDisabled": false -} -``` - -File: [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) - -### FN011010 Web part manifest version | Optional - -Update version in manifest to use automated component versioning - -In file [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) update the code as follows: - -```json -{ - "version": "*", -} -``` - -File: [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) - -### FN012010 tsconfig.json compiler options experimental decorators | Required - -Enable tsconfig.json experimental decorators - -In file [./tsconfig.json](./tsconfig.json) update the code as follows: - -```json -{ - "compilerOptions": { - "experimentalDecorators": true - } -} -``` - -File: [./tsconfig.json](./tsconfig.json) - -### FN015001 typings\tsd.d.ts | Required - -Remove file typings\tsd.d.ts - -Execute the following command: - -```sh -rm typings\tsd.d.ts -``` - -File: [typings\tsd.d.ts](typings\tsd.d.ts) - -### FN015002 typings\@ms\odsp.d.ts | Required - -Remove file typings\@ms\odsp.d.ts - -Execute the following command: - -```sh -rm typings\@ms\odsp.d.ts -``` - -File: [typings\@ms\odsp.d.ts](typings\@ms\odsp.d.ts) - -### FN017001 Run npm dedupe | Optional - -If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages. - -Execute the following command: - -```sh -npm dedupe -``` - -File: [./package.json](./package.json) - -## Summary - -### Execute script - -```sh -npm i -SE @microsoft/sp-core-library@1.11.0 @microsoft/sp-webpart-base@1.11.0 @microsoft/sp-property-pane@1.11.0 @types/es6-promise@0.0.33 -npm i -DE @microsoft/sp-build-web@1.11.0 @microsoft/sp-module-interfaces@1.11.0 @microsoft/sp-webpart-workbench@1.11.0 @microsoft/sp-tslint-rules@1.11.0 @types/webpack-env@1.13.1 @types/es6-promise@0.0.33 @microsoft/rush-stack-compiler-3.3@0.3.5 tslint-microsoft-contrib@5.0.0 @types/chai@3.4.34 @types/mocha@2.2.38 ajv@5.2.2 -npm un -S @types/webpack-env @microsoft/sp-client-base -npm dedupe -mkdir F:\Code\sp-dev-fx-webparts\samples\js-display-list/teams -rm config\tslint.json -cat > src\index.ts << EOF -// A file is required to be in the root of the /src directory by the TypeScript compiler - -EOF -rm typings\tsd.d.ts -rm typings\@ms\odsp.d.ts -``` - -### Modify files - -#### [./config/package-solution.json](./config/package-solution.json) - -In package-solution.json add developer section: - -```json -{ - "solution": { - "developer": { - "name": "Contoso", - "privacyUrl": "https://contoso.com/privacy", - "termsOfUseUrl": "https://contoso.com/terms-of-use", - "websiteUrl": "https://contoso.com/my-app", - "mpnId": "000000" - } - } -} -``` - -Update package-solution.json isDomainIsolated: - -```json -{ - "solution": { - "isDomainIsolated": false - } -} -``` - -Update package-solution.json schema URL: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json" -} -``` - -Update package-solution.json includeClientSideAssets: - -```json -{ - "solution": { - "includeClientSideAssets": true - } -} -``` - -#### [./.yo-rc.json](./.yo-rc.json) - -Update version in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "version": "1.11.0" - } -} -``` - -Update isDomainIsolated in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "isDomainIsolated": false - } -} -``` - -Update isCreatingSolution in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "isCreatingSolution": true - } -} -``` - -Update packageManager in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "packageManager": "npm" - } -} -``` - -Update componentType in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "componentType": "webpart" - } -} -``` - -Update environment in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "environment": "spo" - } -} -``` - -Remove framework in .yo-rc.json: - -```json -{ - "@microsoft/generator-sharepoint": { - "framework": "" - } -} -``` - -#### [./tsconfig.json](./tsconfig.json) - -Update tsconfig.json include property: - -```json -{ - "include": [ - "src/**/*.tsx" - ] -} -``` - -Update tsconfig.json extends property: - -```json -{ - "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json" -} -``` - -Update tsconfig.json inlineSources value: - -```json -{ - "compilerOptions": { - "inlineSources": false - } -} -``` - -Update tsconfig.json strictNullChecks value: - -```json -{ - "compilerOptions": { - "strictNullChecks": false - } -} -``` - -Update tsconfig.json noUnusedLocals value: - -```json -{ - "compilerOptions": { - "noUnusedLocals": false - } -} -``` - -Update tsconfig.json outDir value: - -```json -{ - "compilerOptions": { - "outDir": "lib" - } -} -``` - -Update tsconfig.json exclude property: - -```json -{ - "exclude": [ - "node_modules", - "lib" - ] -} -``` - -Update module type in tsconfig.json: - -```json -{ - "compilerOptions": { - "module": "esnext" - } -} -``` - -Update moduleResolution in tsconfig.json: - -```json -{ - "compilerOptions": { - "moduleResolution": "node" - } -} -``` - -Update skipLibCheck in tsconfig.json: - -```json -{ - "compilerOptions": { - "skipLibCheck": true - } -} -``` - -Add ./node_modules/@types to typeRoots in tsconfig.json: - -```json -{ - "compilerOptions": { - "typeRoots": [ - "./node_modules/@types" - ] - } -} -``` - -Add ./node_modules/@microsoft to typeRoots in tsconfig.json: - -```json -{ - "compilerOptions": { - "typeRoots": [ - "./node_modules/@microsoft" - ] - } -} -``` - -Remove es6-collections type in tsconfig.json: - -```json -{ - "compilerOptions": { - "types": [ - "es6-collections" - ] - } -} -``` - -Add es5 lib in tsconfig.json: - -```json -{ - "compilerOptions": { - "lib": [ - "es5" - ] - } -} -``` - -Add dom lib in tsconfig.json: - -```json -{ - "compilerOptions": { - "lib": [ - "dom" - ] - } -} -``` - -Add es2015.collection lib in tsconfig.json: - -```json -{ - "compilerOptions": { - "lib": [ - "es2015.collection" - ] - } -} -``` - -Enable tsconfig.json experimental decorators: - -```json -{ - "compilerOptions": { - "experimentalDecorators": true - } -} -``` - -#### [src\webparts\jsDisplayList\JsDisplayListWebPart.ts](src\webparts\jsDisplayList\JsDisplayListWebPart.ts) - -Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package: - -```ts -import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base"; -import { IPropertyPaneConfiguration, PropertyPaneDropdown, IPropertyPaneDropdownOption } from "@microsoft/sp-property-pane"; -``` - -#### [./package.json](./package.json) - -Add package.json property: - -```json -{ - "main": "lib/index.js" -} -``` - -#### [src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json](src\webparts\jsDisplayList\JsDisplayListWebPart.manifest.json) - -Update the supportedHosts property in the manifest: - -```json -{ - "supportedHosts": ["SharePointWebPart"] -} -``` - -Update schema in manifest: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json" -} -``` - -In the manifest update the default group value: - -```json -{ - "preconfiguredEntries": [{ - "group": { "default": "Other" } - }] -} -``` - -Update the safeWithCustomScriptDisabled property in the manifest: - -```json -{ - "safeWithCustomScriptDisabled": false -} -``` - -Update version in manifest to use automated component versioning: - -```json -{ - "version": "*", -} -``` - -#### [./tslint.json](./tslint.json) - -Remove rulesDirectory from tslint.json: - -```json -{ - "rulesDirectory": [] -} -``` - -Update tslint.json extends property: - -```json -{ - "extends": "@microsoft/sp-tslint-rules/base-tslint.json" -} -``` - -#### [./config/config.json](./config/config.json) - -Update config.json schema URL: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json" -} -``` - -Update config.json version number: - -```json -{ - "version": "2.0" -} -``` - -In config.json add the 'bundles' property: - -```json -{ - "bundles": { - "js-display-list-web-part": { - "components": [ - { - "entrypoint": "./lib/webparts/jsDisplayList/JsDisplayListWebPart.js", - "manifest": "./src/webparts/jsDisplayList/JsDisplayListWebPart.manifest.json" - } - ] - } - } -} -``` - -Remove the "entries" property in ./config/config.json: - -```json -{ - "entries": [ - { - "entry": "./lib/webparts/jsDisplayList/JsDisplayListWebPart.js", - "manifest": "./src/webparts/jsDisplayList/JsDisplayListWebPart.manifest.json", - "outputPath": "./dist/js-display-list.bundle.js" - } - ] -} -``` - -In the config.json file, update the path of the localized resource: - -```json -{ - "localizedResources": { - "jsDisplayListStrings": "lib/webparts/jsDisplayList/loc/{locale}.js" - } -} -``` - -#### [./config/deploy-azure-storage.json](./config/deploy-azure-storage.json) - -Update deploy-azure-storage.json schema URL: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json" -} -``` - -#### [./config/serve.json](./config/serve.json) - -Update serve.json schema URL: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json" -} -``` - -#### [./config/write-manifests.json](./config/write-manifests.json) - -Update write-manifests.json schema URL: - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json" -} -``` - -#### [./gulpfile.js](./gulpfile.js) - -Add suppression for ms-Grid sass warning: - -```js -build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); -``` - -#### [.vscode/extensions.json](.vscode/extensions.json) - -In the .vscode folder, add the extensions.json file: - -```json -{ - "recommendations": [ - "msjsdiag.debugger-for-chrome" - ] -} -``` - -#### [.vscode/launch.json](.vscode/launch.json) - -In the .vscode folder, add the launch.json file: - -```json -{ - /** - Install Chrome Debugger Extension for Visual Studio Code - to debug your components with the Chrome browser: - https://aka.ms/spfx-debugger-extensions - */ - "version": "0.2.0", - "configurations": [{ - "name": "Local workbench", - "type": "chrome", - "request": "launch", - "url": "https://localhost:4321/temp/workbench.html", - "webRoot": "${workspaceRoot}", - "sourceMaps": true, - "sourceMapPathOverrides": { - "webpack:///../../../src/*": "${webRoot}/src/*", - "webpack:///../../../../src/*": "${webRoot}/src/*", - "webpack:///../../../../../src/*": "${webRoot}/src/*" - }, - "runtimeArgs": [ - "--remote-debugging-port=9222" - ] - }, - { - "name": "Hosted workbench", - "type": "chrome", - "request": "launch", - "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", - "webRoot": "${workspaceRoot}", - "sourceMaps": true, - "sourceMapPathOverrides": { - "webpack:///../../../src/*": "${webRoot}/src/*", - "webpack:///../../../../src/*": "${webRoot}/src/*", - "webpack:///../../../../../src/*": "${webRoot}/src/*" - }, - "runtimeArgs": [ - "--remote-debugging-port=9222", - "-incognito" - ] - } - ] -} -```