Dynamic positioning in a repeating group?

Hey!

I’m building a workout tracking app and I’m planning a feature that will show a daily timeline that will show different activities under the correct time of day that they took place (inspiration in the pic below, in a baby tracking app)

IMG_4601

I wonder what is the best way to dynamically position an element for this feature and would love some inspiration if anyone worked on something similar

Currently I’m planning it this way:

  1. Build a repeating group for dates, each row for a different day
  2. In each row there will be a fixed group, fully stretched. It’s width will spread Under the time of day titles like in the picture
  3. Each activity in the day will be positioned dynamically (using a plugin) with dynamic X values relative to the amount of minutes that passed since the beginning of the day

How does that sound? Trying to find the best solution :slight_smile:

Thanks!
Omer

It is possible, but becomes a mess and impossible to get right if you need overlapping events and do not restrict the number of events shown for a specific date/time combination using native Bubble features only.

Needs a lot of conditionals and elements that may or may not be made visible based on the conditionals. I built one and never implemented it in the app as overlapping events causes issues.

You could maybe get a plugin developer to build something for you using traditional code I bet. Contact any of the developers of any of the existing calendar plugins.

2 Likes

I think it may be easier this way.

  1. As you said, a repeating group for dates, each row for a different day.
  2. In each row, there is another repeating group for each hour (0… to 23, or in this case 0…12 and another 0…12)
  3. Each cell in the inner repeating group will change color or icon depending on current cell’s date (outer repeating group’s) and current cell’s hour (inner repeating group’s) has something to display.

In this way, you don’t need to worry about the length of the different activity. Because if that specific hour is intersecting with an activity somehow (meaning the start hour of the event + duration of the event falls under that specific hour), you just color it green, for example.

I don’t know if that makes sense :slight_smile:

Hey!

Thanks for the reply. This was actually the first way I tried it :slight_smile:

I got it to wrok and it looked like this:

There are 2 issues with this solution though:

  1. The location for each activity can be only accurate to the hour where it occured and not to the minute
  2. It takes a lot of processing: for each hour of each day there should be a “search for” to get the condition right

I offered the solution in the first post in this blog because I believe it can solve both of these problems if possible (position will be accurate for minute of day and there will be way less processing needed)

Still not sure if it will work though

Hey! Thanks for the reply

It is possible, but becomes a mess and impossible to get right if you need overlapping events and do not restrict the number of events shown for a specific date/time combination using native Bubble features only.

You are right, in this solution I will need to limit the number of elements that might be presented in each day because I count on the fixed group propreties (using the X values) and therefore cannot count the a repeating group to make “inifinite” elements for me… but thats ok I think, I can make around 10 elements and I think that will be enough either way

Needs a lot of conditionals and elements that may or may not be made visible based on the conditionals. I built one and never implemented it in the app as overlapping events causes issues.

This is the main issue. I’ve been playing with the dynamic position plugin by Zeroqode and it seems like it wont be easy >>

I will need for each elemnt to create a workflow that position it inside the fixed group relatively to the number of minutes that passed since the begining of the day. This requires:

  1. Dynamic position workflow for each element (7 rows X 10 elements = 70 workflows for each load of this page)
  2. Another plugin to trigger the workflows inside the repeating groups

I wonder if this can be saclable

You could maybe get a plugin developer to build something for you using traditional code I bet. Contact any of the developers of any of the existing calendar plugins.

Any reccomendations on who should I try contacting?

I don’t other than what I mentioned previously

1 Like