Extended TaxonomyPicker with the ability to hide deprecated terms and those that are not available for tagging (Issue: 421)

Author: Jonas Bjerke Hansen

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -64,6 +64,16 @@ export interface ITaxonomyPickerProps  {
    */
   termActions?: ITermActions;
 
+  /**
+   * Specifies if the tags marked with 'Available for tagging' = false should be hidden
+   */
+  hideTagsNotAvailableForTagging?: boolean;
+
+  /**
+   * Specifies if deprecated tags  should be hidden
+   */
+  hideDeprecatedTags?: boolean;
+
   /**
    * The method is used to get the validation error message and determine whether the input value is valid or not.
    *

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -90,7 +90,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       // });
     }
 
-    this.termsService.getAllTerms(this.props.termsetNameOrID).then((response: ITermSet) => {
+    this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging).then((response: ITermSet) => {
       // Check if a response was retrieved
       let termSetAndTerms = response ? response : null;
       this.setState({
@@ -104,7 +104,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
    * Force update of the taxonomy tree - required by term action in case the term has been added, deleted or moved.
    */
   private async updateTaxonomyTree(): Promise<void> {
-    const termSetAndTerms = await this.termsService.getAllTerms(this.props.termsetNameOrID);
+    const termSetAndTerms = await this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging);
 
     this.setState({
       termSetAndTerms

src/services/SPTermStorePickerService.ts

@@ -146,7 +146,7 @@ export default class SPTermStorePickerService {
    * Retrieve all terms for the given term set
    * @param termset
    */
-  public async getAllTerms(termset: string): Promise<ITermSet> {
+  public async getAllTerms(termset: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean): Promise<ITermSet> {
     if (Environment.type === EnvironmentType.Local) {
       // If the running environment is local, load the data from the mock
       return this.getAllMockTerms();
@@ -190,6 +190,17 @@ export default class SPTermStorePickerService {
             if (termStoreResultTerms.length > 0) {
               // Retrieve all terms
               let terms = termStoreResultTerms[0]._Child_Items_;
+
+              if(hideDeprecatedTags === true)
+              {
+                terms = terms.filter(d => d["IsDeprecated"] === false);
+              }
+
+              if(hideTagsNotAvailableForTagging === true)
+              {
+                terms = terms.filter(d => d["IsAvailableForTagging"] === true);
+              }
+
               // Clean the term ID and specify the path depth
               terms = terms.map(term => {
                 if (term.IsRoot) {

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -754,7 +754,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                 <TaxonomyPicker
                   initialValues={this.state.initialValues}
                   allowMultipleSelections={true}
-                  termsetNameOrID="b3e9b754-2593-4ae6-abc2-35345402e186"
+                  termsetNameOrID="313362ca-6813-4433-bcce-7bf74a18b9cb"
                   // anchorId="0ec2f948-3978-499e-9d3f-e51c4494d44c"
                   // disabledTermIds={["943fd9f0-3d7c-415c-9192-93c0e54573fb", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
                   // disabledTermIds={["943fd9f0-3d7c-415c-9192-93c0e54573fb", "73d18756-20af-41de-808c-2a1e21851e44", "0e415292-cce5-44ac-87c7-ef99dd1f01f4"]}
@@ -764,7 +764,9 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   label="Taxonomy Picker"
                   context={this.props.context}
                   onChange={this._onTaxPickerChange}
-                  isTermSetSelectable={false} />
+                  isTermSetSelectable={false}
+                  hideDeprecatedTags={true}
+                  hideTagsNotAvailableForTagging={true} />
 
                 <DefaultButton text="Add" onClick={() => {
                   this.setState({