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

Fixed spelling mistake in code and updated README

This commit is contained in:
Hugo Bernier 2020-08-25 23:57:18 -04:00
parent 821ccc0eb1
commit 0b59018b8a
3 changed files with 20358 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
samples/react-graph-cascading-managed-metadata/README.md
View File

@ -1,73 +1,72 @@
# Cascading managed metadata using Graph API (beta) # Cascading managed metadata using Graph API (beta)
This webpart shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data. ## Summary
### Functionality This web part shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.
![Cascading managed metadata](./assets/cmmd.gif)
### Functionality
### Termstore
![Term store](./assets/termstore.png) ![Cascading managed metadata](./assets/cmmd.gif)
## Used SharePoint Framework Version ### Termstore
![SPFx v1.11.0](https://img.shields.io/badge/SPFx-1.11.0-green.svg) ![Term store](./assets/termstore.png)
## Applies to ## Used SharePoint Framework Version
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) ![SPFx v1.11.0](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Applies to
## Solution
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
Solution|Author(s) * [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
--------|---------
react-graph-cascading-managed-metadata| Anoop Tatti ([@anooptells](https://twitter.com/anooptells)) ## Pre-requisites
## Version history * Set up the termset structure as shown in the image above.
* For the cities, get the required latitude and longitude.
Version|Date|Comments * Set the description of the city term as `latitude;longitude` (as highlighted for the term `London` in the image above).
-------|----|--------
1.0.0|Aug 24, 2020|Initial release
## Solution
## Disclaimer
Solution|Author(s)
**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.** --------|---------
react-graph-cascading-managed-metadata| Anoop Tatti ([@anooptells](https://twitter.com/anooptells))
---
## Version history
## Features
Version|Date|Comments
This sample illustrates the following concepts on top of the SharePoint Framework: -------|----|--------
1.0.0|Aug 24, 2020|Initial release
* Get data terms using Microsoft Graph API (beta).
* React Hooks ## Disclaimer
* Using async / await for the async calls
* Caching the data in session storage **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.**
* Usage of PnP SPFx controls (Maps and Placeholder)
* Office UI fabric components ---
## Config ## Minimal Path to Awesome
* Set up the termset structure as shown in the image above. * Clone this repository
* For the cities, get the required latitude and longitude. * in the command line run:
* Set the description of the city term as `latitude;longitude` (as highlighted for teh term `London` in the image above). * `npm install`
* `gulp serve`
## Enhancements
## Features
* Currently, this webpart supports 2 level cascading. So there is scope to enhance this such that it supports more levels of cascading dynamically.
* Currently, this webpart 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. This sample illustrates the following concepts on top of the SharePoint Framework:
### Building the code * Get data terms using Microsoft Graph API (beta).
* React Hooks
```bash * Using async / await for the async calls
git clone the repo * Caching the data in session storage
npm i * Usage of PnP SPFx controls (Maps and Placeholder)
npm i -g gulp * Office UI fabric components
gulp
``` ### Enhancements
This package produces the following: * 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.
* lib/* - intermediate-stage commonjs build artifacts
* dist/* - the bundled script, along with other resources <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-cascading-managed-metadata" />
* deploy/* - all resources which should be uploaded to a CDN.

20193
samples/react-graph-cascading-managed-metadata/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

186
samples/react-graph-cascading-managed-metadata/src/webparts/cascadingManagedMetadata/CascadingManagedMetadataWebPart.ts
View File

@ -1,93 +1,93 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import { Version, DisplayMode } from '@microsoft/sp-core-library'; import { Version, DisplayMode } from '@microsoft/sp-core-library';
import { import {
BaseClientSideWebPart, BaseClientSideWebPart,
IPropertyPaneConfiguration, IPropertyPaneConfiguration,
PropertyPaneTextField PropertyPaneTextField
} from '@microsoft/sp-webpart-base'; } from '@microsoft/sp-webpart-base';
import * as strings from 'CascadingManagedMetadataWebPartStrings'; import * as strings from 'CascadingManagedMetadataWebPartStrings';
import CascadingManagedMetadata from './components/CascadingManagedMetadata'; import CascadingManagedMetadata from './components/CascadingManagedMetadata';
import { MSGraph } from './services/MSGraph'; import { MSGraph } from './services/MSGraph';
export interface ICascadingManagedMetadataWebPartProps { export interface ICascadingManagedMetadataWebPartProps {
termSetId: string; termSetId: string;
} }
export default class CascadingManagedMetadataWebPart extends BaseClientSideWebPart<ICascadingManagedMetadataWebPartProps> { export default class CascadingManagedMetadataWebPart extends BaseClientSideWebPart<ICascadingManagedMetadataWebPartProps> {
private _placeholder = null; private _placeholder = null;
public async render(): Promise<void> { public async render(): Promise<void> {
await MSGraph.Init(this.context); await MSGraph.Init(this.context);
let renderElement = null; let renderElement = null;
//TODO: Use function to check if GUID? //TODO: Use function to check if GUID?
if (this.properties.termSetId && this.properties.termSetId.length == 36) { if (this.properties.termSetId && this.properties.termSetId.length == 36) {
renderElement = React.createElement( renderElement = React.createElement(
CascadingManagedMetadata, CascadingManagedMetadata,
{ {
termSetId: this.properties.termSetId termSetId: this.properties.termSetId
} }
); );
} else { } else {
if (this.displayMode === DisplayMode.Edit) { if (this.displayMode === DisplayMode.Edit) {
const { Placeholder } = await import( const { Placeholder } = await import(
/* webpackChunkName: 'cascadingManagedMetadata-property-pane' */ /* webpackChunkName: 'cascadingManagedMetadata-property-pane' */
'@pnp/spfx-controls-react/lib/Placeholder' '@pnp/spfx-controls-react/lib/Placeholder'
); );
this._placeholder = Placeholder; this._placeholder = Placeholder;
const placeholder: React.ReactElement<any> = React.createElement( const placeholder: React.ReactElement<any> = React.createElement(
this._placeholder, this._placeholder,
{ {
iconName: 'Edit', iconName: 'Edit',
iconText: 'Configure your webpart', iconText: 'Configure your webpart',
description: 'Please configure the web part.', description: 'Please configure the web part.',
buttonLabel: 'Confifure', buttonLabel: 'Configure',
onConfigure: this._onConfigure.bind(this) onConfigure: this._onConfigure.bind(this)
} }
); );
renderElement = placeholder; renderElement = placeholder;
} else { } else {
renderElement = React.createElement('div', null); renderElement = React.createElement('div', null);
} }
} }
ReactDom.render(renderElement, this.domElement); ReactDom.render(renderElement, this.domElement);
} }
private _onConfigure = () => { private _onConfigure = () => {
this.context.propertyPane.open(); this.context.propertyPane.open();
} }
protected onDispose(): void { protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement); ReactDom.unmountComponentAtNode(this.domElement);
} }
protected get dataVersion(): Version { protected get dataVersion(): Version {
return Version.parse('1.0'); return Version.parse('1.0');
} }
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return { return {
pages: [ pages: [
{ {
header: { header: {
description: strings.PropertyPaneDescription description: strings.PropertyPaneDescription
}, },
groups: [ groups: [
{ {
groupName: strings.BasicGroupName, groupName: strings.BasicGroupName,
groupFields: [ groupFields: [
PropertyPaneTextField('termSetId', { PropertyPaneTextField('termSetId', {
label: strings.TermSetIdFieldLabel label: strings.TermSetIdFieldLabel
}) })
] ]
} }
] ]
} }
] ]
}; };
} }
} }