TaxonomyPicker does not work correctly with anchorId

[bva999]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.9.0 ]

Observed Behavior

I use anchorId, to select terms from that level and below. In terms tree view it shows correct values. But auto complete ignores it and shows values from the whole tree…

Thanks!

[bva999]

Can anyone answer this question? has already passed 20 days and silence...

[PiTomar]

Can confirm this behavior. Would be nice if this will be fixed.

[praveenbattula]

I see this issue at my end and there is no update from authors since long time. I will look through source code myself and will find where is the issue!

[praveenbattula]

I tested the code in my node_modules directly. And it is working fine. To make it work I have changed at 2 places.

1. In TermPicker.js file
2. In SPTermStorePickerService.js file

In TermPicker.js file:
In method TermPicker.prototype.onFilterChanged search for searchTermsByName and replace with below line. (We are passing anchorId to service.)

return [4 /*yield*/, termsService.searchTermsByName(filterText, this.props.termPickerHostProps.anchorId)];

SPTermStorePickerService.js file:
In method: SPTermStorePickerService.prototype.searchTermsByName, replace else block with below code.

                var _terms = response;   
                if (anchorId) {
                    var anchorTerm_1 = _terms.filter(function (t) { return t.key.toLowerCase() === anchorId.toLowerCase(); }).shift();
                    if (anchorTerm_1) {
                        //var anchorDepth = anchorTerm_1.PathDepth;
                        var _anchorName = anchorTerm_1.name;
                        var anchorTerms = _terms.filter(function (t) { return t.path.substring(0, anchorTerm_1.path.length) === anchorTerm_1.path && t.key !== anchorTerm_1.key; });
                        // anchorTerms = anchorTerms.map(function (term) {
                        //     term.PathDepth = term.PathDepth - anchorTerm_1.PathDepth;
                        //     return term;
                        // });
                        _terms = anchorTerms;
                        return _terms;
                    }
                    else
                        return _terms;
                }
                else
                    return _terms;
            });```

I will fork it and submit the fix and see if they are ok with it. Let me know if you need help!
-Praveen.

[praveenbattula]

I have created cleaner implementation and tested in my local node_modules directly because I have different versions of spfx, node and other modules in my system. Can't run the actual project. If you like to know or use the implementation here is the information.

Instead of changing the existing implementation which doesn't implemented to consider anchorId, I written a new method which handles that scenario. So, all the existing methods are not disturbed and new method will help us to find terms in a specific parent term id (anchor id) given.

File: SPTermStorePickerService.js

/**
       * Searches terms for the given parent term id
       * @param searchText
       * @param termId
       */
    SPTermStorePickerService.prototype.searchTermsByTermId = function (searchText, termId) {
        var _this = this;        
        if (sp_core_library_1.Environment.type === sp_core_library_1.EnvironmentType.Local) {
            // If the running environment is local, load the data from the mock
            return SPTermStorePickerMockService_1.default.searchTermsByName(searchText);
        }
        else {
            return new Promise(function (resolve) {
                var childTerms = _this.getTermsById(termId);
                if(childTerms){
                    resolve(_this.searchTermsBySearchText(childTerms ,searchText));
                }
                else{
                    var data = '<Request xmlns="http://schemas.microsoft.com/sharepoint/clientquery/2009" SchemaVersion="15.0.0.0" LibraryVersion="16.0.0.0" ApplicationName="Javascript Library"><Actions><ObjectPath Id="1" ObjectPathId="0" /><ObjectIdentityQuery Id="2" ObjectPathId="0" /><ObjectPath Id="4" ObjectPathId="3" /><ObjectIdentityQuery Id="5" ObjectPathId="3" /><ObjectPath Id="7" ObjectPathId="6" /><ObjectIdentityQuery Id="8" ObjectPathId="6" /><ObjectPath Id="10" ObjectPathId="9" /><Query Id="11" ObjectPathId="9"><Query SelectAllProperties="false"><Properties /></Query><ChildItemQuery SelectAllProperties="false"><Properties><Property Name="IsRoot" SelectAll="true" /><Property Name="Id" SelectAll="true" /><Property Name="Name" SelectAll="true" /><Property Name="PathOfTerm" SelectAll="true" /><Property Name="TermSet" SelectAll="true" /></Properties></ChildItemQuery></Query></Actions><ObjectPaths><StaticMethod Id="0" Name="GetTaxonomySession" TypeId="{981cbc68-9edc-4f8d-872f-71146fcbb84f}" /><Method Id="3" ParentId="0" Name="GetDefaultSiteCollectionTermStore" /><Method Id="6" ParentId="3" Name="GetTerm"><Parameters><Parameter Type="String">'+termId+'</Parameter></Parameters></Method><Property Id="9" ParentId="6" Name="Terms" /></ObjectPaths></Request>';
                    var reqHeaders = new Headers();
                    reqHeaders.append("accept", "application/json");
                    reqHeaders.append("content-type", "application/xml");
                    var httpPostOptions = {
                        headers: reqHeaders,
                        body: data
                    };
                    return _this.context.spHttpClient.post(_this.clientServiceUrl, sp_http_1.SPHttpClient.configurations.v1, httpPostOptions).then(function (serviceResponse) {
                        return serviceResponse.json().then(function (serviceJSONResponse) {
                            // Retrieve the term collection results
                            var termStoreResult = serviceJSONResponse.filter(function (r) { return r['_ObjectType_'] === 'SP.Taxonomy.TermCollection'; });
                            if (termStoreResult.length > 0) {
                                // Retrieve all terms
                                var terms = termStoreResult[0]._Child_Items_;
                                var returnTerms_1 = [];
                                terms.forEach(function (term) {
                                    returnTerms_1.push({
                                        key: _this.cleanGuid(term.Id),
                                        name: term.Name,
                                        path: term.PathOfTerm,
                                        termSet: _this.cleanGuid(term.TermSet.Id),
                                        termSetName: term.TermSet.Name
                                    });
                                });
                                sessionStorage.setItem(termId, JSON.stringify(returnTerms_1));
                                resolve(_this.searchTermsBySearchText(returnTerms_1 ,searchText));
                            }
                            return null;
                        });
                    });
                }
            });
        }
    };
    SPTermStorePickerService.prototype.searchTermsBySearchText = function(terms, searchText) {
        if(terms){
            return terms.filter(function (t) { return t.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1 });            
        }
        else
            return [];
    }
    SPTermStorePickerService.prototype.getTermsById = function(termId) {
        var terms = sessionStorage.getItem(termId);        
        if(terms)
            return JSON.parse(terms);
        else
            return null;
    }

To make use of this service method the caller file is
TermPicker.js
In onFilterChanged method find the code below
termsService.searchTermsByName(

and replace the line with below line.

return [4 /*yield*/, termsService.searchTermsByTermId(filterText, this.props.termPickerHostProps.anchorId)];

This will take anchorId as the input and search for the filterText given and shows the right terms in type ahead search. Also, please note that the taxonomy service is saving the values in the given anchor id terms in sessionStorage. So, it won't make calls for each key press.

Please let me know if you have any questions. I will submit the code to repository sometime this week.

thanks
-Praveen.

[DRamalho92]

Hi Praveen, I had this issue and your code worked like a charm. Can you do a Pull Request to the library? Let me know if you want help on that or if you want me to commit these changes.

Thank you.

[estruyf]

The PR has just been merged and available in beta at the moment. This will be part of the 1.19.0 release.

[praveenbattula]

thanks @DRamalho92. Somehow I didn't see the github messages in my inbox. Thanks @estruyf for accepting my changes!

[kmarwen]

Thank you @praveenbattula for providing this fix but unfortunately we are now using the v3 of the pnp controls react and the issue is back. It means that the fix has not been merged with the new version :/
I have used the fix as it in the node module as specified at the beginning, but we need to include it also on the new 3rd version

Kind regards