Forum Academy Marketplace Showcase Pricing Features

Repeating Group + ADD Vertical

Dear fellow Bubblers,
while developing a SaaS app I came to an interesting problem, which I could not solve, however. Thus asking it here:

Please see the small mockup above for reference. Imagine a repeating group, being vertical with three elements on a row. Scrolling is full list or ext. Scrolling, does not matter too much here. RG is, of course, filled with dynamic data.

However, I am looking for a way to add an “adder” at the end of this repeating group. Mockup above, for reference, would be 2 RG entries and the third “adder” is linking with a workflow to a site where a new thing can be created. However, I could not find any convenient solution to solve that.

Few things I tried:

  1. Inserting adder below (see for reference→ crashes UI and UX
  2. Setting a group below a group and dependent on the size of thing searched for one of those “adder” groups is appearing or not - messes with clicking, as many groups are overlapping many groups
  3. Thought about adding a “template” as a thing (giving it attribute “default” or something like this to search for it), configuring my data source of the RG to {“do a search for my real things i am looking for” + “do a search for dummy default adder”} → could not make it work and seems to be a lot of effort, as you need to have two groups in each cell and depending on the datatype of the current cell show one or the other group

Looking forward to your suggestions - I hope you have something better to offer. thank you.

All the best!

I tried this out:

Appreciate the effort Rico - thanks a lot! Without converting it to text I guess this leaves me with 3, adding a template object. However, this looks pretty convenient for you. I’ll give it a shot, either with converting via text or going live with new version and checking performance.

You can add a trailer element without adding to your DB. If it’s singular non-text data type (like dates or something), just set your Data Source to :plus item an arbitrary unique value. Then in your RG, perform the button-like conditionals if cell’s index = RG’s total count to overwrite the final value.

If it’s a complex data type, like an API return, that’s trickier as just trying to append a value from the same API call will get weeded out by Bubble’s automatic deduplication of RG list appends. But I did get it to work by adding a layer of abstraction to the RG.

-Populate a custom state with your API / complex datatype output
-Your RG is of type text, it’s datasource is any unique value from the custom state :append “caboose”
-Create container groups within the RG cell of the type of your API/complex datatype, the source of which is your custom state’s list :item# RG cell’s current index

This technique does not work for empty lists however. You’ll have to detect when the data source is 0 records and show a hidden initialization group with an “Add first entry” or something.

Another approach without using the dB: