We’re using au-table to display a list of items and adding a click.delegate on each row to call a method in the *.ts file which using: router.navigateToRoute(route, params)
This page has a couple of toggle buttons to alter the items in the list. We’re wanting to restore these filters when the user clicks a Back button from the details.
I can successfully pass the filters as params and these are reflected in the url. In the details controller I’m capturing those values in the activate method and using them to call route.navigateToRoute(previousRoute, params) from the back button on the page.
These filters are then used to call back to the DB to get the filters items. However, the UI does not reflect the state of the table. Any recommendations for how to handle this scenario?
I’ve tried looking at the navigationInstructions object but can’t console.log this.
in Aurelia-Slickgrid I use the Local Storage to keep the Grid State and then use Grid Preset to put back the Filters and other things. So for the user, it looks like they never left the page but in reality the Filters are all reloaded. This also bring the potential advantage of saving these presets in a DB.
I’m not sure if there’s any way to save some data through browser history, there might be.
Might not be what you’re looking for though but that might give you some ideas on how to approach the problem differently
Thanks @ghiscoding for the quick response. I’m pretty new to Aurelia and extending an existing app. This is new functionality that has been added before
There’s no problem getting the table to update with the filters, it’s just the UI filter toggles I haven’t worked out how to update. They get updated by the user when clicked, but not when changed through code (via the activate method when returning to the page).
I’ve read a number of articles on this site which get close to what I’m trying to achieve but haven’t yet managed to get it working
Perhaps I need to pull out the filters into their own view and re-inject them into the list-view somehow? Or look into use App State? But then that looks pretty heavy-weight.
I actually managed to resolve my issues by adding the singleton decorator to my class. I was trying to manually track the state of the filters (toggle buttons) on the component that was controlling the filtering of the table (au-table plugin).
The singleton decorator gave me the functionality I needed with just a small tweak in the activate method to refresh the table in the case that the item’s state had changed and should no longer appear in the list. It also meant I didn’t have to pass the filters to the list page to return them when navigating back.
@singleton was going to be my suggestion for the quick and easy. You just have to be mindful of when you actually want to automatically clear those filters. Usually the case is when some parameter higher up in your navigation is changed.
Thanks @jordan-ware. The singleton is working well for us at the moment - we haven’t received any user feedback yet. The toggle filters apply to a page of items sent to a location and allows the user to select those sent to themselves or the location. Cheers.
