Create interactive task planner app with Bubble.io

How to list events or tasks inside a day or a week? Looking for a way to group product by days (like on Product Hunt?) Here’s a step by step guide, how you can do it.

There are plenty of questions in Bubble forum regarding “nested” repeating groups and how to use them in order to create a task planner (something like this).

This structure is useful in events planners or tasks planners when you want all your event of the day to be grouped within one “cell” with a single title. Even if you want to build a platform like Product hunt where products are grouped by date of release and displayed in a list. 10 products today, 11 products yesterday etc. Any repeating group list by days will have similar technical solution, actually.

“At first glance it seems reasonable to use nested repeating groups to create something like this. You use “mother” repeating group for dates and insert a “child” repeating group inside for events. Sounds like a piece of cake! However, as soon as you begin working on this project you stumble upon a huge problem: repeating groups in Bubble should have data stored in the data base as it’s source. And while you can place your events, tasks or products in the db, you can’t do the same with dates! You can’t possibly think of creating an entry for every date in your app so that your repeating group (RG) refers to it. Besides, it’s a known fact that “nested” RGs are extremely slow and idecrease your app’s resilience. So, what’s the way around? Here what we use in our projects.

1. Use hidden variables pop up.

It’s a pop up that users never see but that can carry in itself lot’s of important data. Think of it as of a header in API calls where you can send important information to the app. In this case I use a group in hidden variables pop up that I set to be Current data and time rounded down to week (for a weekly display of instances).

2. Upon page load

display data in this group : Current date and time rounded down to week.

3. For navigation between weeks

use a group that will display on load a date taken from your hidden variable Group.

Clicking left arrow (backwards) you display data in your hidden variables withdrawing 7 days from a date it already contains. Sure enough, when you click on the right arrow (ahead), your workflow should send data to the hidden variable displaying +7 days from the date it contains now (NOT the current date!).

So far it’s been an easy part, right? Now for the tasks. I suggest forget about nested repeating groups and use regular group + repeating groups instead.

4. Listing events/tasks within a day or a week

Make 6 equal groups that contain a date and a repeating group of tasks.
All groups will have type of content date. The source – your hidden variable group dates. Group 1 – Hidden var date, Group 2 – Hidden var date +1, Group 3 – Hidden var date +2, etc. Altogether – 6 groups for 6 days of the week The 7th will already belong to another week).

Repeating groups inside – that’s easy. They contain all tasks whose date is within this groups date (rounded down to day).

6. Add hiding rules

Finally, add hiding rules to the group in Conditionals tab: if repeating group inside this croup contains 0 tasks, this group should not be visible.

That’s it. It is a very easy to implement structure that will not require from you any specific plugins and you will not have to use “nested” RGs that would probably slow down your app considerably.

Tell us about your idea to get a discount

Share This