Merge branch 'main' into react-my-events/fixed-date-issues
This commit is contained in:
Hugo Bernier
GitHub
commit
ebf179191e
|
|
@ -0,0 +1,27 @@
|
|||
> By submitting this pull request, you agree to the [contribution guidelines](https://github.com/pnp/sp-dev-fx-webparts/blob/main/CONTRIBUTING.md)
|
||||
|
||||
> If you aren't familiar with how to contribute to open-source repositories using GitHub, or if you find the instructions on this page confusing, [sign up](https://forms.office.com/Pages/ResponsePage.aspx?id=KtIy2vgLW0SOgZbwvQuRaXDXyCl9DkBHq4A2OG7uLpdUREZVRDVYUUJLT1VNRDM4SjhGMlpUNzBORy4u) for one of our [Sharing is Caring](https://pnp.github.io/sharing-is-caring/#pnp-sic-events) events. It's completely free, and we'll guide you through the process.
|
||||
|
||||
| Q | A |
|
||||
| --------------- | --------------------------------------- |
|
||||
| Bug fix? | yes |
|
||||
| Related issues? | fixes #X, partially #Y, mentioned in #Z |
|
||||
|
||||
## What's in this Pull Request?
|
||||
|
||||
> Please describe the changes in this PR. Sample description or details around bugs which are being fixed.
|
||||
>
|
||||
> _(DELETE THIS PARAGRAPH AFTER READING)_
|
||||
|
||||
## Submitter Guidance (DELETE AFTER READING)
|
||||
>
|
||||
> *Please update this PR information accordingly. We'll use this as part of our release notes in monthly communications.*
|
||||
>
|
||||
> *Pull requests that do not follow this template will be automatically rejected.*
|
||||
>
|
||||
> *Please target your PR to `main` branch.*
|
||||
>
|
||||
> *Remember that this repository is maintained by community members who volunteer their time to help. Be courteous and patient.*
|
||||
> _(DELETE THIS SECTION AFTER READING)_
|
||||
|
||||
|
||||
|
|
@ -24,14 +24,19 @@ Short summary on functionality and used technologies.
|
|||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
> Don't worry if you're unsure about the compatibility matrix above. We'll verify it when we approve the PR.
|
||||
>
|
||||
> If using SPFx 1.12.1, update the SPFx and Node.js tags accordingly:
|
||||
> 
|
||||
> 
|
||||
> If using an older version of SPFx, update the SPFx and Node.js compatibility tag accordingly:
|
||||
> SPFx 1.11
|
||||
> 
|
||||
|
|
@ -45,7 +50,8 @@ Short summary on functionality and used technologies.
|
|||
> 
|
||||
> 
|
||||
> If you know your web part only works on the hosted workbench, you can use this for the workbench compatibility tag:
|
||||
> 
|
||||
> 
|
||||
> 
|
||||
>
|
||||
> If you specifically built and tested this web part to work with Teams, use this for the Teams compatibility tag:
|
||||
> 
|
||||
|
|
@ -79,8 +85,8 @@ folder name | [Author Name](LinkToYourGitHubProfile) ([@yourtwitterhandle](https
|
|||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.1|September 2, 2021|Update comment
|
||||
1.0|August 29, 2021|Initial release
|
||||
1.1|November 1, 2021|Update comment
|
||||
1.0|October 29, 2021|Initial release
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
|
|
|||
|
|
@ -21,9 +21,14 @@ This simplistic sample web part demonstrates the use of JavaScript in a SharePoi
|
|||
|
||||
> Does only show data when hosted in SharePoint. No mock data at this point for local testing the rendering.
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
  
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -49,13 +54,6 @@ Version|Date|Comments
|
|||
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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
|
|
@ -63,7 +61,7 @@ Version|Date|Comments
|
|||
- `npm install`
|
||||
- `tsd install`
|
||||
- `gulp serve`
|
||||
- `Open the *workbench* on your Office 365 Developer tenant`
|
||||
- Open the *workbench* on your Office 365 Developer tenant
|
||||
- Basic functionality can be tested locally, data is only shown when used in context of SharePoint
|
||||
|
||||
## Features
|
||||
|
|
@ -77,4 +75,20 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
|
|||
* Logging
|
||||
* Rendering error messages.
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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=js-display-list&authors=@VelinGeorgiev%20@sharepointknight&title=js-display-list%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=js-display-list&authors=@VelinGeorgiev%20@sharepointknight&title=js-display-list%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=js-display-list&authors=@VelinGeorgiev%20@sharepointknight&title=js-display-list%20-%20).
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-display-list" />
|
||||
|
|
|
|||
|
|
@ -22,11 +22,22 @@ Alternatively, you can add the output files for the web part to a custom SPFx pr
|
|||
* Copy all files from `js-workbench-customizer\dist` to the `dist` folder of your custom solution
|
||||
* Copy the `workbenchCustomizer` folder from `js-workbench-customizer\lib\webparts` to the corresponding webparts folder of your custom solution
|
||||
|
||||
Note: This approach will not "pollute" your solution with additional resources or dependencies as the SPFx toolchain will ignore those additional files by default when you package your solution. You can also clean everything by running `gulp clean` as both the lib and dist folders are deleted and recreated again. Git will also ignore dist and lib folders by default, so the files will never be added to source control.
|
||||
> **Note:** This approach will not "pollute" your solution with additional resources or dependencies as the SPFx toolchain will ignore those additional files by default when you package your solution. You can also clean everything by running `gulp clean` as both the lib and dist folders are deleted and recreated again. Git will also ignore dist and lib folders by default, so the files will never be added to source control.
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Not%20compatible-red.svg)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -54,12 +65,6 @@ Version|Date|Comments
|
|||
1.4|July 28, 2020|Update styles to minimise toolbar overlap
|
||||
1.5|July 30, 2020|Update styles to improve full-width mode
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
* Clone this repository
|
||||
|
|
@ -67,4 +72,20 @@ Version|Date|Comments
|
|||
* `npm install`
|
||||
* `gulp serve`
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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=js-workbench-customizer&authors=@joelfmrodrigues&title=js-workbench-customizer%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=js-workbench-customizer&authors=@joelfmrodrigues&title=js-workbench-customizer%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=js-workbench-customizer&authors=@joelfmrodrigues&title=js-workbench-customizer%20-%20).
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-workbench-customizer" />
|
||||
|
|
|
|||
|
|
@ -22,9 +22,14 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
|
|||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
 
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -46,11 +51,7 @@ Version|Date|Comments
|
|||
2.0|January 19, 2020|Upgrade to SPFx 1.10
|
||||
2.1|June 22, 2020|Added pagination (Abhishek Garg)
|
||||
2.2|October 1, 2020 | Added new Pagination Configuration (@beau__cameron)
|
||||
|
||||
## 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.3|September 30, 2021 | Added sorting (@fthorild)
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
|
|
@ -94,4 +95,19 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
|
|||
- searching in the fetched data by making use of Search Box from Office Fabric UI
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-ACCORDION&authors=@AbhishekGarg%20@gautamdsheth&title=REACT-ACCORDION%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-ACCORDION&authors=@AbhishekGarg%20@gautamdsheth&title=REACT-ACCORDION%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-ACCORDION&authors=@AbhishekGarg%20@gautamdsheth&title=REACT-ACCORDION%20-%20).
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-accordion" />
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"This is a sample web Part that illustrates the use of React Accessible Accordion plugin for building SharePoint Framework client-side web parts to show SharePoint list data in Accordion format."
|
||||
],
|
||||
"creationDateTime": "2020-06-22",
|
||||
"updateDateTime": "2020-06-22",
|
||||
"updateDateTime": "2021-09-30",
|
||||
"products": [
|
||||
"SharePoint",
|
||||
"Office"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "react-accordion-client-side-solution",
|
||||
"id": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
|
||||
"version": "2.2.0.0",
|
||||
"version": "2.3.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-accordion",
|
||||
"version": "2.2.0",
|
||||
"version": "2.3.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-accordion",
|
||||
"version": "2.2.0",
|
||||
"version": "2.3.0",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -29,10 +29,13 @@
|
|||
"properties": {
|
||||
"description": "SPFx webpart which shows SharePoint list data in Accordion format",
|
||||
"listName": "FAQ",
|
||||
"totalItems":20,
|
||||
"totalItems": 20,
|
||||
"maxItemsPerPage": 5,
|
||||
"allowPaging":true
|
||||
"allowPaging": true,
|
||||
"customSortField": "",
|
||||
"sortById": false,
|
||||
"sortByModified": false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import * as React from 'react';
|
|||
import * as ReactDom from 'react-dom';
|
||||
import { Version, DisplayMode } from '@microsoft/sp-core-library';
|
||||
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
|
||||
import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField,PropertyPaneToggle } from "@microsoft/sp-property-pane";
|
||||
import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField, PropertyPaneToggle } from "@microsoft/sp-property-pane";
|
||||
|
||||
import * as strings from 'ReactAccordionWebPartStrings';
|
||||
import ReactAccordion from './components/ReactAccordion';
|
||||
|
|
@ -13,16 +13,19 @@ export interface IReactAccordionWebPartProps {
|
|||
choice: string;
|
||||
title: string;
|
||||
displayMode: DisplayMode;
|
||||
totalItems:number;
|
||||
totalItems: number;
|
||||
maxItemsPerPage: number;
|
||||
enablePaging:boolean;
|
||||
enablePaging: boolean;
|
||||
customSortField: string;
|
||||
sortById: boolean;
|
||||
sortByModified: boolean;
|
||||
updateProperty: (value: string) => void;
|
||||
}
|
||||
|
||||
export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactAccordionWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
|
||||
|
||||
const element: React.ReactElement<IReactAccordionProps> = React.createElement(
|
||||
ReactAccordion,
|
||||
{
|
||||
|
|
@ -31,9 +34,12 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactA
|
|||
siteUrl: this.context.pageContext.web.absoluteUrl,
|
||||
title: this.properties.title,
|
||||
displayMode: this.displayMode,
|
||||
totalItems:this.properties.totalItems,
|
||||
totalItems: this.properties.totalItems,
|
||||
maxItemsPerPage: this.properties.maxItemsPerPage,
|
||||
enablePaging:this.properties.enablePaging,
|
||||
enablePaging: this.properties.enablePaging,
|
||||
customSortField: this.properties.customSortField,
|
||||
sortById: this.properties.sortById,
|
||||
sortByModified: this.properties.sortByModified,
|
||||
updateProperty: (value: string) => {
|
||||
this.properties.title = value;
|
||||
}
|
||||
|
|
@ -53,10 +59,10 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactA
|
|||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
//set maxitems to top
|
||||
if(!this.properties.enablePaging){
|
||||
if (!this.properties.enablePaging) {
|
||||
this.properties.maxItemsPerPage = this.properties.totalItems;
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
|
|
@ -83,7 +89,7 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactA
|
|||
label: strings.EnablePagingLabel
|
||||
}),
|
||||
PropertyPaneSlider('maxItemsPerPage', {
|
||||
disabled:!this.properties.enablePaging,
|
||||
disabled: !this.properties.enablePaging,
|
||||
label: strings.MaxItemsPerPageLabel,
|
||||
ariaLabel: strings.MaxItemsPerPageLabel,
|
||||
min: 3,
|
||||
|
|
@ -91,6 +97,14 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactA
|
|||
value: 5,
|
||||
showValue: true,
|
||||
step: 1
|
||||
}),
|
||||
PropertyPaneTextField('customSortField', {
|
||||
label: strings.CustomSortOrder
|
||||
}),
|
||||
PropertyPaneToggle('sortById', {
|
||||
label: strings.SortById
|
||||
}),PropertyPaneToggle('sortByModified', {
|
||||
label: strings.SortByModified
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,5 +10,8 @@ export interface IReactAccordionProps {
|
|||
maxItemsPerPage: number;
|
||||
enablePaging:boolean;
|
||||
totalItems:number;
|
||||
customSortField:string;
|
||||
sortById:boolean;
|
||||
sortByModified:boolean;
|
||||
updateProperty: (value: string) => void;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,4 +7,5 @@ export interface IReactAccordionState {
|
|||
listItems: IAccordionListItem[];
|
||||
isLoading: boolean;
|
||||
loaderMessage: string;
|
||||
}
|
||||
error: string;
|
||||
}
|
||||
|
|
@ -30,7 +30,8 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
items: [],
|
||||
listItems: [],
|
||||
isLoading: false,
|
||||
loaderMessage: ''
|
||||
loaderMessage: '',
|
||||
error: ''
|
||||
};
|
||||
|
||||
if (!this.listNotConfigured(this.props)) {
|
||||
|
|
@ -73,8 +74,24 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
}
|
||||
|
||||
private readItems(): void {
|
||||
|
||||
let restAPI = this.props.siteUrl + `/_api/web/Lists/GetByTitle('${this.props.listName}')/items?$select=Title,Description&$top=${this.props.totalItems}`;
|
||||
|
||||
const orders = [];
|
||||
if (this.props.customSortField) {
|
||||
orders.push(this.props.customSortField);
|
||||
}
|
||||
if (this.props.sortById) {
|
||||
orders.push('ID');
|
||||
}
|
||||
if (this.props.sortByModified) {
|
||||
orders.push('Modified');
|
||||
}
|
||||
|
||||
const selects = `select=Title,Description${this.props.customSortField ? `,${this.props.customSortField}` : ''}`;
|
||||
|
||||
const restAPI = this.props.siteUrl + `/_api/web/Lists/GetByTitle('${this.props.listName}')/items?` +
|
||||
`$${selects}` +
|
||||
`${orders.length > 0 ? '&$orderby=' + orders.join(',') : ''}` +
|
||||
`&$top=${this.props.totalItems}`;
|
||||
|
||||
this.props.spHttpClient.get(restAPI, SPHttpClient.configurations.v1, {
|
||||
headers: {
|
||||
|
|
@ -86,6 +103,11 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
return response.json();
|
||||
})
|
||||
.then((response: { value: IAccordionListItem[] }): void => {
|
||||
if (!response.value) {
|
||||
this.setState({
|
||||
error: `No items were found, check the list Title and/or custom sort order field internal name`
|
||||
});
|
||||
}
|
||||
|
||||
let listItemsCollection = [...response.value];
|
||||
|
||||
|
|
@ -95,14 +117,16 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
items: response.value,
|
||||
listItems: response.value,
|
||||
isLoading: false,
|
||||
loaderMessage: ""
|
||||
loaderMessage: '',
|
||||
error: ''
|
||||
});
|
||||
}, (error: any): void => {
|
||||
this.setState({
|
||||
status: 'Loading all items failed with error: ' + error,
|
||||
pagedItems: [],
|
||||
isLoading: false,
|
||||
loaderMessage: ""
|
||||
loaderMessage: "",
|
||||
error: `Loading failed. Validate that you have entered a valid List Title and/or internal field name for the custom sort order ${error}`
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -110,6 +134,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
|
||||
public render(): React.ReactElement<IReactAccordionProps> {
|
||||
let displayLoader;
|
||||
let errorMessage;
|
||||
let faqTitle;
|
||||
let { items } = this.state;
|
||||
let pageCountDivisor: number = this.props.maxItemsPerPage;
|
||||
|
|
@ -149,7 +174,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
displayLoader = (null);
|
||||
}
|
||||
|
||||
if(this.props.enablePaging){
|
||||
if (this.props.enablePaging) {
|
||||
if (items.length > 0) {
|
||||
pageCount = Math.ceil(items.length / pageCountDivisor);
|
||||
}
|
||||
|
|
@ -157,6 +182,11 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
pageButtons.push(<PrimaryButton onClick={() => { _pagedButtonClick(i + 1, items); }}> {i + 1} </PrimaryButton>);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.error) {
|
||||
errorMessage = <div>{this.state.error}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.reactAccordion}>
|
||||
<div className={styles.container}>
|
||||
|
|
@ -175,7 +205,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
<div className={`ms-Grid-row`}>
|
||||
<div className='ms-Grid-col ms-u-lg12'>
|
||||
{this.state.status}
|
||||
<Accordion accordion={false}>
|
||||
<Accordion>
|
||||
{pagedItems}
|
||||
</Accordion>
|
||||
</div>
|
||||
|
|
@ -186,7 +216,8 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{errorMessage}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,9 @@ define([], function () {
|
|||
"ListNameLabel": "List Name",
|
||||
"MaxItemsPerPageLabel": "Max number of items per page",
|
||||
"EnablePagingLabel":"Enable Paging",
|
||||
"TotalItemsLabel":"Maximum items to retrieve"
|
||||
"TotalItemsLabel":"Maximum items to retrieve",
|
||||
"CustomSortOrder":"Custom sort order",
|
||||
"SortById":"Sort by ID",
|
||||
"SortByModified":"Sort by modified date"
|
||||
}
|
||||
});
|
||||
|
|
@ -5,6 +5,9 @@ declare interface IReactAccordionWebPartStrings {
|
|||
MaxItemsPerPageLabel: string;
|
||||
EnablePagingLabel: string;
|
||||
TotalItemsLabel:string;
|
||||
CustomSortOrder:string;
|
||||
SortById:string;
|
||||
SortByModified:string;
|
||||
}
|
||||
|
||||
declare module 'ReactAccordionWebPartStrings' {
|
||||
|
|
|
|||
|
|
@ -6,9 +6,14 @@ A version of [react-adaptivecards](https://github.com/pnp/sp-dev-fx-webparts/tre
|
|||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -29,12 +34,6 @@ Version|Date|Comments
|
|||
1.0|April 27, 2020|Initial release
|
||||
2.0|August 25, 2020|Upgraded to SPFx 1.11 and added support for May 2020 changes to Adaptive Cards
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
* Clone this repository
|
||||
|
|
@ -55,5 +54,20 @@ Version|Date|Comments
|
|||
| AdaptiveCardHost.tsx | React Function component | Renders placeholder if template/data are missing. Handles card actions. |
|
||||
| AdaptiveCard.tsx | React Class component | Responsible for rendering adaptive card and expanding card with data |
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-adaptivecards-hooks&authors=@pschaeflein&title=react-adaptivecards-hooks%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-adaptivecards-hooks&authors=@pschaeflein&title=react-adaptivecards-hooks%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-adaptivecards-hooks&authors=@pschaeflein&title=react-adaptivecards-hooks%20-%20).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-adaptivecards-hooks" />
|
||||
|
||||
|
|
|
|||
|
|
@ -16,11 +16,14 @@ Attempts to replicate the functionality of Page Properties with the following im
|
|||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ Calendar Web Part|[Eli H. Schei](https://github.com/Eli-Schei)
|
|||
Calendar Web Part|[Hugo Bernier](https://github.com/hugoabernier) ([@bernier](https://twitter.com/bernierh), [Tahoe Ninjas](https://tahoeninjas.blog/))
|
||||
Calendar Web Part|[João Mendes](https://github.com/joaojmendes)
|
||||
Calendar Web Part|[Mohamed Derhalli](https://github.com/derhallim)
|
||||
Calendar Web PArt|[Mohammed Amer](https://www.linkedin.com/in/mohammad3mer/) ([@Mohammad3mer](https://twitter.com/Mohammad3mer))
|
||||
Calendar Web PArt|[Mohammed Amer](https://github.com/mohammadamer) ([@Mohammad3mer](https://twitter.com/Mohammad3mer), https://www.linkedin.com/in/mohammad3mer/)
|
||||
Calendar Web Part|[Nanddeep Nachan](https://github.com/nanddeepn) ([@NanddeepNachan](https://twitter.com/NanddeepNachan))
|
||||
|
||||
## Version history
|
||||
|
|
@ -139,6 +139,7 @@ Version|Date|Comments
|
|||
1.0.10|March 27, 2021|Updated prompt message when deleting single v/s multi-event.
|
||||
1.0.11|May 10, 2021|Optimized page refresh using local storage
|
||||
1.0.12|June 21, 2021|Fixes overlap with Year-view and the comment section by adding a vertical scrollbar.
|
||||
1.0.13|October 2, 2021|Fix to make sure Today is always visible and highlighted.
|
||||
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
|
@ -160,11 +161,11 @@ Version|Date|Comments
|
|||
|
||||
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
|
||||
|
||||
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-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
|
||||
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-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@mohammadamer,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%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-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%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-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@mohammadamer,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%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-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@hugoabernier,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%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-calendar&authors=@Abderahman88,%20@Eli-Schei,%20@mohammadamer,%20@joaojmendes,%20@derhallim,%20@nanddeepn,%20@mohammadamer&title=react-calendar%20-%20).
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"This Web Part allows you to manage events in a calendar. Uses a list of existing calendars on any website. The location and name of the list and the dates of the events to be displayed are defined in the properties of the web part."
|
||||
],
|
||||
"created": "2020-12-04",
|
||||
"modified": "2021-07-14",
|
||||
"modified": "2021-10-02",
|
||||
"products": [
|
||||
"SharePoint",
|
||||
"Office"
|
||||
|
|
|
|||
|
|
@ -4,50 +4,52 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.month {
|
||||
margin: 5px 10px 15px 10px;
|
||||
}
|
||||
.month {
|
||||
margin: 5px 10px 15px 10px;
|
||||
|
||||
.monthName {
|
||||
color: $ms-color-themeDark;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.monthName {
|
||||
color: $ms-color-themePrimary;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.day {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border: dotted 1px;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
.day {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border: dotted 1px;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
|
||||
.date {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: white;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.date {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
.date.inMonth:hover {
|
||||
cursor: pointer;
|
||||
background: $ms-color-themeDark;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.inMonth {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: $ms-color-themePrimary;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.today {
|
||||
background: $ms-color-themeDark;
|
||||
}
|
||||
&.today {
|
||||
background: $ms-color-themePrimary;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.date.prevMonth,
|
||||
.date.nextMonth {
|
||||
color: grey;
|
||||
.date.prevMonth,
|
||||
.date.nextMonth {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ function CalendarDate(props) {
|
|||
const { dateToRender, dateOfMonth } = props;
|
||||
const today =
|
||||
dateToRender.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')
|
||||
? 'today'
|
||||
? styles.today
|
||||
: '';
|
||||
|
||||
if (dateToRender.month() < dateOfMonth.month()) {
|
||||
|
|
|
|||
|
|
@ -170,7 +170,14 @@ This sample shows how to use X and Y coordinate data elements in a scatter chart
|
|||
|
||||
## Compatibility
|
||||
|
||||
    
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
|
||||
## Summary
|
||||
|
||||
Search People from Organization Directory and show live persona card on hover.
|
||||
|
||||
Search People from Organization Directory and show live persona card on hover.
|
||||
|
||||
##
|
||||
|
||||
|
|
@ -32,12 +31,14 @@
|
|||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -77,13 +78,6 @@ Version|Date|Comments
|
|||
3.0.0|Oct 17 2020|Minor fixes and add the additional web part property.
|
||||
3.0.1|March 4 2021|Bugfix 'Sort People by'
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
|
|
@ -92,6 +86,20 @@ Version|Date|Comments
|
|||
- `gulp build`
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
- `Add to AppCatalog and deploy`
|
||||
- Add to AppCatalog and deploy
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-directory&authors=@joaojmendes%20@petkir%20@sudharsank%20@Abderahman88&title=react-directory%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-directory&authors=@joaojmendes%20@petkir%20@sudharsank%20@Abderahman88&title=react-directory%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-directory&authors=@joaojmendes%20@petkir%20@sudharsank%20@Abderahman88&title=react-directory%20-%20).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-directory" />
|
||||
|
|
|
|||
|
|
@ -29,9 +29,16 @@ Below NPM packages are used to develop this sample.
|
|||
2. react-orgchart (https://www.npmjs.com/package/react-orgchart)
|
||||
3. array-to-tree (https://www.npmjs.com/package/array-to-tree)
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -52,12 +59,6 @@ Version|Date|Comments
|
|||
2.0.0|November 21, 2020|Upgraded to SPFx v1.11.0 (Nanddeep Nachan)
|
||||
1.0.0|October 15, 2018|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.**
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- SharePoint Online tenant
|
||||
|
|
@ -93,4 +94,18 @@ This sample web part shows how data stored in SharePoint list can be transformed
|
|||
[figure5]: ./assets/list-sample-data.png
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-display-hierarchy" />
|
||||
## 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.**
|
||||
|
||||
## 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-display-hierarchy&authors=@nanddeepn%20@ravi16a87&title=react-display-hierarchy%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-display-hierarchy&authors=@nanddeepn%20@ravi16a87&title=react-display-hierarchy%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-display-hierarchy&authors=@nanddeepn%20@ravi16a87&title=react-display-hierarchy%20-%20).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-display-hierarchy" />
|
||||
|
|
@ -22,9 +22,18 @@ This web part will allow users to view/update application customizers properties
|
|||
- Allows to update application customizer properties which makes it easy to make re-useable application customizers
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -45,12 +54,6 @@ Version|Date|Comments
|
|||
-------|----|--------
|
||||
1.0|October 16, 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
|
|
@ -62,8 +65,6 @@ Version|Date|Comments
|
|||
|
||||
For any issue or help, Buzz us on twitter:([sanganikunj](https://twitter.com/sanganikunj)) or ([siddh_me](https://twitter.com/siddh_me/))
|
||||
|
||||
> Sharing is caring!
|
||||
|
||||
## References
|
||||
|
||||
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
|
@ -72,4 +73,21 @@ For any issue or help, Buzz us on twitter:([sanganikunj](https://twitter.com/san
|
|||
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-edit-applicationcustomizers&authors=@kunj-sangani%20@siddharth-vaghasia&title=react-edit-applicationcustomizers%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-edit-applicationcustomizers&authors=@kunj-sangani%20@siddharth-vaghasia&title=react-edit-applicationcustomizers%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-edit-applicationcustomizers&authors=@kunj-sangani%20@siddharth-vaghasia&title=react-edit-applicationcustomizers%20-%20).
|
||||
|
||||
|
||||
> Sharing is caring!
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-edit-applicationcustomizers" />
|
||||
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 383 B After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1,33 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
release
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.12.1",
|
||||
"libraryName": "react-emoji-reaction-rating",
|
||||
"libraryId": "fe292bb9-a5c2-40b4-b90b-61e8510c3c09",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
# Emoji Ratings
|
||||
|
||||
## Summary
|
||||
|
||||
This is sample web part which can be used to take emoji based reaction or feedback for particular news/article/posts.
|
||||
We all know every organizations would be using SharePoint news features for company's internal communications from HR to IT updates and some time annoucements. News created in SharePoint are created as Pages in library. Idea behind this web part is to take employee/user's feedback as emoji reactions on particular news. This web part can also be used on wiki articles or blog posts to take similar reactions. Web part uses concept of 1 to 5 star based rating system(configurable), you can decide low to high based on your preference.
|
||||
|
||||
Ideally, we can do some automation using PnP Powershell and PowerAutomate (trigger when item is created ) to add this web part to any every news that is published.
|
||||
|
||||
If you wish to directly use the package in your tenant here is [link](https://github.com/siddharth-vaghasia/public-docs/blob/master/react-emoji-reaction-rating.sppkg) to download.
|
||||
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* Configurable header text, rating text, and images
|
||||
* We can choose to show from minimum one rating to max 5 rating images and text
|
||||
* Option to show total count of particular rating count as badge
|
||||
* Option to show and capture comments from user when submitting feedback
|
||||
* Display current user's rating selection with highlighted background
|
||||
* Allow user to change rating(update rating)
|
||||
* Stores ratings in SharePoint List
|
||||
* Option to create list on the fly and choose list to store the ratings
|
||||
* Option for admin to choose background color
|
||||
|
||||
## Technical Notes
|
||||
|
||||
* User's rating data would be stored in SP List, below are list of columns and its relevance
|
||||
|
||||
1. `Title`: To store user's display name (not required though)
|
||||
2. `Page Name`: To store page on which rating is given by particular user, this will have absolute url of page
|
||||
3. `User`: To store user who has given feedback for particular page/news where web part is added
|
||||
4. `Comment`: To store comment provided by user while submitting reaction.
|
||||
5. Then there are 5 columns `Rating1`, `Rating2`, `Rating3`, `Rating4`, `Rating5` which will store the rating text configured by admin in web part... Only one of this 5 columns would be populated for single item in list, which is what user has selected as part of giving reaction
|
||||
|
||||
* Below is how you can configure emoji's text and its image url
|
||||
|
||||
|
||||
I have added default emoji's images which can be used and uploaded to SharePoint library in the assets folder of this solution.
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
- [SharePoint Framework](https://aka.ms/spfx)
|
||||
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
* SharePoint Online tenant
|
||||
* Permission to deploy package to Tenant or SharePoint Site collection app catalog
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-emoji-ratings | [Siddharth Vaghasia](https://github.com/siddharth-vaghasia) ([@siddh_me](https://twitter.com/siddh_me))
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|Sep 04, 2021|Initial release
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Ensure that you are at the solution folder
|
||||
- in the command-line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
## References
|
||||
|
||||
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
|
||||
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-emoji-ratings&authors=@siddharth-vaghasia&title=react-emoji-ratings%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-emoji-ratings&authors=@siddharth-vaghasia&title=react-emoji-ratings%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-emoji-ratings&authors=@siddharth-vaghasia&title=react-emoji-ratings%20-%20).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-emoji-ratings" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -0,0 +1,55 @@
|
|||
[
|
||||
{
|
||||
"name": "pnp-sp-dev-spfx-web-parts-react-emoji-ratings",
|
||||
"source": "pnp",
|
||||
"title": "Emoji Ratings",
|
||||
"shortDescription": "Take emoji-based reactions or feedback for a given news/article/post",
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-emoji-ratings",
|
||||
"longDescription": [
|
||||
"This is sample web part which can be used to take emoji based reaction or feedback for particular news/article/posts.",
|
||||
"We all know every organizations would be using SharePoint news features for company's internal communications from HR to IT updates and some time annoucements. News created in SharePoint are created as Pages in library. Idea behind this web part is to take employee/user's feedback as emoji reactions on particular news. This web part can also be used on wiki articles or blog posts to take similar reactions. Web part uses concept of 1 to 5 star based rating system(configurable), you can decide low to high based on your preference."
|
||||
],
|
||||
"creationDateTime": "2021-09-24",
|
||||
"updateDateTime": "2021-09-24",
|
||||
"products": [
|
||||
"SharePoint",
|
||||
"Office"
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.12.1"
|
||||
},
|
||||
{
|
||||
"key": "PNPCONTROLS",
|
||||
"value": "PropertyFieldCollectionData, PropertyFieldColorPicker, Placeholder"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-emoji-ratings/assets/EmojiWPinAction.gif",
|
||||
"alt": "Web part in action"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "siddharth-vaghasia",
|
||||
"pictureUrl": "https://github.com/siddharth-vaghasia.png",
|
||||
"name": "Siddharth Vaghasia"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"name": "Build your first SharePoint client-side web part",
|
||||
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"react-emoji-reaction-rating-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/reactEmojiReactionRating/ReactEmojiReactionRatingWebPart.js",
|
||||
"manifest": "./src/webparts/reactEmojiReactionRating/ReactEmojiReactionRatingWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"ReactEmojiReactionRatingWebPartStrings": "lib/webparts/reactEmojiReactionRating/loc/{locale}.js",
|
||||
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
|
||||
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "./release/assets/"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-emoji-reaction-rating",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "react-emoji-reaction-rating-client-side-solution",
|
||||
"id": "fe292bb9-a5c2-40b4-b90b-61e8510c3c09",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
"name": "",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": ""
|
||||
}
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-emoji-reaction-rating.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
'use strict';
|
||||
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "react-emoji-reaction-rating",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@microsoft/sp-core-library": "1.12.1",
|
||||
"@microsoft/sp-lodash-subset": "1.12.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.12.1",
|
||||
"@microsoft/sp-property-pane": "1.12.1",
|
||||
"@microsoft/sp-webpart-base": "1.12.1",
|
||||
"@pnp/sp": "^2.8.0",
|
||||
"@pnp/spfx-controls-react": "3.3.0",
|
||||
"@pnp/spfx-property-controls": "3.2.0",
|
||||
"office-ui-fabric-react": "7.156.0",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "16.9.36",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@microsoft/sp-build-web": "1.12.1",
|
||||
"@microsoft/sp-tslint-rules": "1.12.1",
|
||||
"@microsoft/sp-module-interfaces": "1.12.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.12.1",
|
||||
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
|
||||
"gulp": "~4.0.2",
|
||||
"ajv": "~5.2.2",
|
||||
"@types/webpack-env": "1.13.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "0dbbad17-3a6b-44ed-8ebb-989a8dd906b5",
|
||||
"alias": "ReactEmojiReactionRatingWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||
// 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
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": ["SharePointWebPart"],
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||
"group": { "default": "Other" },
|
||||
"title": { "default": "react-emoji-reaction-rating" },
|
||||
"description": { "default": "react-emoji-reaction-rating description" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"propertyRatingText": "React emoji reaction rating web part!. How does you like this news/article? ",
|
||||
"propertyEmojisCollection":[
|
||||
{"Title":"Wow!","ImageUrl":"https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg1.png"},
|
||||
{"Title":"Mmm","ImageUrl":"https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg2.png"},
|
||||
{"Title":"Hmm","ImageUrl":"https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg3.png"},
|
||||
{"Title":"Meh","ImageUrl":"https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg4.png"},
|
||||
{"Title":"Pff","ImageUrl":"https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg5.png"}
|
||||
|
||||
],
|
||||
/* "propertyListName":"EmojiReactionRating", */
|
||||
"propertyEnableComments":"True",
|
||||
"propertyEnableCount":"True"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneButton,
|
||||
PropertyPaneButtonType,
|
||||
PropertyPaneDropdown,
|
||||
PropertyPaneTextField,
|
||||
PropertyPaneToggle
|
||||
} from '@microsoft/sp-property-pane';
|
||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||
import { sp } from "@pnp/sp";
|
||||
|
||||
import * as strings from 'ReactEmojiReactionRatingWebPartStrings';
|
||||
import ReactEmojiReactionRating from './components/ReactEmojiReactionRating';
|
||||
import { IReactEmojiReactionRatingProps } from './components/IReactEmojiReactionRatingProps';
|
||||
import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';
|
||||
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
|
||||
|
||||
import spService from './components/services/spService';
|
||||
import { result } from 'lodash';
|
||||
|
||||
export interface IReactEmojiReactionRatingWebPartProps {
|
||||
propertyRatingText: string;
|
||||
propertyEmojisCollection: any[];
|
||||
propertyEnableComments: boolean;
|
||||
propertyEnableCount: boolean;
|
||||
propertySelectedColor: string;
|
||||
propertyListName: string;
|
||||
propertyListOperationMessage: string;
|
||||
}
|
||||
|
||||
|
||||
export default class ReactEmojiReactionRatingWebPart extends BaseClientSideWebPart<IReactEmojiReactionRatingWebPartProps> {
|
||||
|
||||
private _spService: spService = null;
|
||||
public render(): void {
|
||||
|
||||
const element: React.ReactElement<IReactEmojiReactionRatingProps> = React.createElement(
|
||||
ReactEmojiReactionRating,
|
||||
{
|
||||
ratingText: this.properties.propertyRatingText,
|
||||
emojisCollection: this.properties.propertyEmojisCollection,
|
||||
context: this.context,
|
||||
enableComments: this.properties.propertyEnableComments,
|
||||
enableCount: this.properties.propertyEnableCount,
|
||||
selectedColor: this.properties.propertySelectedColor,
|
||||
listName: this.properties.propertyListName,
|
||||
displayMode: this.displayMode,
|
||||
listMessage: this.properties.propertyListOperationMessage,
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
private validateListName(value: string): string {
|
||||
if (value === null ||
|
||||
value.trim().length === 0) {
|
||||
return 'Provide a list name';
|
||||
}
|
||||
else {
|
||||
console.log("List Name: ", value);
|
||||
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public onInit(): Promise<void> {
|
||||
this._spService = new spService(this.context);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
private btnListSchemaCreation(val: any): any {
|
||||
const colListColumns = ['Pagename', 'User', 'Rating1', 'Rating2', 'Rating3', 'Rating4', 'Rating5', 'Comments'];
|
||||
console.log("colListColumns: ", colListColumns);
|
||||
let listName = this.properties.propertyListName;
|
||||
console.log("listName: ", listName);
|
||||
|
||||
this._spService._createListwithColumns(listName, colListColumns).then((res) => {
|
||||
console.log(res);
|
||||
//this.properties.propertyListOperationMessage = result;
|
||||
//this.context.propertyPane.refresh();
|
||||
alert(res);
|
||||
|
||||
}).catch(error => {
|
||||
console.log("Something went wrong! please contact admin for more information.", error);
|
||||
// this.properties.propertyListOperationMessage = "Something went wrong! please contact admin for more information."
|
||||
// this.context.propertyPane.refresh();
|
||||
let errMessage = (error.mesaage || error.Mesaage);
|
||||
alert("Something went wrong! please contact admin for more information. "+ errMessage);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('propertyListName', {
|
||||
label: strings.ListNameFieldLabel,
|
||||
description: "If you want to create new list, please enter list name and click on create list button",
|
||||
validateOnFocusOut: true,
|
||||
onGetErrorMessage: this.validateListName.bind(this),
|
||||
|
||||
}),
|
||||
PropertyPaneButton('propertyListSchemaButton',
|
||||
{
|
||||
text: strings.ListSchemaFieldLablel,
|
||||
buttonType: PropertyPaneButtonType.Primary,
|
||||
onClick: this.btnListSchemaCreation.bind(this)
|
||||
}),
|
||||
PropertyPaneTextField('propertyRatingText', {
|
||||
label: strings.RatingTextFieldLabel
|
||||
}),
|
||||
PropertyFieldCollectionData("propertyEmojisCollection", {
|
||||
key: "emojisCollection",
|
||||
label: strings.EmojisCollectionFieldLabel,//"Emojis Collection",
|
||||
panelHeader: "Emojis collection panel header",
|
||||
manageBtnLabel: "Manage emojis collection",
|
||||
value: this.properties.propertyEmojisCollection,
|
||||
fields: [
|
||||
{
|
||||
|
||||
id: "Title",
|
||||
title: "Title",
|
||||
type: CustomCollectionFieldType.string,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
id: "ImageUrl",
|
||||
title: "ImageUrl",
|
||||
type: CustomCollectionFieldType.url,
|
||||
required: true
|
||||
|
||||
}
|
||||
],
|
||||
disabled: false,
|
||||
disableItemCreation: true,
|
||||
disableItemDeletion: true,
|
||||
}),
|
||||
PropertyPaneToggle('propertyEnableComments', {
|
||||
label: strings.EnableCommentsFieldLablel
|
||||
}),
|
||||
PropertyPaneToggle('propertyEnableCount', {
|
||||
label: strings.EnableCountFieldLablel
|
||||
}),
|
||||
PropertyFieldColorPicker('propertySelectedColor', {
|
||||
label: 'Select background color',
|
||||
selectedColor: this.properties.propertySelectedColor,
|
||||
onPropertyChange: this.onPropertyPaneFieldChanged,
|
||||
properties: this.properties,
|
||||
disabled: false,
|
||||
debounce: 1000,
|
||||
isHidden: false,
|
||||
alphaSliderHidden: false,
|
||||
style: PropertyFieldColorPickerStyle.Full,
|
||||
iconName: 'Precipitation',
|
||||
key: 'colorFieldId'
|
||||
}),
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
|
||||
export interface IReactEmojiReactionRatingProps {
|
||||
ratingText: string;
|
||||
emojisCollection: any[];
|
||||
context: WebPartContext;
|
||||
enableComments: boolean;
|
||||
enableCount: boolean;
|
||||
selectedColor: string;
|
||||
listName: string;
|
||||
displayMode: any;
|
||||
listMessage: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
export interface IReactEmojiReactionRatingState {
|
||||
selectedRatingIndex: Number | null;
|
||||
selectedRatingValue: string | null;
|
||||
0: Number | null;
|
||||
1: Number | null;
|
||||
2: Number | null;
|
||||
3: Number | null;
|
||||
4: Number | null;
|
||||
RatingComments: string;
|
||||
CustomMessage: string;
|
||||
configLoaded: boolean;
|
||||
isDialogHidden: boolean;
|
||||
dialogTitle: string;
|
||||
dialogBody: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.reactEmojiReactionRating {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
/* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
|
||||
.row {
|
||||
@include ms-Grid-row;
|
||||
@include ms-fontColor-gray200;
|
||||
//background-color: $ms-color-themeDark;
|
||||
/* background-color: #F5EFDF !important; */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column10 {
|
||||
@include ms-Grid-col;
|
||||
@include ms-lg10;
|
||||
}
|
||||
|
||||
/* @include ms-xl8;
|
||||
@include ms-xlPush2;
|
||||
@include ms-lgPush1; */
|
||||
|
||||
.column2 {
|
||||
@include ms-Grid-col;
|
||||
@include ms-lg2;
|
||||
}
|
||||
|
||||
.title {
|
||||
/* @include ms-font-xl;
|
||||
@include ms-fontColor-gray200; */
|
||||
}
|
||||
|
||||
.selectedEmoji {
|
||||
background-color: firebrick !important;
|
||||
border-radius: 14px !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
/* @include ms-font-l;
|
||||
@include ms-fontColor-gray200; */
|
||||
}
|
||||
|
||||
.description {
|
||||
/* @include ms-font-l;
|
||||
@include ms-fontColor-gray200; */
|
||||
font-weight: 300;
|
||||
/* font-size: large; */
|
||||
}
|
||||
|
||||
|
||||
.lblCountClass {
|
||||
background-color: #ddd;
|
||||
border: none;
|
||||
color: black;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 4px 2px;
|
||||
border-radius: 16px;
|
||||
|
||||
}
|
||||
|
||||
.btnCountClass {
|
||||
background-color: #ddd;
|
||||
border: none;
|
||||
color: black;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 4px 2px;
|
||||
border-radius: 16px;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.txtArea {
|
||||
color: grey !important;
|
||||
}
|
||||
|
||||
.txtArea label {
|
||||
color: grey !important;
|
||||
}
|
||||
|
||||
.stackImage {
|
||||
cursor: 'pointer' !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
.labelClass {
|
||||
text-align: center !important;
|
||||
color: grey !important;
|
||||
}
|
||||
|
||||
|
||||
.button1 {
|
||||
// Our button
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
|
||||
// Primary Button
|
||||
min-width: 80px;
|
||||
background-color: $ms-color-themePrimary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
color: $ms-color-white;
|
||||
|
||||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $ms-font-size-m;
|
||||
font-weight: $ms-font-weight-regular;
|
||||
border-width: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
.label {
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
font-size: $ms-font-size-m;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,474 @@
|
|||
import * as React from 'react';
|
||||
import styles from './ReactEmojiReactionRating.module.scss';
|
||||
import { IReactEmojiReactionRatingProps } from './IReactEmojiReactionRatingProps';
|
||||
import { IReactEmojiReactionRatingState } from './IReactEmojiReactionRatingState';
|
||||
import { DisplayMode, Environment, EnvironmentType } from '@microsoft/sp-core-library';
|
||||
import spService from './services/spService';
|
||||
import {
|
||||
TextField, Stack, Label, PrimaryButton
|
||||
} from '@microsoft/office-ui-fabric-react-bundle';
|
||||
import Badge from '@material-ui/core/Badge/Badge';
|
||||
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
|
||||
import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react';
|
||||
|
||||
export default class ReactEmojiReactionRating extends React.Component<IReactEmojiReactionRatingProps, IReactEmojiReactionRatingState> {
|
||||
private _spService: spService = null;
|
||||
private _message = null;
|
||||
private _currentContext = null;
|
||||
private listName = this.props.listName ? this.props.listName : "EmojiReactionRating";
|
||||
private existingRating: any;
|
||||
constructor(prop: IReactEmojiReactionRatingProps, state: IReactEmojiReactionRatingState) {
|
||||
super(prop);
|
||||
this.state = {
|
||||
selectedRatingIndex: null,
|
||||
selectedRatingValue: "",
|
||||
0: 0,
|
||||
1: 0,
|
||||
2: 0,
|
||||
3: 0,
|
||||
4: 0,
|
||||
RatingComments: "",
|
||||
CustomMessage: "",
|
||||
configLoaded: false,
|
||||
isDialogHidden: true,
|
||||
dialogTitle: "",
|
||||
dialogBody: "",
|
||||
};
|
||||
|
||||
|
||||
|
||||
this._currentContext = this.props.context;
|
||||
this._spService = new spService(this.props.context);
|
||||
if (Environment.type === EnvironmentType.SharePoint) {
|
||||
// this.getItems();
|
||||
// console.log("items: ", items);
|
||||
}
|
||||
else if (Environment.type === EnvironmentType.Local) {
|
||||
this._message = <div>Whoops! you are using local host...</div>;
|
||||
}
|
||||
|
||||
this.selectedRating = this.selectedRating.bind(this);
|
||||
this.submitRating = this.submitRating.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this._onConfigure = this._onConfigure.bind(this);
|
||||
this.closeDialog = this.closeDialog.bind(this);
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
if (this.props.enableCount) {
|
||||
this.getItems();
|
||||
}
|
||||
if (this.props.listName && (this.props.emojisCollection.length > 0)) {
|
||||
this.setState({ configLoaded: true });
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidUpdate(previousProps, previousState) {
|
||||
if (previousProps.listName !== this.props.listName) {
|
||||
if (this.props.listName && (this.props.emojisCollection.length > 0)) {
|
||||
this.setState({ configLoaded: true });
|
||||
//this.getItems();
|
||||
}
|
||||
}
|
||||
|
||||
if (previousProps.listMessage !== this.props.listMessage) {
|
||||
this.ShowDialogMessage("List Creation", this.props.listMessage);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private submitRating(event) {
|
||||
|
||||
let ratingCommnets = this.state.RatingComments ? (this.state.RatingComments).trim() : "";
|
||||
//let selectedRatingIndex = parseInt(event.target.id);
|
||||
//let selectedRatingIndex = event.target.tabIndex;
|
||||
// let selectedRatingValue = event.target.title;
|
||||
|
||||
let selectedRatingIndex = this.state.selectedRatingIndex;
|
||||
let selectedRatingValue = this.state.selectedRatingValue;
|
||||
let ratingField;
|
||||
|
||||
switch (selectedRatingIndex) {
|
||||
case 0:
|
||||
ratingField = "Rating1";
|
||||
break;
|
||||
case 1:
|
||||
ratingField = "Rating2";
|
||||
break;
|
||||
case 2:
|
||||
ratingField = "Rating3";
|
||||
break;
|
||||
case 3:
|
||||
ratingField = "Rating4";
|
||||
break;
|
||||
case 4:
|
||||
ratingField = "Rating5";
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
if (!(ratingField)) {
|
||||
console.log("Something went wrong! Please check with Admin.");
|
||||
return false;
|
||||
}
|
||||
|
||||
//let pageName = window.location.pathname.substring(window.location.pathname.lastIndexOf("/") + 1);
|
||||
/* let pageName = window.location.href;
|
||||
let body: IRatingNewItem = {
|
||||
Title: this._currentContext.pageContext.user.displayName,
|
||||
Pagename: pageName ? pageName : window.location.href,
|
||||
User: this._currentContext?.pageContext.user.loginName,
|
||||
Comment: this.props.enableComments ? ratingCommnets : "",
|
||||
|
||||
}
|
||||
//adding the right rating column and value
|
||||
body[ratingColumn] = selectedRatingValue;
|
||||
console.log("body object is: ", body); */
|
||||
|
||||
let pageName = window.location.href;
|
||||
let body: any = {
|
||||
Title: this._currentContext.pageContext.user.displayName,
|
||||
Pagename: pageName ? pageName : window.location.href,
|
||||
User: this._currentContext?.pageContext.user.loginName,
|
||||
Comments: this.props.enableComments ? ratingCommnets : "",
|
||||
Rating1: "",
|
||||
Rating2: "",
|
||||
Rating3: "",
|
||||
Rating4: "",
|
||||
Rating5: "",
|
||||
};
|
||||
|
||||
body[ratingField] = selectedRatingValue;
|
||||
console.log("body object is: ", body);
|
||||
|
||||
if (!this.existingRating) {
|
||||
this._spService._addRatingItem(this.listName, body)
|
||||
.then(value => {
|
||||
// alert("Rating submitted successfully, thank you!");
|
||||
//this.setState({ CustomMessage: "Rating submitted successfully, thank you!" });
|
||||
console.log("Rating submitted successfully, thank you!", value.data.id);
|
||||
|
||||
this.ShowDialogMessage("Rating submitted", "Your rating submitted successfully, thank you!");
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Something went wrong! please contact admin for more information.");
|
||||
this.ShowDialogError(error, "Something went wrong! please contact admin for more information.");
|
||||
});
|
||||
}
|
||||
else {
|
||||
this._spService._updateRatingItem(this.listName, body, this.existingRating.Id)
|
||||
.then(value => {
|
||||
console.log("Rating updated successfully, thank you!", value.data.id);
|
||||
this.ShowDialogMessage("Rating updated", "Your rating updated successfully, thank you!");
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Something went wrong! please contact admin for more information.");
|
||||
this.ShowDialogError(error, "Something went wrong! please contact admin for more information.");
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
private async getItems() {
|
||||
|
||||
console.log("getItems: ", this._currentContext);
|
||||
let ratingItems = await this._spService.getRatingListItems(this.listName);
|
||||
console.log("ratingItems: ", ratingItems);
|
||||
console.log("this.props.emojisCollection: ", this.props.emojisCollection.length);
|
||||
let column1ValIndex, column2ValIndex, column3ValIndex, column4ValIndex, column5ValIndex;
|
||||
|
||||
for (let i = this.props.emojisCollection.length; i > 0; i--) {
|
||||
switch (i) {
|
||||
case 5:
|
||||
column1ValIndex = this.props.emojisCollection.length - i;
|
||||
break;
|
||||
case 4:
|
||||
column2ValIndex = this.props.emojisCollection.length - i;
|
||||
break;
|
||||
case 3:
|
||||
column3ValIndex = this.props.emojisCollection.length - i;
|
||||
break;
|
||||
case 2:
|
||||
column4ValIndex = this.props.emojisCollection.length - i;
|
||||
break;
|
||||
case 1:
|
||||
column5ValIndex = this.props.emojisCollection.length - i;
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
let pageRatings = await ratingItems.filter((element)=> {
|
||||
return (element["Pagename"] == window.location.href
|
||||
);
|
||||
});
|
||||
|
||||
Promise.all([
|
||||
this.getRatingCount(pageRatings, 'Rating1', this.props.emojisCollection[column1ValIndex].Title),
|
||||
this.getRatingCount(pageRatings, 'Rating2', this.props.emojisCollection[column2ValIndex].Title),
|
||||
this.getRatingCount(pageRatings, 'Rating3', this.props.emojisCollection[column3ValIndex].Title),
|
||||
this.getRatingCount(pageRatings, 'Rating4', this.props.emojisCollection[column4ValIndex].Title),
|
||||
this.getRatingCount(pageRatings, 'Rating5', this.props.emojisCollection[column5ValIndex].Title),
|
||||
])
|
||||
.then(results => {
|
||||
console.log("countRating1: ", results[0]);
|
||||
console.log("countRating2: ", results[1]);
|
||||
console.log("countRating3: ", results[2]);
|
||||
console.log("countRating4: ", results[3]);
|
||||
console.log("countRating5: ", results[4]);
|
||||
|
||||
this.setState(
|
||||
{
|
||||
0: results[0],
|
||||
1: results[1],
|
||||
2: results[2],
|
||||
3: results[3],
|
||||
4: results[4]
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Error in getting the rating count!");
|
||||
});
|
||||
|
||||
let userLogin = this._currentContext.pageContext.user.loginName;
|
||||
let userSelectedRating = await ratingItems.filter((element)=> {
|
||||
return (element["Pagename"] == window.location.href
|
||||
&& (element["User"] == userLogin));
|
||||
});
|
||||
|
||||
console.log("userSelectedRating: ", userSelectedRating[0]);
|
||||
|
||||
this.existingRating = userSelectedRating[0];
|
||||
let currentUserRatingVal = "";
|
||||
let currentUserRatingColumn = "";
|
||||
//this.props.emojisCollection
|
||||
if (userSelectedRating[0]["Rating1"]) {
|
||||
currentUserRatingVal = userSelectedRating[0]["Rating1"];
|
||||
currentUserRatingColumn = "Rating1";
|
||||
|
||||
}
|
||||
else if (userSelectedRating[0]["Rating2"]) {
|
||||
currentUserRatingVal = userSelectedRating[0]["Rating2"];
|
||||
currentUserRatingColumn = "Rating2";
|
||||
|
||||
}
|
||||
else if (userSelectedRating[0]["Rating3"]) {
|
||||
currentUserRatingVal = userSelectedRating[0]["Rating3"];
|
||||
currentUserRatingColumn = "Rating3";
|
||||
|
||||
}
|
||||
else if (userSelectedRating[0]["Rating4"]) {
|
||||
currentUserRatingVal = userSelectedRating[0]["Rating4"];
|
||||
currentUserRatingColumn = "Rating4";
|
||||
|
||||
}
|
||||
else if (userSelectedRating[0]["Rating5"]) {
|
||||
currentUserRatingVal = userSelectedRating[0]["Rating5"];
|
||||
currentUserRatingColumn = "Rating5";
|
||||
|
||||
}
|
||||
|
||||
let userSelectedRatingIndex;
|
||||
await this.props.emojisCollection.filter((element, tabIndex)=> {
|
||||
if ((element["Title"] == currentUserRatingVal)) {
|
||||
userSelectedRatingIndex = tabIndex;
|
||||
return tabIndex;
|
||||
}
|
||||
});
|
||||
console.log("userSelectedRatingIndex: ", userSelectedRatingIndex);
|
||||
this.setState({
|
||||
selectedRatingIndex: userSelectedRatingIndex,
|
||||
selectedRatingValue: currentUserRatingVal
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
private async getRatingCount(items: any[], colName: string, colValue: string) {
|
||||
let ratingCount = await items.filter((element)=> {
|
||||
return element[colName] == colValue;
|
||||
}).length;
|
||||
|
||||
return ratingCount;
|
||||
}
|
||||
|
||||
|
||||
private selectedRating(event) {
|
||||
let selectedRatingIndex = event.target.tabIndex;
|
||||
let selectedRatingValue = event.target.title;
|
||||
|
||||
this.setState({
|
||||
selectedRatingIndex: selectedRatingIndex,
|
||||
selectedRatingValue: selectedRatingValue
|
||||
});
|
||||
}
|
||||
|
||||
private handleChange(event: any, newValue: string) {
|
||||
let partialState = {};
|
||||
partialState[event.target.name] = newValue || "";
|
||||
this.setState(partialState);
|
||||
}
|
||||
|
||||
private _onConfigure = () => {
|
||||
this.props.context.propertyPane.open();
|
||||
}
|
||||
|
||||
private closeDialog(e: any) {
|
||||
this.setState({ isDialogHidden: true });
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
private ShowDialogMessage(title: string, body: string) {
|
||||
this.setState({
|
||||
//isRedirectDialogHidden: false,
|
||||
isDialogHidden: false,
|
||||
dialogTitle: title,
|
||||
dialogBody: body,
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
private ShowDialogError(
|
||||
error: any,
|
||||
customErrorMessage: string
|
||||
) {
|
||||
if (!customErrorMessage) {
|
||||
customErrorMessage = "";
|
||||
}
|
||||
this.setState({
|
||||
isDialogHidden: false,
|
||||
dialogTitle: "Error: Request failed.",
|
||||
dialogBody: customErrorMessage.concat(
|
||||
" Error message: ",
|
||||
(error.Message || error.message)
|
||||
),
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IReactEmojiReactionRatingProps> {
|
||||
|
||||
/* if (this.props.listMessage) {
|
||||
this.ShowDialogMessage("List Creation", this.props.listMessage);
|
||||
} */
|
||||
|
||||
return !(this.state.configLoaded) ? (
|
||||
<Placeholder iconName='Edit'
|
||||
iconText='Configure your web part'
|
||||
description='Please configure the web part.'
|
||||
buttonLabel='Configure'
|
||||
hideButton={this.props.displayMode === DisplayMode.Read}
|
||||
onConfigure={this._onConfigure} />
|
||||
) : (this.props.listMessage ? (
|
||||
<div>{this.props.listMessage}</div>
|
||||
) :
|
||||
(
|
||||
<div className={styles.reactEmojiReactionRating} style={{
|
||||
backgroundColor: `${this.props.selectedColor
|
||||
}`
|
||||
}}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.row}>
|
||||
<Stack>
|
||||
<div className={styles.description}>{this.props.ratingText ? this.props.ratingText : ''}</div>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div className={styles.row}>
|
||||
<Stack horizontal verticalAlign="center" horizontalAlign="space-between">
|
||||
{this.props.emojisCollection ? this.props.emojisCollection.map((ratingItem, tabIndex) => (
|
||||
<Stack.Item>
|
||||
{this.props.enableCount ? (
|
||||
<>
|
||||
<Badge color="secondary" overlap="circular" badgeContent={this.state[tabIndex]}>
|
||||
<img src={ratingItem.ImageUrl}
|
||||
className={this.state.selectedRatingIndex == tabIndex ? styles.selectedEmoji : styles.stackImage}
|
||||
title={ratingItem.Title}
|
||||
tabIndex={tabIndex}
|
||||
id={tabIndex.toString()}
|
||||
alt={ratingItem.Title}
|
||||
onClick={this.selectedRating}
|
||||
/>
|
||||
</Badge>
|
||||
<Label className={styles.labelClass}>{ratingItem.Title}</Label>
|
||||
</>) : (
|
||||
<>
|
||||
<img src={ratingItem.ImageUrl}
|
||||
className={this.state.selectedRatingIndex == tabIndex ? styles.selectedEmoji : styles.stackImage}
|
||||
title={ratingItem.Title}
|
||||
tabIndex={tabIndex}
|
||||
id={tabIndex.toString()}
|
||||
alt={ratingItem.Title}
|
||||
onClick={this.selectedRating} />
|
||||
<Label className={styles.labelClass}>{ratingItem.Title}</Label>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Stack.Item>
|
||||
)) :
|
||||
<Label>Rating list is empty...</Label>}
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
{this.props.enableComments ? (
|
||||
<div className={styles.row}>
|
||||
<TextField
|
||||
label={"Enter comments"}
|
||||
value={this.state.RatingComments}
|
||||
onChange={this.handleChange}
|
||||
name="RatingComments"
|
||||
rows={6}
|
||||
multiline={true}
|
||||
width={80}
|
||||
className={styles.txtArea}
|
||||
/>
|
||||
{this.state.RatingComments}
|
||||
</div>
|
||||
|
||||
) : ""
|
||||
}
|
||||
{this.state.CustomMessage ? (
|
||||
<div className={styles.row}>
|
||||
{this.state.CustomMessage}
|
||||
</div>
|
||||
) : ""
|
||||
}
|
||||
|
||||
{this._message}
|
||||
<div className={styles.row}>
|
||||
<div className={styles.column10}>
|
||||
</div>
|
||||
<div className={styles.column2}>
|
||||
<PrimaryButton text="Submit" onClick={this.submitRating} disabled={this.state.selectedRatingValue ? false : true} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
hidden={this.state.isDialogHidden}
|
||||
onDismiss={this.closeDialog}
|
||||
dialogContentProps={{
|
||||
type: DialogType.normal,
|
||||
title: this.state.dialogTitle,
|
||||
subText: this.state.dialogBody
|
||||
}}
|
||||
modalProps={{
|
||||
isBlocking: true,
|
||||
styles: { main: { maxWidth: 450 } }
|
||||
}}
|
||||
>
|
||||
<DialogFooter>
|
||||
<PrimaryButton onClick={this.closeDialog} text="OK" />
|
||||
</DialogFooter>
|
||||
</Dialog>
|
||||
|
||||
</div >
|
||||
</div >
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
export interface IRatingNewItem {
|
||||
Id?: number;
|
||||
Title: string;
|
||||
Pagename: string;
|
||||
User: string;
|
||||
Comment: string;
|
||||
Rating1?: string;
|
||||
Rating2?: string;
|
||||
Rating3?: string;
|
||||
Rating4?: string;
|
||||
Rating5?: string;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
import { sp } from "@pnp/sp";
|
||||
import "@pnp/sp/webs";
|
||||
import "@pnp/sp/lists";
|
||||
import "@pnp/sp/items";
|
||||
import "@pnp/sp/fields";
|
||||
import "@pnp/sp/views";
|
||||
import { IItemAddResult } from "@pnp/sp/items";
|
||||
import { IRatingNewItem } from "../models/IRatingNewItem";
|
||||
// Class Services
|
||||
export default class spService {
|
||||
|
||||
constructor(private context: WebPartContext) {
|
||||
// Setup Context to PnPjs
|
||||
sp.setup({
|
||||
spfxContext: this.context
|
||||
});
|
||||
// Init
|
||||
this.onInit();
|
||||
}
|
||||
// OnInit Function
|
||||
private async onInit() {
|
||||
|
||||
}
|
||||
|
||||
public async _getListItems(listName: string) {
|
||||
const allItems: any[] = await sp.web.lists.getByTitle(listName).items.getAll();
|
||||
console.log(allItems);
|
||||
return allItems;
|
||||
}
|
||||
|
||||
|
||||
public getRatingListItems(listName: string): Promise<any[]> {
|
||||
let promise: Promise<any[]> = new Promise<any[]>(
|
||||
(resolve, reject) => {
|
||||
sp.web.lists
|
||||
.getByTitle(listName)
|
||||
.items
|
||||
.getAll(4000)
|
||||
.then((data: any[]) => {
|
||||
resolve(data);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
||||
|
||||
|
||||
public async _addRatingItemPnP(listName: string, RatingRequest: IRatingNewItem) {
|
||||
await sp.web.lists.getByTitle(listName).items.add(RatingRequest);
|
||||
}
|
||||
|
||||
public _addRatingItem(listName: string, RatingRequest: IRatingNewItem): Promise<IItemAddResult> {
|
||||
let promise: Promise<IItemAddResult> = new Promise<IItemAddResult>(
|
||||
(resolve, reject) => {
|
||||
sp.web.lists
|
||||
.getByTitle(listName)
|
||||
.items.add(
|
||||
RatingRequest
|
||||
)
|
||||
.then((iar: IItemAddResult) => {
|
||||
resolve(iar);
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
||||
public _updateRatingItem(listName: string, RatingRequest: IRatingNewItem, ExistingID: any): Promise<IItemAddResult> {
|
||||
let promise: Promise<IItemAddResult> = new Promise<IItemAddResult>(
|
||||
(resolve, reject) => {
|
||||
sp.web.lists
|
||||
.getByTitle(listName)
|
||||
.items.getById(ExistingID).update(
|
||||
RatingRequest
|
||||
)
|
||||
.then((iar: IItemAddResult) => {
|
||||
resolve(iar);
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
return promise;
|
||||
}
|
||||
public async _createListwithColumns(listName: string, colListColumns: any[]) {
|
||||
|
||||
let listExist = await this._checkList(listName);
|
||||
console.log("List exist: ", listExist);
|
||||
if (!listExist) {
|
||||
const listAddResult = await sp.web.lists.add(listName);
|
||||
const list = await listAddResult.list.get();
|
||||
|
||||
const newList = await sp.web.lists.getByTitle(listName);
|
||||
const view = await newList.defaultView;
|
||||
|
||||
//checking columns are added to the collection or not
|
||||
if (colListColumns.length > 0) {
|
||||
const batch = sp.web.createBatch();
|
||||
colListColumns.forEach(fieldName => {
|
||||
if (fieldName == "Comments") {
|
||||
newList.fields.inBatch(batch).addMultilineText(fieldName, 6);
|
||||
}
|
||||
else {
|
||||
newList.fields.inBatch(batch).addText(fieldName, 255);
|
||||
}
|
||||
});
|
||||
|
||||
colListColumns.forEach(fieldName => {
|
||||
view.fields.inBatch(batch).add(fieldName);
|
||||
|
||||
});
|
||||
|
||||
batch.execute().then(_result => {
|
||||
console.log('List with columns created.');
|
||||
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
return "List with required columns created.";
|
||||
}
|
||||
}
|
||||
else {
|
||||
return "List alreay exist";
|
||||
}
|
||||
}
|
||||
|
||||
public async _checkList(listName: string) {
|
||||
let filterList = `Title eq '${listName}'`;
|
||||
let boolResult: boolean = false;
|
||||
let getList = await sp.web.lists.filter(filterList).get();
|
||||
if (getList.length > 0) {
|
||||
return boolResult = true;
|
||||
}
|
||||
else {
|
||||
return boolResult;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
14
samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/loc/en-us.js
vendored
Normal file
14
samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/loc/en-us.js
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "This is a webpart to collect page ratings!",
|
||||
"BasicGroupName": "Rating WebPart Configuration",
|
||||
"RatingTextFieldLabel": "Rating text",
|
||||
"EmojisCollectionFieldLabel":"Emojis collection",
|
||||
"EnableCommentsFieldLablel":"Enable comments",
|
||||
"EnableCountFieldLablel":"Enable count",
|
||||
"ListSchemaFieldLablel":"Create List",
|
||||
"ListColumnsFieldLabel":"List Columns",
|
||||
"ListNameFieldLabel":"List Name",
|
||||
|
||||
}
|
||||
});
|
||||
17
samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/loc/mystrings.d.ts
vendored
Normal file
17
samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
declare interface IReactEmojiReactionRatingWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
RatingTextFieldLabel: string;
|
||||
EmojisCollectionFieldLabel:string;
|
||||
EnableCommentsFieldLablel:string;
|
||||
EnableCountFieldLablel:string;
|
||||
ListSchemaFieldLablel:string;
|
||||
ListColumnsFieldLabel:string;
|
||||
ListNameFieldLabel:string;
|
||||
ListSchemaFieldLabel:string;
|
||||
}
|
||||
|
||||
declare module 'ReactEmojiReactionRatingWebPartStrings' {
|
||||
const strings: IReactEmojiReactionRatingWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 383 B After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection",
|
||||
"es2015.promise"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"extends": "./node_modules/@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
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,16 @@ It also resizes the app to fit the web part dimension:
|
|||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -111,4 +120,21 @@ Note that the web part always sends the current page's locale to Power Apps via
|
|||
|
||||
This sample includes a `PropertyPaneHTML` control that you can use to embed custom HTML in a property pane. I use it to highlight syntax using the `<pre>` tag and to make text bold.
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-enhanced-powerapps&authors=@hugoabernier&title=react-enhanced-powerapps%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-enhanced-powerapps&authors=@hugoabernier&title=react-enhanced-powerapps%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-enhanced-powerapps&authors=@hugoabernier&title=react-enhanced-powerapps%20-%20).
|
||||
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-enhanced-powerapps" />
|
||||
|
|
|
|||
|
|
@ -8,12 +8,14 @@ This is an application that supports Feedback through a web part that can be use
|
|||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -24,14 +26,14 @@ This is an application that supports Feedback through a web part that can be use
|
|||
|
||||
* Office 365 subscription with SharePoint Online
|
||||
* SharePoint Framework [development environment](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) set up
|
||||
* "Feedback Owners" SharePoint group (see below)
|
||||
* **Feedback Owners** SharePoint group (see below)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-feedback | Perry Kankam
|
||||
react-feedback | Abderahman Moujahid
|
||||
react-feedback | [Perry Kankam](https://github.com/perr124)
|
||||
react-feedback | [Abderahman Moujahid](https://github.com/Abderahman88)
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
@ -40,12 +42,6 @@ Version|Date|Comments
|
|||
1.0.0|December 15, 2020|Initial release
|
||||
1.0.1|March 3, 2021|Fix undefined listItem
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
*To really get the full experience go to the workbench on a SharePoint Site [Your site url]/_layouts/15/workbench.aspx and that's where the magic will happen but this requires that you deploy and activate features to provision the required SharePoint assets*
|
||||
|
|
@ -54,7 +50,7 @@ Version|Date|Comments
|
|||
* in the command line run:
|
||||
* `npm install`
|
||||
* `gulp serve`
|
||||
* Add "Feedback Owners" SharePoint group. This is where you'll add all users who should receive this feedback.
|
||||
* Add **Feedback Owners** SharePoint group. This is where you'll add all users who should receive this feedback.
|
||||
* Run one of the following custom commands to clean, build, bundle and package the solution.
|
||||
* If you want to be able to debug using your local code using gulp serve
|
||||
`gulp package`
|
||||
|
|
@ -74,4 +70,19 @@ This sample illustrates the following concepts:
|
|||
- Used [PnP](https://pnp.github.io/pnpjs/) for communication with SharePoint.
|
||||
- Used [@pnp/logging](https://pnp.github.io/pnpjs/logging/)
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-feedback&authors=@perr124%20@Abderahman88&title=react-feedback%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-feedback&authors=@perr124%20@Abderahman88&title=react-feedback%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-feedback&authors=@perr124%20@Abderahman88&title=react-feedback%20-%20).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-feedback" />
|
||||
|
|
|
|||
|
|
@ -12,9 +12,16 @@ This web part shows how to use the Microsoft Graph APIs (beta) for Taxonomy to g
|
|||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -41,12 +48,6 @@ Version|Date|Comments
|
|||
1.0.0|Aug 24, 2020|Initial release
|
||||
1.0.1|Sep 03, 2020|Error handling and logging improvements
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
* Clone this repository
|
||||
|
|
@ -70,4 +71,20 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
|
|||
* Currently, this web part supports 2-level cascading. So there is scope to enhance this such that it supports more levels of cascading dynamically.
|
||||
* Currently, this web part reads latitude and longitude from description of the city terms. If there is a way of getting these from the custom properties of the city terms, then that needs to be implemented.
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-graph-cascading-managed-metadata&authors=@anoopt&title=react-graph-cascading-managed-metadata%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-graph-cascading-managed-metadata&authors=@anoopt&title=react-graph-cascading-managed-metadata%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-graph-cascading-managed-metadata&authors=@anoopt&title=react-graph-cascading-managed-metadata%20-%20).
|
||||
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-cascading-managed-metadata" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
release
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.12.1",
|
||||
"libraryName": "react-azure-group-view",
|
||||
"libraryId": "bcbef560-eaf3-4560-8f6f-482eceaf14a5",
|
||||
"environment": "spo",
|
||||
"packageManager": "npm",
|
||||
"isCreatingSolution": true,
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
# Graph Group Viewer
|
||||
|
||||
## Summary
|
||||
|
||||
This webpart will provide the functionality to search for groups in your tenant and allow you to view the details of the selected group as well as view a list of group members and export the list of members to a CSV file.
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
* [Microsoft Graph](https://docs.microsoft.com/en-us/graph/overview)
|
||||
* [PnP React Controls](https://pnp.github.io/sp-dev-fx-controls-react/)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-graph-groupviewer | [Zach Roberts](https://github.com/zachroberts8668) ([@ZachSPODev](https://twitter.com/ZachSPODev))
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|September 27, 2021|Initial release
|
||||
|
||||
## Prerequisites
|
||||
There are no prerequisites to use this webpart.
|
||||
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
* Clone this repository
|
||||
* If your SharePoint tenant does not already allow API access to the following Microsoft Graph permissions: Directory.Read.All, Group.Read.All and GroupMember.Read.All then please follow the below instructions.
|
||||
* in the command line run:
|
||||
* `npm install`
|
||||
* `gulp build --ship`
|
||||
* `gulp bundle --ship`
|
||||
* `gulp package-solution --ship`
|
||||
* browse to your SharePoint app catalog and load the SPFX package. Once loaded you will need to browse to your SharePoint Admin Center and under advanced you will need to open Api Access and allow the requests for Microsoft Graph.
|
||||
* If you have the APIs permissions already allowed you can follow the below steps.
|
||||
* in the command line run:
|
||||
* `npm install`
|
||||
* `gulp serve --nobrowser`
|
||||
* browse to your hosted workbench and add the webpart.
|
||||
|
||||
## Features
|
||||
|
||||
This Web Part illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
* Using Microsoft Graph to search for groups and return group members for the selected group.
|
||||
* Exporting loaded data to a CSV file using [CSVLink](https://github.com/react-csv/react-csv)
|
||||
|
||||
## 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.**
|
||||
|
||||
## 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-graph-groupviewer&authors=@zroberts8668&title=react-graph-groupviewer%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-graph-groupviewer&authors=@zroberts8668&title=react-graph-groupviewer%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-graph-groupviewer&authors=@zroberts8668&title=react-graph-groupviewer%20-%20).
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-groupviewer" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
|
|
@ -0,0 +1,51 @@
|
|||
[
|
||||
{
|
||||
"name": "pnp-sp-dev-spfx-web-parts-react-graph-groupviewer",
|
||||
"source": "pnp",
|
||||
"title": "Graph Group Viewer",
|
||||
"shortDescription": "Search for groups in your tenant and allow you to view the details of the selected group as well as view a list of group members and export the list of members to a CSV file",
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-groupviewer",
|
||||
"longDescription": [
|
||||
"This webpart will provide the functionality to search for groups in your tenant and allow you to view the details of the selected group as well as view a list of group members and export the list of members to a CSV file"
|
||||
],
|
||||
"creationDateTime": "2021-09-27",
|
||||
"updateDateTime": "2021-09-27",
|
||||
"products": [
|
||||
"SharePoint",
|
||||
"Office"
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.12.1"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-groupviewer/assets/preview.gif",
|
||||
"alt": "Preview"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "zachroberts8668",
|
||||
"company": "",
|
||||
"pictureUrl": "https://github.com/zachroberts8668.png",
|
||||
"name": "Zach Roberts"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"name": "Build your first SharePoint client-side web part",
|
||||
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"azure-group-view-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/azureGroupView/AzureGroupViewWebPart.js",
|
||||
"manifest": "./src/webparts/azureGroupView/AzureGroupViewWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"AzureGroupViewWebPartStrings": "lib/webparts/azureGroupView/loc/{locale}.js",
|
||||
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
|
||||
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "./release/assets/"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-azure-group-view",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "react-graph-groupviewer-client-side-solution",
|
||||
"id": "bcbef560-eaf3-4560-8f6f-482eceaf14a5",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
"name": "",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": ""
|
||||
},
|
||||
"webApiPermissionRequests": [
|
||||
{
|
||||
"resource": "Microsoft Graph",
|
||||
"scope": "Directory.Read.All"
|
||||
},
|
||||
{
|
||||
"resource": "Microsoft Graph",
|
||||
"scope": "Group.Read.All"
|
||||
},
|
||||
{
|
||||
"resource": "Microsoft Graph",
|
||||
"scope": "GroupMember.Read.All"
|
||||
}
|
||||
]
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-graph-groupviewer.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"https": true,
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
'use strict';
|
||||
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue