Filter list with buttons

Hello everyone,
I’d like to create this type of filter you see in the image below on the same screen of the app.

I would need 2 buttons: the first one should show me a list of events with an event date later than today, and the other should show me the same list of events but with an event date earlier than today, so past events.
Is it possible to build this in Adalo?

I got the same result but by switching between screens, not within the same screen.

Thanks for your support.

You can “stack” lists on top of each other with visibility settings to display or hide specific lists. Be careful not to drag a list on top of another list when doing this. You’ll want to move them into place by using the arrows on your keyboard to prevent a list nesting itself within another list.
Then, you’ll need to store a value either to the user record or an input to display the content.

For example, you have 3 options: Attive Passate and Cancellate. You can store a number to the user record or have an input and set it to 0 by default. Display “Attive” list of input or number is equal to 0. If you tap Passate, switch the value to 1 and set the visibility on the passate list to only visible if the number is equal to 1. Last, do the same for cancellate list and button. Set it to 2 when tapped and display the list only when the value is equal to 2.

1 Like

Thanks for your help @Flawless ! The logic you suggested works, but I don’t understand why one of the two lists (upcoming events, the default value) isn’t visible, while the other one (past events) yes. Below are the steps I followed:

  1. Inserted an input text with default value 0 and set it to never visible.

  2. Added two different text components: one called “Upcoming Events” with the click action Change input value to 0, and another called “Past Events” with the click action Change input value to 1.

  3. Added two different lists from the same events database:

    • The first one filtered where the event date is after the current time, visible only if the input value = 0.

    • The second one filtered where the event date is before the current time, visible only if the input value = 1.

Here’s the result when i enter this page and try to show the upcoming events:

Thanks for your help.

I solved the problem by updating all the fields in the event list :grin:

1 Like

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