Smoothing the effect of filtering a custom list

The video will explain best I think! Thank you!

Re: the text jumping up during filtering. I bet if I put an invisible rectangle around the list, that would keep the text from jumping up as the list was filtering.

I have no idea how I might prevent the app from scrolling to top though…

Hi Tanner,

1.) could you elaborate on this? (I didn’t quite get what you’re talking about)

2.) if I’m not wrong, this should not happen in the native app (it looks like you are on PWA)

I hope this helps, let me know if you have any more questions. :slight_smile:

Hey @James_App_Maker. No sir, that’s the app in Test Flight on my iPhone 12 mini.

I mean that when I’m filtering a list, the following problems occur:

  1. When I click a filter topic, the current list items disappear for a moment and then the correct list items show (this is how it should happen). But during that transition, text which exists below the list, floats up to take up the space where the list items were. Once the transition is finished, the list items push that text back down to where it should be.

  2. When I filter the list, if I am scrolled down the page, the app kicks me up to the top of the page and I have to scroll down to get back to the list.

I don’t think I can explain it better than that, and hopefully the video does a better job, but that’s those are the issues.

Hey @tanner!

You can actually do this using complex visibility rules. Here’s an example:

ezgif.com-gif-maker(2)

So I assume that the courses being displayed are in a list: Audio courses are in the Audio collection etc.

Firstly, you’re going to need to add some boolean properties to the user’s table (eg: Show Audio true, Show Marketing true etc). This is for the complex visibility condition.

Next, change your list’s visibility according to the boolean properties.

If you want to show your Audio courses, then set your audio list to “will be visible if Hide Audio = True”. (this is because the default boolean setting is always going to be false, hence the audio lists will automatically be shown.)

If you want to show your Marketing courses, then make your marketing list “will be visible if Show Marketing = True

Next up: the buttons.

Have an action for the Audio Button to “Update Logged In User, Hide Audio = False, Show Marketing = False

Screenshot 2021-12-21 at 2.48.44 PM

And an action for the Marketing Button “Update Logged In User, Hide Audio = True, Show Marketing = True

Screenshot 2021-12-21 at 2.48.52 PM

Okay so now that’s all set up, here comes the tricky part; arranging all the components into one page.

You’re going to have to stack each list on top of one another.

Hope this helps!

3 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.