How To: Displaying a sorted list of repeating events

One of my apps displays a list of events from a DB Thing called Program. I display the programs sorted by dates. Sounds easy enough yes? Yep. Here’s where it gets a little bit complicated, some programs have multiple dates. I think it’s silly to have multiple items in the DB for each date for one program. It’s also a waste of WU to have to set up additional actions just to get them synced. Instead I just run some looping client side during page load with the help of Listshifter (now only available in Floppy).

Note: You can of course create your own loops using native Bubble but why go through all that trouble?

Here are the important parts of the setup:

  • In the DB: A field in Program called “List of Program Dates” (duh)
  • On your front end: A repeating group that displays a list of ‘text’
  • On your front end: An “Upcoming Programs” state which will store a list of text and will be the data source for the RG

The overall idea itself is pretty simple; on a user’s page load generate a list of text to display in the repeating group. Side note: My app is an SPA so I have a first page load only workflow to prevent repeats when using When page is loaded.

There’s 2 things to think about here. Firstly, how are we going to sort the text so that it follows the dates of the program. Secondly, how we generate the text list.

Solution one is for each text item to be date-of-program:extract(UNIX)|UID-of-program
The UNIX allows the text list to be sorted by date, the UID let’s us point the RG’s cell to the right Program

Solution two is to use ListShifter’s iterate feature (I will assume that you are familiar with ListShifter) to generate a text item for each date of each program. So what each iteration does is merge a list of text items to the “Upcoming Programs” state. Achieved by using the operator List of Program Dates:format to text:split by(). For my use case I don't want to show any dates before today so I just filter out dates before the current date, before the :format to text` operator.

Note: Actually I run a custom workflow for each iteration for easier troubleshooting but you don’t really have to.

So now that I have my list of text I just display them in the RG and for each cell I use the :split by(|) operator to grab the UID of each program. Just a side note, I don’t use a Do a Search for each cell. I already have the Programs loaded in a separate state. So I point each cell to the state and use a :filtered operator to match the UIDs. You DO NOT want multiple cells running real-time searches.

Another tip from me. Hope this helps someone!

1 Like