Filtering a Content Query Web Part using query string parameters in SharePoint Online (Modern Pages)

[MrUhderhill]

I created a SharePoint Online Page (modern) and added a Content Query Web Part.  I connected the web part to a list and I can see all the items, however, I want to navigate to this page and send a query string to filter the results.

I tried using the FilterField and FilterValue approach, but it doesn't work.  It works well if I use them while navigating to the list page (AllItems.aspx), but not if I use them on a custom Page with a content query.

Let me know if there is a way to do this, thank you

[#2]

Hello @MrUhderhill 

Content Query Web Part (CQWP) is a classic only web part, it's ootb not available on modern pages.... Pls send a printscreen to verifiy this.

Other is issues with CQWP, better way is to use search. In this article named as CSWP (= in modern use PnP Modern Search Web Parts): https://learn.microsoft.com/en-us/microsoft-365/enterprise/using-content-search-web-part-instead-of-... 

Here are some more information about Content Query Web Part: https://support.microsoft.com/en-us/office/when-to-use-the-content-query-web-part-or-the-content-sea...

You can use modern web parts for scenarios like yours. You can use list web parts to connect, highlighted web part (based on search) or the PnP Modern Search web part as free web part from github ( https://microsoft-search.github.io/pnp-modern-search/ ).

Best, Dave

[#3]

Hi @DaveMehr365, thank you so much for your feedback.

Apologies as I failed to mention that we are using the React Content Query for modern pages, which we download a while ago, we are going to check again to see if there is a new version or ask for feedback there.

I do have a follow up question for you.  I like the approach of using search, but let's say you are building a site to manager your Vendors.  So you have a Vendors List, a Vendor Contacts List and a Vendors Document Library.  I can easily build a search page that will allow me to search and facets to filter the results, etc.  What if I wanted my users to click on a Vendor on the search results and take them to a Page that will display all the information of that vendor (vendor information, contacts and documents), how would you go about building this?  I tried building a page with 2 List Content Parts and a Document Library and connecting the parts via Dynamic Filtering, but I'm having a hard time to filter the Vendor List with one via Query String parameter.

Let me know your thoughts on this.  Thank you  

[#4 · Accepted solution]

Hello @MrUhderhill 

i think this PnP Modern Search scenario tutorial can help you, right?!

https://microsoft-search.github.io/pnp-modern-search/scenarios/use-query-string-in-url/

Best, Dave

[#5]

Hi @DaveMehr365 , yes, this should work.  We also learned that the React Content Query webpart now supports query string parameters so we are going to try both.  

Thank you for your help