Detect when Repeating Group has more than 4 items, then enable scroll

[lantzgould]

Hey everyone!

Wondering if anyone has come across this, or if you can think of any workarounds. I’m trying to mimic this behavior.

When RG is loaded, and as items get added to the list; I want to be able to set the max amount of Rows to 4 or 5, and if the list is more than 4 or 5, enable external scrolling or scrolling visuals such as the one in the video.

Is this possible?

Thanks in advance!

[fayewatson]

Hi @lantzgould I’m not sure if there is a way to dynamically enable the scrolling with a repeating group, but you may be able to achieve a similar effect by having two repeating groups.

For example, the first repeating group could be set to “Full list” and have a conditional on it which only makes it visible when the Conversation has 4 or less messages.

The second repeating group could be set to “Vertical scrolling” and have a conditional which only makes it visible when the Conversation has 5 or more messages.

I haven’t tested that approach before, but I think that it would look similar to your example

[lantzgould]

Hey @fayewatson!

I should’ve thought of that sooner! Lol. I’ll give it a shot now. Still would be neat to have something native like this from Bubble.

Thank you

[fayewatson]

Absolutely no problem at all! Let me know if it doesn’t work as expected!

And I totally agree – being able to change the scroll style would save me a lot of time as well!

[lantzgould]

If you don’t mind me asking, I have another question for you:

Have you ever created a reply integration? Never come across this so this is new to me, but should know how to by now lol. I have the commenting down, but for some reason I’m clueless on how to create replies underneath an RG element?

Do you by chance know how or have you seen any tutorials?

[fayewatson]

Sure thing! There are a few different ways to set that up, but I would probably recommend having the Comments and reply Comments be the same data type (e.g., “Comment”). Then, you can add two fields to the Comment data type in order to store that Comment’s “Replies” (type: Comment, list: yes), or the reply Comment’s “Original Comment” (type: Comment, list: no):

Back on the page, the repeating group of Comments’ data source would first search for the Comments where the “Original Comment is empty” (i.e., display all Comments that are not ‘reply Comments’). And, the “Original Post is the Current Page Post” (or the ‘thing’ that the Users are commenting on)

The repeating group also needs a ‘nested’ repeating group within the first cell, which displays all of the ‘reply Comments’ and contains an input group which becomes visible when “reply” is clicked in a cell:

Additionally, the nested repeating group for reply Comments is hidden by default, and only becomes visible through the conditional:

The input and reply Comment’s post button are also contained within a group that is hidden by default; it only becomes visible when that cell’s “Reply” button is clicked:
(hidden by default and set to collapse in height when not visible)

(visible when reply is clicked)

For example, if a User wanted to reply “Yay!” to the “First comment! Woo!” original Comment, the workflow would first create a new Comment thing which stores “Yay!” as the new Comment’s text, and stores the Parent Group Comment as the value of the “Original Comment” field:

And the second action would add that new reply Comment to the Parent group’s Comment’s “Replies” field (i.e., the Original Comment):

In app data the original Comment and the newly created reply Comment would look like this:

Note: In the above screenshot, I have the original Comment and reply Comments’ primary fields set to “unique” id, but changing that to the Comment’s “Text” field allows you to see how the Comments are stored:

I added another group and input to allow for standard Comments in reply to the Current Page Post, so the overall setup will look something like this
Preview:

Editor:

Preview link:

Bubble - Visual Programming

Editor link:

Bubble Editor - faye-demo-app

I know there’s sort of a lot of little things to keep track of and setup in regards to conditionals and placing the repeating group inside of the repeating group – feel free to let me know if you have any questions!

[lantzgould]

@fayewatson You my friend are awesome!!! I really appreciate you taking the time to write this. I did run into a small issue. Everything is working perfectly, except that my page is retrieving an ‘event’ from another page. So, I’m displaying ‘Current Page’s Event’ on a page called ‘event-details’. Each event has it’s own comment section for users to say hello . However, when creating a new comment, it adds it to all the events. Anyway you could take a look?

I’ll send you a PM if you have some time?