Taxonomy Tree view in Filters

[kmrshubham0]

I would like to contribute a specific filter for taxonomy structure. I have seen in many requirements in search filter where they wanted taxonomy to appear same structure how it shows in termstore. So in filter if they users provides in the configuration Refinablestring and termset id. The filter will load the termset structure the same way how it appears in termstore. Not only that it they will have the option to maintain parent child relation. For ex. If A is parent of child B and C. Then when user selects B the result will shown for both B and A. If users select A then the result A,B and C will be shown.

Can you give me the permission to contribute on this requirement. I will document the detailed requirement if above little summary looks good

[simonpierre-giro]

I support this request, that would be an awesome feature

[wobba]

@kmrshubham0 Providing which managed property to target could be optional. You can target Tags where you prepend 0 in front of the guid or just do a free-text search for the guid itself to get results. Also if people use site columns you have the auto mp's you can optionally target without needing to mapping anything (see examples at https://www.techmikael.com/2014/03/s15e01-kql-basics.html). With some random testing it seems the automp is created now regardless of a site column or not(?), but have to verify this.

This means free-text search for the term guid should yield any items tagged with that term or below.

Feel free to fork the dev branch and start a PR. If you want to share the setup UX before starting, you can do that so we agree on the setup approach.

[FranckyC]

Hi @kmrshubham0, that's not a bad idea of course ;). However, it will require several updates to the base code, things I'm not really pleased with given what happened with the v3 version over the years. Anyway, to make this feature complete you will have to consider the following constraints:

• Should be a static filter and not dynamic (i.e. the selected values are matched to the corresponding managed property in the configuration) https://microsoft-search.github.io/pnp-modern-search/usage/search-filters/#filter-types-static-filter-versus-refiner-filter
• Should support pinned and reused terms
• Should support paging for each tree level with dynamic retrieval
• Should support term set/anchor term selection as filters (multiple/single)
• Should support children/unique term refinement
• Should support multi/single selection
• Should use caching mechanism for performances
• Should work with SharePoint Search and Microsoft Search data source
• Should prefer Graph APIs over CSOM when applicable
• Should work for any languages
• Should support term/term set/term group value search according to the current filter item type (Optional)
• Should only output the taxonomy item IDs to data sources during item selection. The data sources have the responsibility to transform these values as corresponding filter values (GP0, L0, etc.).

Also, due to the current architecture of the refiner Web Part, the taxonomy picker has to be implemented through a web component like other filters, making the component state handling quite challenging. Using the PnP Taxonomy picker control is also not an option as it uses CSOM if I remember correctly.

As you can see, this is not simple as it looks. I strongly suggest you to draft a minimal code implementation in your forked branch for review before going forward with more complex things.

FYI, this feature already exist, but in an other version based on the pnp modern search and it took months to achieve due to this inherent complexity. To give you an idea:

We won't merge something not compliant with the current architecture and expected feature level.

[kmrshubham0]

Hi @FranckyC,

Thank you for the reply with the suggestion. I have done similar thing in one of my project. What I have done their is like I created my own Custom Refiner filter which reads the configuration from sharepoint list and then shows the tree structure as per the mentioned termset id. In the refiner I am showing the tree structure with the search functionality, meaning if tree is big then search the keyword and it is narrowing down the tree view. And here I am using the same parent child relation. This also works based on the configuration. If in configuration it is mention as Parent Child then it will with this relation or if it selected individual then it will show result for particular tag. In my custom refiner I am using the concept of GP0 & GPP. And this custom refiner I have connected with PnP Modern Search web part of version V3.

I will fork the dev branch will add the things accordingly what you have mentioned. Just wanted check one more thing if i can use PnP-SPFX-Controls or Fluent UI here or not.

What else i am thinking is like for parent child functionality we can update treeview of the PnP spfx control and that control we can use it here. So like this way we will have minimal changes here and there also.

[wobba]

@kmrshubham0 we are already using the PnP reusable controls, and you can use components from [email protected] which is already included in the project. See packages.json for current included packages.

[FranckyC]

What I have done their is like I created my own Custom Refiner filter which reads the configuration from sharepoint list and then shows the tree structure as per the mentioned termset id.

