AppMaker - Display only Filtered Items in Tabs

Question

I'm still quite new to AppMaker and struggling a bit getting my head wrapped around the Binding of datasources and manipulating the results.

I would like to know if there's a way to display only filtered results from a datasource in each Tab. I'll explain better. I have an EmailTemplate Data model with Subject, Body and Type fields. In the UI I added a Tabs container and would like to display in each tab only the EmailTemplates that match the selected Tab (item.Type === selectedTab).

I managed to do this with a Server side query filter with parameter linked to the onChangeTab event and that works fine BUT, it is server side so each time a new tab is selected it has to go back to the data and filter it and return the data which is taking a few seconds and makes the app look slow.

I was wondering if there's a way to only display data in each tab filtered by the condition above. So, keep the entire list of results but only display the ones that match the tab. I noticed there's an option to filter the items returned from the datasource but it doesn't seem to be changing the displayed data.

Any ideas?

Thanks!

A few things to consider. If you apply a filter client side when changing your tabs you would want to clear your filters via datasource.query.clearFilters(), then set the new filter and then reload the datasource via datasource.load(). This would still take a moment however and introduce what you described as 'lag' in the UI. I believe what you describe in your last paragraph 'it doesn't seem to be changing the displayed data' is because you don't reload your datasource. Alternative, create a separate datasource for each tab and filter the results on the server and autoload the data. — Markus Malessa
Sorry for the late comeback to your comment Markus. If I'm not mistaken, what you're describing is still a trip back to the server to reload the data after applying the new filter. What I was talking about is more like the filter in Gsheets or Excel where the data is still there it is just hidden. — vollucris

Mr Printer Mr Printer · Accepted Answer · 2018-10-11T23:30:50

I have done exactly this in the past (but then switched to a set of radio buttons that re-select items on value change, since each of my tabs displayed very similar information).

IIRC, what I did for the tab widget's onSelectedTabChange is just what you describe:

widget.datasource.unload();
widget.datasource.query.filters._key._equals = null;
widget.datasource.query.filters.Type._equals = selectedTab;
widget.datasource.load();

I agree that this is not very fast, and it's janky, since the unload makes the table go blank while waiting for the new data to show up. I don't have a better idea, like post-filtering what you got in your datasource. That would potentially be hard since your in-memory filter would have to possibly loads tons of data from the database to find a few (or no) entries matching your desired filter.

AppMaker - Display only Filtered Items in Tabs

1 Answers