Requirement:
We need to create a custom modern form which includes taxonomy picker control allowing Open Term. User should be allowed to add fill-in values - inserting new term on the fly.
Approach:
To meet above requirements, i've used PnP Taxonomy Picker control for SPFx.
https://sharepoint.github.io/sp-dev-fx-controls-react/controls/TaxonomyPicker/
Steps to add in Solution:
Import modules as below:
Use taxonomy picker control as below:
<TaxonomyPicker allowMultipleSelections={true}
termsetNameOrID="Countries"
panelTitle="Select Term"
label="Taxonomy Picker"
context={this.props.context}
onChange={this.onTaxPickerChange}
isTermSetSelectable={false} />
Limitation:
A limitation with this control is, it does not allow to fill-in values.
Resolution:
Finally, i've utilized another control that allows to add a new term is delaware Digital Workplace React Fabric Taxonomy picker.
https://www.npmjs.com/package/@dlw-digitalworkplace/react-fabric-taxonomypicker
Use below command to install npm package in your solution.
Import module as below:
Use taxonomy picker control as below:
<TaxonomyPicker
title="Select your demo data"
absoluteSiteUrl={this.props.absoluteSiteUrl}
label="Demo picker"
termSetId={this.props.termSetId}
rootTermId={this.props.rootTermId}
itemLimit={this.props.itemLimit}
allowAddTerms={true}
lcid={this.props.lcid}
showTranslatedLabels={this.props.showTranslatedLabels}
isLoading={false}
/>
We need to create a custom modern form which includes taxonomy picker control allowing Open Term. User should be allowed to add fill-in values - inserting new term on the fly.
Approach:
To meet above requirements, i've used PnP Taxonomy Picker control for SPFx.
https://sharepoint.github.io/sp-dev-fx-controls-react/controls/TaxonomyPicker/
Steps to add in Solution:
Import modules as below:
- import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";
Use taxonomy picker control as below:
<TaxonomyPicker allowMultipleSelections={true}
termsetNameOrID="Countries"
panelTitle="Select Term"
label="Taxonomy Picker"
context={this.props.context}
onChange={this.onTaxPickerChange}
isTermSetSelectable={false} />
Limitation:
A limitation with this control is, it does not allow to fill-in values.
Resolution:
Finally, i've utilized another control that allows to add a new term is delaware Digital Workplace React Fabric Taxonomy picker.
https://www.npmjs.com/package/@dlw-digitalworkplace/react-fabric-taxonomypicker
Use below command to install npm package in your solution.
- npm i @dlw-digitalworkplace/react-fabric-taxonomypicker
Import module as below:
- import { TaxonomyPicker } from "@dlw-digitalworkplace/react-fabric-taxonomypicker";
Use taxonomy picker control as below:
<TaxonomyPicker
title="Select your demo data"
absoluteSiteUrl={this.props.absoluteSiteUrl}
label="Demo picker"
termSetId={this.props.termSetId}
rootTermId={this.props.rootTermId}
itemLimit={this.props.itemLimit}
allowAddTerms={true}
lcid={this.props.lcid}
showTranslatedLabels={this.props.showTranslatedLabels}
isLoading={false}
/>
Now, when user types in new term and press enter key, it will automatically create a new term in your selected term set id.
If you have any questions you can reach out our SharePoint Consulting team here.
No comments:
Post a Comment