Not sure I get it but anyway, using a sharepoint confiugraiotn list is not an option in this scenario for the modern search. If you want to use the PnP control (which I'm not a fan), you should of course do your modifications directly in the https://pnp.github.io/sp-dev-fx-controls-react/ repository and integrate it with the modern search following the requirements mentioned above.

[HamEv]

Hi, I just to ask about that sentence:
"FYI, this feature already exist, but in an other version based on the pnp modern search and it took months to achieve due to this inherent complexity."

In which version does that exist? I cannot find the a Taxonomy tree in v3, but that would be a great feature.

[FranckyC]

Hi @HamEv , see https://aequos-solutions.github.io/modern-data-visualizer/features/

[kmrshubham0]

I will start on this soon.

[myatix]

I think this would be a great addition to the PNP Modern Search solution.

[FranckyC]

@kmrshubham0 do you have any preliminary work you want to be reviewed?

[kmrshubham0]

not yet..Will be starting soon..

[myatix]

@kmrshubham0 We would love to know if there’s any progress on this? It’s definitely something that is missing from SPO Modern sites and something I am sure a lot of people would benefit from. Especially as you can’t use things life Power Automate on the Classic experience for things like approval workflows. This means that using a classic page is no longer an option for a lot of users and makes the need for this solution even more valuable.

[kmrshubham0]

Hi @myatix it's in progress. I was unable to work in last 2-3 weeks due to some personal work. I will be showing the some part soon. I have already created another solution only for refiner in one of my project which is showing treeview structure of taxonomy with the features parent-child

[patrikhellgren]

@kmrshubham0 You should be aware of that there is a new taxonomy picker control available in the PnP reusable controls called ModernTaxonomyPicker that you should be able to use. Here is the documentation. One thing that has not been mentioned above is that it is crucial that the control has a "load on demand" feature to handle large term sets and the ModernTaxonomyPicker has that already. I have recently made a PR to that control that also makes it possible to use just the taxonomy tree control separately which could also be an alternative for you. Until the PR has been accepted and merged you can have a look at the updated documentation here.

[kmrshubham0]

Got it how and where to use

[patrikhellgren]

Great and if you are looking into using the TaxonomyTree control my PR has been processed so that should be available in the latest beta of @pnp/spfx-controls-react.

[kmrshubham0]

ok will use that one...

[kmrshubham0]

will that controls need webpart context to be work?

[patrikhellgren]

The TaxonomyTree control does not require webpart context but you will need webpart context to be able to use PnPJS to load the terms as you can see in the example here. To have selections available in the control you will also need to pass an existing Office UI Fabric Selection object prop to the control in addition to what is seen in the example.
You will also probably need to have a term picker in your filter control, to be able to search for terms if there were many terms in the term set. For that you could use ModernTermPicker which is also a part of the ModernTaxonomyPicker control.
Unfortunately there is no examples available of how to use that but it should be easy to get info on how to use it from here and here.

[myatix]

Hi All, I was wondering how this feature was progressing? I would be more than happy to assist with testing if you are ready with a solution. I would be so great to have this functionality in the Modern Search solution. Let me know if I can assist!

[jonasesser]

Any updates here?

[myatix]

@jonasesser It would appear that no one is working on this any longer... Unfortunately as it would be a massive improvement to the solution!

[FranckyC]

Hi, I'm not aware of any progress on this feature unfortunately. It is quite huge to implement so I don't expect it to be available in the next months anyway. If you really need this feature, you can take a look to some alternatives https://aequos-solutions.github.io/modern-data-visualizer/usage/data-filters/#taxonomy-picker-configuration.

[myatix]

Hi All, I haven't used the PnP Modern Search WebPart for a while now and was wondering if there was any update of the possibility to have a refiner based on a term store structure. I attended on of @wobba sessions at ESPC22 in Copenhagen and heard that Mikael answer a question from another user with regards to this feature. That it was something that you were working on???

Anything new on this front?

[kasperbolarsen]

Hi, I attended the same session at ESPC22, and am I recall it the answer was that the commercial version contains this feature and it was up to the PnP community to add it to PnP modern search. I read that as "not on the roadmap " 🙂

[FranckyC]

You're right @kasperbolarsen, not in the roadmap right now.

[myatix]

@FranckyC Okay... So you quote from August 2022 was a little miss leading:

I'm not aware of any progress on this feature unfortunately. It is quite huge to implement so I don't expect it to be available in the next months anyway.

This made it sound like you were actually working on a solution, but that appears to no longer be the case...

@kasperbolarsen I must have missunderstood what Mikael said... It would be nice if it either came in the core product or the PnP Modern Search solution.

It's pretty bad that Microsoft had this functionality available in Classic sites and that there is still no solution to replace it in Modern sites several years later... 👎

[wobba]

I know how I would make the feature, so it's a matter of someone having time to create a taxonomy static filter control :) It's not rocket science. And if you for classic mean the "term based navigation" I agree.

[honb]

Hi there,
I'm trying to create a custom taxonomy filter by using https://pnp.github.io/sp-dev-fx-controls-react/controls/TaxonomyPicker/

1. Create a custom layout (IExtensibilityLibrary) to show a panel/dialog which contains taxonomy filter
2. Click on OK button dialog/panel then perform search again (CustomQueryModifier ==> set query text by modifyQuery method)

However, I could not find a way to trigger search from custom layout:
context.dynamicDataSourceManager.notifyPropertyChanged('pnpSearchBoxWebPart');
context.dynamicDataSourceManager.notifySourceChanged();

context is null from CustomQueryModifier.
Do you have any idea? Thanks

[wobba]

Look at how the filter connects with dynamic data, and replicate the same logic somehow.

[kanade-saket]

@honb were you able to make any progress on above scenario , i am looking to implement a similar requirement , would appreciate any help. thanks .