Show empty cells in Repeating group?

TL;DR
I want to display empty cells in a repeating group. Possible? How?


Details:
The repeating group’s data source is a custom state (list) on the page - not a list of things already in the database. The user selects items to populate this list.

I want 5 cells visible so the user knows how many they can select, but it appears there’s no way to display empty cells in Bubble?

The left image here is what I want it to look like - it’s just a static set of elements in a group. I’d rather use a repeating group b/c the static version requires 13 workflows (for all the X’s and up/down arrows) instead of just 3.


Thanks
This is the best place on earth.

@heythere

Display numbers in the rg populating it using “list of numbers” from the toolbox plugin

Custom states are limited when compared to groups or RGs which provide you with conditionality :grinning:

1 Like

@heythere

The technique that I am suggesting is explained for the most part in this video :grinning:

3 Likes

It should be possible with a condition. For every empty cell you need, create an item in the custom state list (f.i. on page load). Set their text/description(whatever field you use) to ‘This is the best place on earth.’. Next add a condition to the description field in the repeating group like this:

Also when you add an item to the custom state list, don’t forget to delete one of those with the description ‘This is the best place on earth.’.

1 Like

Add a state of yes/no to the text elements. You can hide the text with conditional logic and pre-populate hidden text into the repeating group if that makes sense.

There are better ways but this is the simplest in my view.

1 Like

Wooowwwww @cmarchan this is so smart. Thank you for this.

2 Likes

@gerbertdelangen This is one option I was thinking of, but two complications came to mind:

First, I couldn’t figure out how to order the items in the list.
For my use case, the order of the selected items is important. When the user adds a new item to their list, it should populate the next “empty” position.

If I’ve populated the list with “empty” items, even if I remove one of those empty items to make room for the new one, that new one will go to the end of the list, right? So if I want 5 spots total, and the user has already selected 2 items, when they add a third one, it will populate position number 5.

So would the workflow be to 1) remove all those fake empty items from the custom state list, 2) add the new real item, then 3) add some new fake items to make the total 5?

And second, what actually are those fake items I’m adding to my custom state list to fill the empty spots?
The items the user is selecting are from an option set. Does that mean I need an extra option in that set that’s only going to be used for filling these blank spaces? If that’s the case, I’ll have to constrain/filter any searches for that option set across my whole app to exclude that fake option, which is not a problem, but kind of annoying.

Okay, I’m assuming the yes/no is “yes, there is an item in this cell” and “no, there’s no item in this cell” - if I’ve got that right, then wondering how that state gets changed? What’s the workflow, and what’s the trigger for the workflow?

Either way, I’m still not quite sure it works - I’ve added the state to the text element, set the default to no, and added the conditional, and in preview, the RG is empty and doesn’t show those empty cells.

Also completely possible (likely) I’ve just misunderstood what you’re saying altogether…

Apologies it was a mere summary of how it looked. If you’re having issues setting it up, you might want to just create 2 states, of two different lists and then push activated cells to their own list and reference the first list as a list of empty cells.

I know it’s not an exact answer, but you should try to figure this out in detail using documentation or tutorials from Bubble, it will enable you to learn and progress on more difficult setups in Bubble.

Ah, you are using option sets, that actually makes it easier.

  1. First, I couldn’t figure out how to order the items in the list.

Just add an attribute Order to the option set and order the repeating group using this field. Give the filler options a high order number f.i. 995 t- 999 so you are sure they are always last. Start the other options at 1 - “nr you need”. Use list shifter indeed together with field order to reorder.

  1. If I’ve populated the list with “empty” items, even if I remove one of those empty items to make room for the new one, that new one will go to the end of the list, right? So if I want 5 spots total, and the user has already selected 2 items, when they add a third one, it will populate position number 5.

Not if you use that field order as described above.

  1. So would the workflow be to 1) remove all those fake empty items from the custom state list, 2) add the new real item, then 3) add some new fake items to make the total 5?

Almost, it will be:

A) Remove the last item from custom state list, f.i.:

B) Add new item, f.i.:

  1. And second, what actually are those fake items I’m adding to my custom state list to fill the empty spots?
    The items the user is selecting are from an option set. Does that mean I need an extra option in that set that’s only going to be used for filling these blank spaces? If that’s the case, I’ll have to constrain/filter any searches for that option set across my whole app to exclude that fake option, which is not a problem, but kind of annoying.

True, not very beautiful, and bit annoying.