How To Retain Filters Across Pages

Wappler General How To
1

Hi.
I have a NodeJS SPA with 1 layout page & 2 content pages.
Both content pages have a table with sortable headers and a search input.
All of the values, including search, are configured using on-page Query Manager, and bound to the server connect using query1.data.offset1, query1.data.sort1, etc.
Similar setup is on the second page, where bindings look like query1.data.offset2, query1.data.sort2, etc.

SC on both pages are on auto-load - so that page changes and sorting changes & search all work seamlessly.

Now, if I change offset to say 3rd page on one content page, and then click on a link to go to second content page, SC of current page gets fired without offset param even though the user is redirected to second page.

Same behaviour continues when moving between pages.
This leads to too many wated API calls to SAs, which have no value.

How to handle this?

2
  1. Create separate Query Manager for each SC
  2. Store all your Query Managers on Layout page
3

Already have that.

Let me try this.

4

Did not work. SC still gets loaded while leaving the page.

5

@patrick Please help.

6

Without going into your setup I can tell you that those things are normally stored in browser local storage.

7

You mean I should change my setup to store the filters in local storage instead of query manager?

The idea behind using query manager was that usually in website I see that any filters applied show up in the URL. Then, based on that if I am navigating back/forward or from history or directly from a shared URL, the data I see is filtered based on those URL params.
This is what I am trying to setup in Wappler as well.

This does work, but the only problem is that when navigating away from a page, SC gets triggerred due to query params being removed from the URL.

8

You store the filters in local storage and then read url query parameters from there and apply the needed logic to send to SC and navigate URLs. Cookies and sessions are an alternative.

9

I am confused now. Query params are supposed to be read from the URL, no?

Are you suggesting to always just use local storage? But that would defeat my purpose of applying filters form the URL params.

10

I mean you set the query parameters for the url based on the data stored in browser if it exists.

11

Right, I understand now. I had thought of that actually… and have it working via Cookies at one place… but there the SC is set to noload.

In the various pages that I have filters now, all the SCs are on auto load. So change in filters and page size and offset etc lead to auto-reload.
Which is why I am looking for a solution such that navigating to a page with these values loads correct inputs.
And when navigating away, it should not trigger the auto-load SC again.

12

Maybe you could use a ternary in the SC component and evaluate the condition you need to set the SC file or null.

13

That the last resort. :sweat:
I fear using that as it adds to the list of dynamic items on the page… But I guess with the new AC, it should not affect performance much.

1 Like