Repeating Group Design Patterns

Tips
1

While building out our interface for managing automatic sFTP retrievals from legacy laboratory information systems I found myself codifying a couple of very useful design patterns that dramatically increase the functionality of repeating groups:

  1. Add a Selected Item or Selected Items custom state to your repeating group. The type of these states is either a single thing of the repeating group, or a list of the things. Populate Selected Item with the thing of the repeating group cell that the user most recently clicked. Likewise populate Selected Items when multi-selecting.
  2. To do the populating of Selected Item have two “When cell clicked” events. The first event is conditioned on parent cell’s thing is repeating group’s selected item and sets repeating group’s selected item =, clearing the selection. The second event is conditioned on “parent cell’s thing isn’t repeating group’s selected item” and sets repeating group’s selected item = parent cell’s thing.
  3. The Selected Item is most useful in conditional formatting using the dual conditions of selected item is this thing and selected item isn’t this thing. For example to toggle the visibility of a group to show more detail in the selected item, so that the details of only one entry are visible at any one time. A great way to cut down on visual distration.
  4. The Selected Item is also very useful when used in conjunction with the scroll to action. Allowing you to put a button on your page to return the user to their current selection in the repeating group.
  5. Add a Last Refresh custom state to your repeating group. The type of this state is date.
  6. The Last Refresh state is a killer one for forcing refreshes of the repeating group. To do this add a constraint to your repeating group’s do a search for using this ephemeral data. I like to use modified date <= repeating group’s last refresh. Then to force the refresh simple set repeating group’s last refresh = current date time, for example with a “when refresh button clicked” event.

By placing these custom states on the repeating group, and not the page, you can accomplish two clean design patterns. First you can reuse common names without worrying about name collisions. That is Selected Item and Last Refresh have the same meaning across every repeating group without having to prepend any annoying additional qualifiers to the state name. Related, and second, this makes using these states dovetail nicely with Bubble’s behaviour with the native states of elements. Selected Item and Last Refresh are rightly properties of the repeating group.

I hope this helps.

Assigned exercise

Figure out how to use the in, not in, add item, and minus item operators get the Selected Items state to work as expected.

4 Likes