Create custom filter component that will filter custom list data

[SShivi]

Hi,

I have created a custom web template in my portal application that shows data from a dataverse table using fetchxml, liquid template and html in the form of a custom list, something like below image:

Now, I want to add custom filters on the same page to filter the above grid data. What would be the best approach for this. I think I have to create another webtemplate to display filters and refer it on the page, but how to establish a connections between these 2 components on the same page?  The design should be something like below:

[OliverRodrigues]

Hi, you can access the filters from your List via Liquid using:

    {% assign filters = entitylist | metafilters: params.mf, entityview %}

you can use this documentation as example: Available Liquid filters - Power Apps | Microsoft Learn

[SShivi]

Hi @OliverRodrigues ,

Thanks for your inputs. But the design I mentioned above is created using a web template with a mix of liquid template, fetchxml, html and javascript. The filters are also created using fetchxml and html option set. Both the webtemplates are added to the page. Now I want to filter the products grid based on the option selected in custom filters.

[OliverRodrigues]

Hi, is your data retrieved via List component and rendered via Liquid? or is your data also retrieved via Fetch?

My take on this is that you should either go all Fetch/custom HTML and use Liquid to render the results

or use the everything within the List component, including the filters, you can still use Liquid to render the results

I don't think you can really mix the two

[SShivi]

Hi,

I am not using List component. The image attached is done using FetchXML and custom HTML and results are rendered using Liquid. Same is the case with the filter component. It iscreated using another web template. Now I need to establish the connection between these two, so that the below grid is filtered based on the value selected in filter component.

[OliverRodrigues · Accepted solution]

Okay, apologies, I initially understood you were using the List component.

I would approach this the following way (but overall it depends on how you wrote your code):

• Main web template/web page
  • this should "include" the filter web template
  • this should contain the main Fetch for data + rendering the results
  • this should read the query string for any potential filters
• Filter web template
  • this will contain your drop-downs and the "Apply/Search" button
  • the button should refresh/redirect the user to the same page but this time adding parameters to the query string, i.e.: /services?category=123&servicename=XYZ
  • you might need JS here to change the parameters of the button link, or maybe (probably better) generate the URL on the click of the search button