August 29, 2019

Resolution: Open term is not allowed in PnP Taxonomy Picker control

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:

  • 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