Upgrade react accordion to SPFx 1.10

This commit is contained in:
Neelamugilan Gobalakrishnan 2020-01-19 23:22:55 +00:00
parent f4854547fe
commit daa3dc6274
16 changed files with 18483 additions and 94 deletions

View File

@ -1,11 +1,12 @@
{ {
"@microsoft/generator-sharepoint": { "@microsoft/generator-sharepoint": {
"isCreatingSolution": true, "isCreatingSolution": true,
"isDomainIsolated": false,
"environment": "spo", "environment": "spo",
"version": "1.5.1", "version": "1.10.0",
"libraryName": "react-accordion", "libraryName": "react-accordion",
"libraryId": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9", "libraryId": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
"packageManager": "npm", "packageManager": "npm",
"componentType": "webpart" "componentType": "webpart"
} }
} }

View File

@ -7,7 +7,7 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
![Sample Web Part built using SPFx with React Framework showing list data in accordion format](./assets/previewAccordion.PNG) ![Sample Web Part built using SPFx with React Framework showing list data in accordion format](./assets/previewAccordion.PNG)
## Used SharePoint Framework Version ## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.5.1-green.svg) ![drop](https://img.shields.io/badge/drop-1.10.0-green.svg)
## Applies to ## Applies to
@ -25,6 +25,7 @@ react-accordion | Gautam Sheth (SharePoint Consultant, RapidCircle)
Version|Date|Comments Version|Date|Comments
-------|----|-------- -------|----|--------
1.0|August 17, 2018|Initial release 1.0|August 17, 2018|Initial release
2.0|January 19, 2020|Upgrade to SPFx 1.10
## Disclaimer ## 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.** **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.**
@ -33,18 +34,29 @@ Version|Date|Comments
## Minimal Path to Awesome ## Minimal Path to Awesome
- clone this repo ### Build and Test
- in the command line run:
- `npm i`
- `gulp serve --nobrowser`
- in your SharePoint Site create a custom list named FAQ
- in the FAQ list, create a column Description(internal name) of type Enhanced rich text
- add some list items with Title and Description values
- navigate to the hosted version of SharePoint workbench, eg. **https://contoso.sharepoint.com/sites/test/_layouts/15/workbench.aspx** 1. Clone this repo
- add the Web Part to canvas and in its configuration specify: 2. In the command line run
- name of the list where list items are stored, eg. **FAQ** - `npm i`
- `gulp build`
- `gulp serve --nobrowser`
3. Create a custom list (e.g. FAQ) with Title and Description(internal name) of type Enhanced rich text on your SharePoint site.
4. Populate the list with some items
5. Navigate to the hosted version of SharePoint workbench, eg. **https://\<tenant>.sharepoint.com/sites/\<your site>/_layouts/15/workbench.aspx**
6. Add the Web Part to the canvas and configure it.
### Package and deploy
1. In the command line run
- `gulp bundle --ship`
- `gulp package-solution --ship`
2. Install into your SharePoint app catalog and add it to a SharePoint site.
3. Navigate to your site, eg. **https://\<tenant>.sharepoint.com/sites/\<your site>**
4. Create a custom list with Title and Description(internal name) of type Enhanced rich text.
5. Populate the list with some items
6. Navigate to a page on your site where the custom list is created
7. Add the Web Part to the page and configure it.
## Features ## Features
@ -52,13 +64,14 @@ This project contains sample client-side web part built on the SharePoint Framew
This sample illustrates the following concepts on top of the SharePoint Framework: This sample illustrates the following concepts on top of the SharePoint Framework:
- general ### General
- performing SharePoint GET operation in React using inbuilt SP Http Client
- Using Fabric UI button component for pagination - performing SharePoint GET operation in React using inbuilt SP Http Client
- optimizing REST responses for performance using nometadata option of JSON light - Using Fabric UI button component for pagination
- using PnP Webpart title control of @pnp/spfx-controls-react library - optimizing REST responses for performance using nometadata option of JSON light
- showing SharePoint list data in Accordion format using React Accessible Accordion plugin - using PnP Webpart title control of @pnp/spfx-controls-react library
- searching in the fetched data by making use of Search Box from Office Fabric UI - showing SharePoint list data in Accordion format using React Accessible Accordion plugin
- searching in the fetched data by making use of Search Box from Office Fabric UI
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-accordion" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-accordion" />

View File

@ -4,7 +4,8 @@
"name": "react-accordion-client-side-solution", "name": "react-accordion-client-side-solution",
"id": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9", "id": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
"version": "1.0.0.0", "version": "1.0.0.0",
"includeClientSideAssets": true "includeClientSideAssets": true,
"isDomainIsolated": false
}, },
"paths": { "paths": {
"zippedPackage": "solution/react-accordion.sppkg" "zippedPackage": "solution/react-accordion.sppkg"

View File

@ -1,45 +0,0 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/tslint.schema.json",
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
// project). If true, this flag will deactivate any of these rules.
"removeExistingRules": true,
// When true, the TSLint task is configured with some default TSLint "rules.":
"useDefaultConfigAsBase": false,
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
// which are active, other than the list of rules below.
"lintConfig": {
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-case": true,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false
}
}
}

17528
samples/react-accordion/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -2,6 +2,7 @@
"name": "react-accordion", "name": "react-accordion",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"main": "lib/index.js",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
}, },
@ -11,26 +12,33 @@
"test": "gulp test" "test": "gulp test"
}, },
"dependencies": { "dependencies": {
"@microsoft/sp-core-library": "1.5.1", "@microsoft/sp-core-library": "1.10.0",
"@microsoft/sp-lodash-subset": "1.5.1", "@microsoft/sp-lodash-subset": "1.10.0",
"@microsoft/sp-office-ui-fabric-core": "1.5.1", "@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-webpart-base": "1.5.1", "@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "1.10.0",
"@pnp/spfx-controls-react": "1.7.0", "@pnp/spfx-controls-react": "1.7.0",
"@types/es6-promise": "0.0.33", "@types/es6-promise": "0.0.33",
"@types/react": "15.6.6", "@types/react": "16.8.8",
"@types/react-dom": "15.5.6", "@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1", "@types/webpack-env": "1.13.1",
"react": "15.6.2", "office-ui-fabric-react": "6.189.2",
"react": "16.8.5",
"react-accessible-accordion": "1.0.2", "react-accessible-accordion": "1.0.2",
"react-dom": "15.6.2" "react-dom": "16.8.5"
},
"resolutions": {
"@types/react": "16.8.8"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/sp-build-web": "1.5.1", "@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-module-interfaces": "1.5.1", "@microsoft/sp-build-web": "1.10.0",
"@microsoft/sp-webpart-workbench": "1.5.1", "@microsoft/sp-module-interfaces": "1.10.0",
"gulp": "~3.9.1", "@microsoft/sp-tslint-rules": "1.10.0",
"@microsoft/sp-webpart-workbench": "1.10.0",
"@types/chai": "3.4.34", "@types/chai": "3.4.34",
"@types/mocha": "2.2.38", "@types/mocha": "2.2.38",
"ajv": "~5.2.2" "ajv": "~5.2.2",
"gulp": "~3.9.1"
} }
} }

View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

View File

@ -10,6 +10,9 @@
// Components that allow authors to embed arbitrary script code should set this to true. // Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false, "requiresCustomScript": false,
"supportedHosts": [
"SharePointWebPart"
],
"preconfiguredEntries": [ "preconfiguredEntries": [
{ {
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
@ -30,4 +33,4 @@
} }
} }
] ]
} }

View File

@ -1,12 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import { Version, DisplayMode } from '@microsoft/sp-core-library'; import { Version, DisplayMode } from '@microsoft/sp-core-library';
import { import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
BaseClientSideWebPart, import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField } from "@microsoft/sp-property-pane";
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneSlider
} from '@microsoft/sp-webpart-base';
import * as strings from 'ReactAccordionWebPartStrings'; import * as strings from 'ReactAccordionWebPartStrings';
import ReactAccordion from './components/ReactAccordion'; import ReactAccordion from './components/ReactAccordion';

View File

@ -5,8 +5,8 @@ export interface IReactAccordionProps {
listName: string; listName: string;
spHttpClient: SPHttpClient; spHttpClient: SPHttpClient;
siteUrl: string; siteUrl: string;
title: string, title: string;
displayMode: DisplayMode, displayMode: DisplayMode;
maxItemsPerPage: number, maxItemsPerPage: number;
updateProperty: (value: string) => void; updateProperty: (value: string) => void;
} }

View File

@ -1,4 +1,4 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; @import '~office-ui-fabric-react/dist/sass/References.scss';
.reactAccordion { .reactAccordion {
.container { .container {
@ -70,4 +70,4 @@
display: inline-block; display: inline-block;
} }
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1,14 +1,19 @@
{ {
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"inlineSources": false,
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"noUnusedLocals": false,
"jsx": "react", "jsx": "react",
"declaration": true, "declaration": true,
"sourceMap": true, "sourceMap": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"skipLibCheck": true, "skipLibCheck": true,
"strictNullChecks": false,
"outDir": "lib",
"typeRoots": [ "typeRoots": [
"./node_modules/@types", "./node_modules/@types",
"./node_modules/@microsoft" "./node_modules/@microsoft"
@ -22,5 +27,12 @@
"dom", "dom",
"es2015.collection" "es2015.collection"
] ]
} },
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
} }

View File

@ -1,3 +1,30 @@
{ {
"rulesDirectory": "./config" "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
} "rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}

View File

@ -0,0 +1,844 @@
# Upgrade project C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion to v1.10.0
Date: 1/18/2020
## Findings
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.10.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.10.0
```
File: [./package.json](./package.json)
### FN001002 @microsoft/sp-lodash-subset | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
Execute the following command:
```sh
npm i -SE @microsoft/sp-lodash-subset@1.10.0
```
File: [./package.json](./package.json)
### FN001003 @microsoft/sp-office-ui-fabric-core | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
Execute the following command:
```sh
npm i -SE @microsoft/sp-office-ui-fabric-core@1.10.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.10.0
```
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.10.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.10.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.10.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.10.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.10.0
```
File: [./package.json](./package.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)
### 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.10.0"
}
}
```
File: [./.yo-rc.json](./.yo-rc.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\reactAccordion\ReactAccordionWebPart.ts](src\webparts\reactAccordion\ReactAccordionWebPart.ts) update the code as follows:
```ts
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField } from "@microsoft/sp-property-pane";
```
File: [src\webparts\reactAccordion\ReactAccordionWebPart.ts:4:1](src\webparts\reactAccordion\ReactAccordionWebPart.ts)
### FN001005 @types/react | Required
Upgrade SharePoint Framework dependency package @types/react
Execute the following command:
```sh
npm i -SE @types/react@16.8.8
```
File: [./package.json](./package.json)
### FN001006 @types/react-dom | Required
Upgrade SharePoint Framework dependency package @types/react-dom
Execute the following command:
```sh
npm i -SE @types/react-dom@16.8.3
```
File: [./package.json](./package.json)
### FN001022 office-ui-fabric-react | Required
Install SharePoint Framework dependency package office-ui-fabric-react
Execute the following command:
```sh
npm i -SE office-ui-fabric-react@6.189.2
```
File: [./package.json](./package.json)
### FN020001 @types/react | Required
Add resolution for package @types/react
In file [./package.json](./package.json) update the code as follows:
```json
{
"resolutions": {
"@types/react": "16.8.8"
}
}
```
File: [./package.json](./package.json)
### 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)
### FN001008 react | Required
Upgrade SharePoint Framework dependency package react
Execute the following command:
```sh
npm i -SE react@16.8.5
```
File: [./package.json](./package.json)
### FN001009 react-dom | Required
Upgrade SharePoint Framework dependency package react-dom
Execute the following command:
```sh
npm i -SE react-dom@16.8.5
```
File: [./package.json](./package.json)
### FN022001 Scss file import | Required
Remove scss file import
In file [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss) update the code as follows:
```scss
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'
```
File: [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss)
### FN022002 Scss file import | Optional
Add scss file import
In file [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss) update the code as follows:
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
File: [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss)
### FN011011 Web part manifest supportedHosts | Required
Update the supportedHosts property in the manifest
In file [src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json) update the code as follows:
```json
{
"supportedHosts": ["SharePointWebPart"]
}
```
File: [src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.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)
### 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)
### FN018001 Web part Microsoft Teams tab resources folder | Optional
Create folder for Microsoft Teams tab resources
Execute the following command:
```sh
mkdir C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion/teams_reactAccordion
```
File: [teams_reactAccordion](teams_reactAccordion)
### FN018002 Web part Microsoft Teams tab manifest | Optional
Create Microsoft Teams tab manifest for the web part
Execute the following command:
```sh
cat > C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\manifest.json << EOF
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
"manifestVersion": "1.2",
"packageName": "React Accordion App",
"id": "97a28c00-64ee-4ec7-b373-723e39069a96",
"version": "0.1",
"developer": {
"name": "SPFx + Teams Dev",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
},
"name": {
"short": "React Accordion App"
},
"description": {
"short": "SPFx webpart which shows SharePoint list data in Accordion format",
"full": "SPFx webpart which shows SharePoint list data in Accordion format"
},
"icons": {
"outline": "tab20x20.png",
"color": "tab96x96.png"
},
"accentColor": "#004578",
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=97a28c00-64ee-4ec7-b373-723e39069a96",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"*.sharepoint-df.com",
"spoppe-a.akamaihd.net",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net",
"msft.spoppe.com"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}
EOF
```
File: [teams_reactAccordion\manifest.json](teams_reactAccordion\manifest.json)
### 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\Admin\AppData\Roaming\npm\node_modules\@pnp\office365-cli\dist\o365\spfx\commands\project\project-upgrade\assets\tab20x20.png C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\tab20x20.png
```
File: [teams_reactAccordion\tab20x20.png](teams_reactAccordion\tab20x20.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\Admin\AppData\Roaming\npm\node_modules\@pnp\office365-cli\dist\o365\spfx\commands\project\project-upgrade\assets\tab96x96.png C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\tab96x96.png
```
File: [teams_reactAccordion\tab96x96.png](teams_reactAccordion\tab96x96.png)
### 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)
### 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/**/*.ts"
]
}
```
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)
### 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.10.0 @microsoft/sp-lodash-subset@1.10.0 @microsoft/sp-office-ui-fabric-core@1.10.0 @microsoft/sp-webpart-base@1.10.0 @microsoft/sp-property-pane@1.10.0 @types/react@16.8.8 @types/react-dom@16.8.3 office-ui-fabric-react@6.189.2 react@16.8.5 react-dom@16.8.5
npm i -DE @microsoft/sp-build-web@1.10.0 @microsoft/sp-module-interfaces@1.10.0 @microsoft/sp-webpart-workbench@1.10.0 @microsoft/sp-tslint-rules@1.10.0 @microsoft/rush-stack-compiler-3.3@0.3.5 tslint-microsoft-contrib@5.0.0
mkdir C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams
cat > C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams\manifest.json << EOF
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
"manifestVersion": "1.2",
"packageName": "React Accordion App",
"id": "97a28c00-64ee-4ec7-b373-723e39069a96",
"version": "0.1",
"developer": {
"name": "SPFx + Teams Dev",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
},
"name": {
"short": "React Accordion App"
},
"description": {
"short": "SPFx webpart which shows SharePoint list data in Accordion format",
"full": "SPFx webpart which shows SharePoint list data in Accordion format"
},
"icons": {
"outline": "tab20x20.png",
"color": "tab96x96.png"
},
"accentColor": "#004578",
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=97a28c00-64ee-4ec7-b373-723e39069a96",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"*.sharepoint-df.com",
"spoppe-a.akamaihd.net",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net",
"msft.spoppe.com"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}
EOF
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
```
### Modify files
#### [./.yo-rc.json](./.yo-rc.json)
Update version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"version": "1.10.0"
}
}
```
Update isDomainIsolated in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"isDomainIsolated": false
}
}
```
#### [./tsconfig.json](./tsconfig.json)
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 include property:
```json
{
"include": [
"src/**/*.ts"
]
}
```
Update tsconfig.json exclude property:
```json
{
"exclude": [
"node_modules",
"lib"
]
}
```
#### [src\webparts\reactAccordion\ReactAccordionWebPart.ts](src\webparts\reactAccordion\ReactAccordionWebPart.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, PropertyPaneSlider, PropertyPaneTextField } from "@microsoft/sp-property-pane";
```
#### [./package.json](./package.json)
Add resolution for package @types/react:
```json
{
"resolutions": {
"@types/react": "16.8.8"
}
}
```
Add package.json property:
```json
{
"main": "lib/index.js"
}
```
#### [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss)
Remove scss file import:
```scss
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'
```
Add scss file import:
```scss
@import '~office-ui-fabric-react/dist/sass/References.scss'
```
#### [src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json)
Update the supportedHosts property in the manifest:
```json
{
"supportedHosts": ["SharePointWebPart"]
}
```
#### [./config/package-solution.json](./config/package-solution.json)
Update package-solution.json isDomainIsolated:
```json
{
"solution": {
"isDomainIsolated": false
}
}
```
#### [./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"
}
```