honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1948 from dips365/React-Quick-Poll-Issue

This commit is contained in:
Hugo Bernier 2021-07-01 01:08:34 -04:00 committed by GitHub
parent 2134a56023 7b4adb2fff
commit a3c0fc3b33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 71 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
samples/react-quick-poll/README.md
View File

@ -2,63 +2,63 @@
## Summary
This component is developed for the users who really need to create a **_Poll_** within a minute and with less maintenance. **_'QuickPoll'_** list will be created automatically to store the user response.
Following are some of the features of this component.
* **_Easy_** to setup with most of the configurations are optional.
* **_Flexible_** to use without any critical configuration.
* More than one poll questions can be added.
* Schedule the poll questions in **_advance_** using the **_date_** parameters.
* Option to choose the poll that has to be visible to the end users.
* Poll response can be viewed via graphical representation as **_charts_**.
## Properties
1. **_Display poll based on date_** - This property will check for the **'Start Date'** and **'End Date'** on the poll questions to display the correct poll question to the end user. The **'Start Date'** and **'End Date'** on the poll question will be enabled only when this property is turned on.
2. **_Poll Questions_** - Manage the collection of poll questions and choices.
* **_Question Title_** - Title of the question.
* **_Choices_** - Choices separated by comma.
* **_Multi Selection_** - Whether the users are allowed to choose one or multiple.
* **_Start Date_** - Date when the end user can start seeing the poll question.
* **_End Date_** - Last day of the poll question visible to the end user.
3. **_Success Message_** - Message to be displayed to the user after a successful submission. It is optional, if not provided the default message '**Thank you for your submission**' will be displayed.
4. **_Response Message_** - Message to be displayed to the user with the user response, once the user has submitted. It is optional, if not provided the default message '**You voted for: ~User Response~**' will be displayed below the chart.
5. **_Submit button text_** - Text to be displayed on the submit button. It is optional, if not provided the default text '**Submit Vote**' will be displayed.
6. **_Preferred Chart Type_** - Chart type to display the overall response for the question.
### _Note_
* Poll questions with the same **'Start Date'** and **'End Date'** will follow the sort order to display the latest question to the end user.
* Once the user started to response to the poll, do not delete the question from the question collection. All the questions are mapped based on the **ID** auto generated. It cannot be recovered once deleted.
* Make sure the **Multi Choice** option is chosen wisely, do not change once the user started to response to the poll.
## Preview
This component is developed for the users who really need to create a **Poll** within a minute and with less maintenance. **QuickPoll** list will be created automatically to store the user response.
![React-Quick-Poll](./assets/react-quick-poll.gif)
## Used SharePoint Framework Version
Following are some of the features of this component.
* **Easy** to setup with most of the configurations are optional.
* **Flexible** to use without any critical configuration.
* More than one poll questions can be added.
* Schedule the poll questions in **advance** using the **date** parameters.
* Option to choose the poll that has to be visible to the end users.
* Poll response can be viewed via graphical representation as **charts**.
![SPFx 1.11](https://img.shields.io/badge/version-1.11-green.svg)
## Properties
1. **Display poll based on date** - This property will check for the **Start Date** and **End Date** on the poll questions to display the correct poll question to the end user. The **Start Date** and **End Date** on the poll question will be enabled only when this property is turned on.
2. **Poll Questions** - Manage the collection of poll questions and choices.
* **Question Title** - Title of the question.
* **Choices** - Choices separated by comma.
* **Multi Selection** - Whether the users are allowed to choose one or multiple.
* **Start Date** - Date when the end user can start seeing the poll question.
* **End Date** - Last day of the poll question visible to the end user.
3. **Success Message** - Message to be displayed to the user after a successful submission. It is optional, if not provided the default message '**Thank you for your submission**' will be displayed.
4. **Response Message** - Message to be displayed to the user with the user response, once the user has submitted. It is optional, if not provided the default message '**You voted for: ~User Response~**' will be displayed below the chart.
5. **Submit button text** - Text to be displayed on the submit button. It is optional, if not provided the default text '**Submit Vote**' will be displayed.
6. **Preferred Chart Type** - Chart type to display the overall response for the question.
> **Note:**
> * Poll questions with the same **'Start Date'** and **'End Date'** will follow the sort order to display the latest question to the end user.
> * Once the user started to response to the poll, do not delete the question from the question collection. All the questions are mapped based on the **ID** auto generated. It cannot be recovered once deleted.
> * Make sure the **Multi Choice** option is chosen wisely, do not change once the user started to response to the poll.
## Compatibility
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
## Applies to
* [SharePoint Framework](https:/dev.office.com/sharepoint)
* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
## Prerequisites
> **@microsoft/generator-sharepoint - 1.11.0**
## Solution
Solution|Author(s)
--------|---------
react-quick-poll | Sudharsan K.([@sudharsank](https://twitter.com/sudharsank), [Know More](https://spknowledge.com/))
react-quick-poll | [Sudharsan K.](https://github.com/sudharsank) ([@sudharsank](https://twitter.com/sudharsank), [Know More](https://spknowledge.com/))
react-quick-poll | [Dipen Shah](https://github.com/dips365) ([@Dips_365](https://twitter.com/Dips_365))
## Version history
@ -66,18 +66,16 @@ Version|Date|Comments
-------|----|--------
1.0.0.1|Feb 24 2020|Initial release
2.0.0.0|Oct 17 2020|Initial release
## 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.**
2.1.0.0|June 30, 2021|Updated simple poll component
## Minimal Path to Awesome
- Clone this repository
- in the command line run:
- `npm install`
- `gulp bundle --ship && gulp package-solution --ship`
- Add the `.sppkg` file to the app catalog and add the **'_Quick Poll_'** web part to the page.
- `gulp bundle --ship`
- `gulp package-solution --ship`
- Add the `.sppkg` file to the app catalog and add the **Quick Poll** web part to the page.
## Features
@ -93,11 +91,20 @@ Version|Date|Comments
- Used [PnP](https://pnp.github.io/pnpjs/) for communication with SharePoint.
- Used [Moment.js](https://momentjs.com/) for datetime formatting.
### Local Mode
This solution doesn't work on local mode.
## Disclaimer
### SharePoint Mode
**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.**
## 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.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-quick-poll&authors=@sudharsank%20@dips365&title=react-quick-poll%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-quick-poll&authors=@sudharsank%20@dips365&title=react-quick-poll%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-quick-poll&authors=@sudharsank%20@dips365&title=react-quick-poll%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-quick-poll" />
If you want to try on a real environment, open:
[O365 Workbench](https://your-domain.sharepoint.com/_layouts/15/workbench.aspx)

8
samples/react-quick-poll/assets/sample.json
View File

@ -9,7 +9,7 @@
"This component is developed for the users who really need to create a Poll within a minute and with less maintenance."
],
"creationDateTime": "2020-10-17",
"updateDateTime": "2020-10-17",
"updateDateTime": "2021-06-30",
"products": [
"SharePoint",
"Office"
@ -39,6 +39,12 @@
"pictureUrl": "https://github.com/sudharsank.png",
"name": "Sudharsan Kesavanarayanan",
"twitter": "sudharsank"
},
{
"gitHubAccount": "dips365",
"pictureUrl": "https://github.com/dips365.png",
"name": "Dipen Shah",
"twitter": "Dips_365"
}
],
"references": [

2
samples/react-quick-poll/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "React Quick Poll",
"id": "890ced10-dacc-4d0d-b9df-355a289980b3",
"version": "2.0.0.0",
"version": "2.1.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"developer": {

2
samples/react-quick-poll/package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-simple-poll",
"version": "0.0.1",
"version": "2.1.0",
"private": true,
"main": "lib/index.js",
"engines": {

2
samples/react-quick-poll/src/webparts/simplePoll/components/SimplePoll.tsx
View File

@ -240,7 +240,7 @@ export default class SimplePoll extends React.Component<ISimplePollProps, ISimpl
showOptions: false,
showProgress: false,
UserResponse: usersResponse,
currentPollResponse: usersResponse[0].Response ? usersResponse[0].Response : usersResponse[0].MultiResponse.join(',')
currentPollResponse: filRes[0].Response ? filRes[0].Response : filRes[0].MultiResponse.join(',')
}, this.bindResponseAnalytics);
} else {
this.setState({

344
samples/react-quick-poll/upgrade-report.md
View File

@ -1,344 +0,0 @@
# Upgrade project react-simple-poll to v1.11.0
Date: 10/16/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)
### 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.11.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.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)
### FN001005 @types/react | Required
Remove SharePoint Framework dependency package @types/react
Execute the following command:
```sh
npm un -S @types/react
```
File: [./package.json](./package.json)
### FN001006 @types/react-dom | Required
Remove SharePoint Framework dependency package @types/react-dom
Execute the following command:
```sh
npm un -S @types/react-dom
```
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)
### FN001010 @types/es6-promise | Required
Remove SharePoint Framework dependency package @types/es6-promise
Execute the following command:
```sh
npm un -S @types/es6-promise
```
File: [./package.json](./package.json)
### FN001021 @microsoft/sp-property-pane | Required
Upgrade 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)
### FN001022 office-ui-fabric-react | Required
Upgrade SharePoint Framework dependency package office-ui-fabric-react
Execute the following command:
```sh
npm i -SE office-ui-fabric-react@6.214.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
Upgrade 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)
### FN002015 @types/react | Required
Install SharePoint Framework dev dependency package @types/react
Execute the following command:
```sh
npm i -DE @types/react@16.8.8
```
File: [./package.json](./package.json)
### FN002016 @types/react-dom | Required
Install SharePoint Framework dev dependency package @types/react-dom
Execute the following command:
```sh
npm i -DE @types/react-dom@16.8.3
```
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)
### 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-lodash-subset@1.11.0 @microsoft/sp-office-ui-fabric-core@1.11.0 @microsoft/sp-webpart-base@1.11.0 @microsoft/sp-property-pane@1.11.0 office-ui-fabric-react@6.214.0
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 @types/react@16.8.8 @types/react-dom@16.8.3
npm un -S @types/react @types/react-dom @types/webpack-env @types/es6-promise
npm dedupe
```
### 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"
}
}
}
```
#### [./.yo-rc.json](./.yo-rc.json)
Update version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"version": "1.11.0"
}
}
```
#### [./tsconfig.json](./tsconfig.json)
Update tsconfig.json include property:
```json
{
"include": [
"src/**/*.tsx"
]
}
```