Dividing repeating group results

I’m trying to make a listing of users, separated by letter of the alphabet, with a big letter and an anchor tag… typical online directory stuff… Not seeing a quick way to do this…

This was fun to figure out…

Have a group for every letter. Inside each group, have a repeating group. Set the source: Search for Users. Add a constraint for the name to be greater than the previous letter and less than the next letter. For greater than previous letter, you’ll need to do PreviousLetterZ…

For A Group
Name < B

For B Group
Name > AZ
Name < C

… and so on…

For Z Group
Name > Y

I put them in groups so that you can collapse if there are no names with that group’s letter. See screenshots and let me know if you have any questions.

Group Source

Cell Expression

Hide & Collapse if Empty

Result with D containing 0 users


Gaby | Coaching Bubble

4 Likes

Took a bit of fooling around, but I was able to get it with what you posted Gaby, thanks!

1 Like

Wow - this is great!

Thanks for posting.

Best,
P

1 Like

Very nice solution, @romanmg !

I didn’t know that i can check letters against others with “>” and “<”…

Your solution helped me to build an even more elegant solution, in case you want to have the single groups stacked within a Repeating Group:

  1. I have 2 nested RG, the parent for the letters A-Z, the child for the names.
  2. I have an “ListOfNumbers” element i took from the new -and very useful- toolbox plugin (Toolbox plugin - collection of utility elements), which i’m using to build the parent RG with 26 generic entries for the letters.
  3. Then i have a custom state attached to the root page with type text and the value “zyxwvutsrqponmlkjihgfedcba”, assigned by a “page is loaded” workflow. Note the reverse order of the alphabet, this is necessary for testing the first letter of the names against it. I’ using a regex expression, and javascript seems to allow the extraction of a certain letter only from right to left.
  4. In the child RG i test all names against the alphabet letters one by one with the help of the regex expression like so:

  1. Empty letters can be hidden with a condition on a -collapsible- group with the child RG stacked into it:

It works quite well, you can check it here:

And here comes the corresponding bubble dev page:

Hope somebody find it useful.

Cheers Jeremias

Nice! The result looks great. I have used Bubble’s truncate text command to achieve something similar. So you would simply match each letter of the alphabet (your main repeating group entries) to a truncation of the user’s name, i.e to the first letter of the name.

Thats how it basically works, yes! Though your version sounds much more simple somehow :slight_smile:

1 Like