Fixed spelling mistake in code and updated README
This commit is contained in:
Hugo Bernier
parent
821ccc0eb1
commit
0b59018b8a
|
|
@ -1,73 +1,72 @@
|
|||
# Cascading managed metadata using Graph API (beta)
|
||||
|
||||
This webpart shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.
|
||||
|
||||
### Functionality
|
||||
|
||||
|
||||
### Termstore
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-graph-cascading-managed-metadata| Anoop Tatti ([@anooptells](https://twitter.com/anooptells))
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0.0|Aug 24, 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.**
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
This sample illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
* Get data terms using Microsoft Graph API (beta).
|
||||
* React Hooks
|
||||
* Using async / await for the async calls
|
||||
* Caching the data in session storage
|
||||
* Usage of PnP SPFx controls (Maps and Placeholder)
|
||||
* Office UI fabric components
|
||||
|
||||
## Config
|
||||
|
||||
* Set up the termset structure as shown in the image above.
|
||||
* For the cities, get the required latitude and longitude.
|
||||
* Set the description of the city term as `latitude;longitude` (as highlighted for teh term `London` in the image above).
|
||||
|
||||
## Enhancements
|
||||
|
||||
* 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.
|
||||
|
||||
### Building the code
|
||||
|
||||
```bash
|
||||
git clone the repo
|
||||
npm i
|
||||
npm i -g gulp
|
||||
gulp
|
||||
```
|
||||
|
||||
This package produces the following:
|
||||
|
||||
* lib/* - intermediate-stage commonjs build artifacts
|
||||
* dist/* - the bundled script, along with other resources
|
||||
* deploy/* - all resources which should be uploaded to a CDN.
|
||||
# Cascading managed metadata using Graph API (beta)
|
||||
|
||||
## Summary
|
||||
|
||||
This web part shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.
|
||||
|
||||
### Functionality
|
||||
|
||||
|
||||
|
||||
### Termstore
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Pre-requisites
|
||||
|
||||
* Set up the termset structure as shown in the image above.
|
||||
* For the cities, get the required latitude and longitude.
|
||||
* Set the description of the city term as `latitude;longitude` (as highlighted for the term `London` in the image above).
|
||||
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-graph-cascading-managed-metadata| Anoop Tatti ([@anooptells](https://twitter.com/anooptells))
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0.0|Aug 24, 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
|
||||
* in the command line run:
|
||||
* `npm install`
|
||||
* `gulp serve`
|
||||
|
||||
## Features
|
||||
|
||||
This sample illustrates the following concepts on top of the SharePoint Framework:
|
||||
|
||||
* Get data terms using Microsoft Graph API (beta).
|
||||
* React Hooks
|
||||
* Using async / await for the async calls
|
||||
* Caching the data in session storage
|
||||
* Usage of PnP SPFx controls (Maps and Placeholder)
|
||||
* Office UI fabric components
|
||||
|
||||
### Enhancements
|
||||
|
||||
* 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.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-cascading-managed-metadata" />
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,93 +1,93 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version, DisplayMode } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import * as strings from 'CascadingManagedMetadataWebPartStrings';
|
||||
import CascadingManagedMetadata from './components/CascadingManagedMetadata';
|
||||
import { MSGraph } from './services/MSGraph';
|
||||
|
||||
export interface ICascadingManagedMetadataWebPartProps {
|
||||
termSetId: string;
|
||||
}
|
||||
|
||||
export default class CascadingManagedMetadataWebPart extends BaseClientSideWebPart<ICascadingManagedMetadataWebPartProps> {
|
||||
|
||||
private _placeholder = null;
|
||||
|
||||
public async render(): Promise<void> {
|
||||
await MSGraph.Init(this.context);
|
||||
let renderElement = null;
|
||||
//TODO: Use function to check if GUID?
|
||||
if (this.properties.termSetId && this.properties.termSetId.length == 36) {
|
||||
renderElement = React.createElement(
|
||||
CascadingManagedMetadata,
|
||||
{
|
||||
termSetId: this.properties.termSetId
|
||||
}
|
||||
);
|
||||
} else {
|
||||
if (this.displayMode === DisplayMode.Edit) {
|
||||
const { Placeholder } = await import(
|
||||
/* webpackChunkName: 'cascadingManagedMetadata-property-pane' */
|
||||
'@pnp/spfx-controls-react/lib/Placeholder'
|
||||
);
|
||||
this._placeholder = Placeholder;
|
||||
|
||||
const placeholder: React.ReactElement<any> = React.createElement(
|
||||
this._placeholder,
|
||||
{
|
||||
iconName: 'Edit',
|
||||
iconText: 'Configure your webpart',
|
||||
description: 'Please configure the web part.',
|
||||
buttonLabel: 'Confifure',
|
||||
onConfigure: this._onConfigure.bind(this)
|
||||
}
|
||||
);
|
||||
renderElement = placeholder;
|
||||
} else {
|
||||
renderElement = React.createElement('div', null);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDom.render(renderElement, this.domElement);
|
||||
}
|
||||
|
||||
private _onConfigure = () => {
|
||||
this.context.propertyPane.open();
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('termSetId', {
|
||||
label: strings.TermSetIdFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version, DisplayMode } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import * as strings from 'CascadingManagedMetadataWebPartStrings';
|
||||
import CascadingManagedMetadata from './components/CascadingManagedMetadata';
|
||||
import { MSGraph } from './services/MSGraph';
|
||||
|
||||
export interface ICascadingManagedMetadataWebPartProps {
|
||||
termSetId: string;
|
||||
}
|
||||
|
||||
export default class CascadingManagedMetadataWebPart extends BaseClientSideWebPart<ICascadingManagedMetadataWebPartProps> {
|
||||
|
||||
private _placeholder = null;
|
||||
|
||||
public async render(): Promise<void> {
|
||||
await MSGraph.Init(this.context);
|
||||
let renderElement = null;
|
||||
//TODO: Use function to check if GUID?
|
||||
if (this.properties.termSetId && this.properties.termSetId.length == 36) {
|
||||
renderElement = React.createElement(
|
||||
CascadingManagedMetadata,
|
||||
{
|
||||
termSetId: this.properties.termSetId
|
||||
}
|
||||
);
|
||||
} else {
|
||||
if (this.displayMode === DisplayMode.Edit) {
|
||||
const { Placeholder } = await import(
|
||||
/* webpackChunkName: 'cascadingManagedMetadata-property-pane' */
|
||||
'@pnp/spfx-controls-react/lib/Placeholder'
|
||||
);
|
||||
this._placeholder = Placeholder;
|
||||
|
||||
const placeholder: React.ReactElement<any> = React.createElement(
|
||||
this._placeholder,
|
||||
{
|
||||
iconName: 'Edit',
|
||||
iconText: 'Configure your webpart',
|
||||
description: 'Please configure the web part.',
|
||||
buttonLabel: 'Configure',
|
||||
onConfigure: this._onConfigure.bind(this)
|
||||
}
|
||||
);
|
||||
renderElement = placeholder;
|
||||
} else {
|
||||
renderElement = React.createElement('div', null);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDom.render(renderElement, this.domElement);
|
||||
}
|
||||
|
||||
private _onConfigure = () => {
|
||||
this.context.propertyPane.open();
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('termSetId', {
|
||||
label: strings.TermSetIdFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue