Dynamic Filtering in frontend


#1

Enonic version: 7.1.1
OS: Windows Server 2016

Hi,
I have a list of articles that is displayed, but we want to add filtering to the list.
The articlelist is set in the model and I use thymeleaf to render the content.

What would the best approach be?
Can I manipulate the model and force it render new model?
Should I create a service and call it, with the parameters?


#2

There are many ways to do this, but I’ll try to answer this briefly with a summary of how I would do it:

Assuming that this filtering is done in an Enonic XP part, and the filtered articles are only to be displayed in that part and not to be queried from elsewhere, then I would not bother to create a service. I would just do a client-side Ajax GET request to the same part (use componentUrl() in lib-portal to generate the URL), and in the controller I would have separate logic if there were filter parameters in the incoming request URL. In that case, I might even not return the full part HTML using Thymeleaf, but perhaps just return JSON with my filtered article data which my client-side JavaScript would then inject into the article list container element.

In other words, the default behavor (no filter parameters) would then be to render the full part using Thymeleaf and display a full list of unfiltered articles. But when the part controller is called and there are filter parameters present, then the controller would return a different set of data which you can then display dynamically on your page using client-side JavaScript.

This way, the part sort of becomes its own service. There is however nothing wrong with creating a separate service for this, and the logic would mostly be the same. You just substitute componentUrl() with serviceUrl() so that the URL to the Ajax call is something else. So it’s really more a question of how you want to organize your code, and if you plan for your article query to be used by something else in your application (or external integrations) other than this specific article-list part.

Do you want me to dive more into the specifics of any of the steps I mentioned above?


#3

Thank you for the answer Bjørnar, I resolved this by adding a function in the page controller that takes params from the URL.