Forum Academy Marketplace Showcase Pricing Features

Releasing a public version of a group messenger built on Bubble

after a little thought I think we also could do something else to always keep the div scrolled to bottom if its not scrolled up. This removes the necessity for most of the previous stuff except one would need to add the notification about new messages when scrolled up.

Here is some idea, but it seems to need to be updated with interval. How could we make the scroll pinned to bottom without running a interval counter.

http://jsfiddle.net/Lhc2qqvs/1/

Thanks for pointing that out @gurun - a bug indeed!

I would prefer to avoid using code as a solution - can anyone think of a creative native bubble way to solve this? I thought about setting up an action to execute every 1 second that will scroll to the bottom of the repeating group. However, that messes with the ability of the user to scroll up and see previous messages.

I`m not a fan of using the “every second”, trigger as it is not a best practice approach. The best would be to have bubble do an action triggered when new data arises from the firebase “websocket” connection.

@georgeciobanu Do you think it would be hard to fire actions on new data this way (on new_firebase data received)?

Also, I wrote a post on some logic for storing message.scrollposition on mousehover, but the logic turned out to be hard to do with workflows so I scrapped it. What about showing a notification when there is new messages, displayed between messagebox and messagelist "There is new messages [button] Scroll down to last message [/button].

Hi,

it seems that the app is broken in dev-mode (https://bubble.io/page?name=index&id=messaging_public&tab=tabs-1)

So, I am wondering how much regarding the workflow is still OK…

Yes looks like a bunch of stuff was deleted, just restored an older version!

1 Like

Is there some kind of “clone this app” option to make our own “local” copy?

I see this issue:

Someone may have found this out already but just incase anyone is wondering about having the repeating group scroll to the bottom whenever a new message is created (no matter the user), I did this using custom states here:

When the page is loaded, the repeating group scrolls to the last entry of the repeating group (the bottom):

Then I created a custom state on the repeating group called ‘Number’ (which is the ‘Count’ of the repeating group’s messages at the time of page load):

Then in a different workflow I created a ‘Do when condition is true’ (Every time):

And set the Repeating Group’s Number state back to the new count of Messages:

And then I think it should scroll to the bottom every time :slight_smile: To test you can open the preview in a chrome window and another in an incognito window, scroll to the top of the group on each, create a new message in one window, and the repeating groups in each window should scroll to the last entry at the same time.

Editor: https://bubble.io/page?type=page&name=scrolltoentry_messaging&id=forumapp3&tab=tabs-1

Preview: https://forumapp3.bubbleapps.io/version-test/scrolltoentry_messaging?debug_mode=true

14 Likes

I have making the web application for my client company which changing the way of the customers come and feel the car in the exhibitions. I name it “giá xe toyota” and it work really well on my artwork. Thank you bubble a lot for making this platform. I think that i will use my company account to subscribe your dedicate server.

1 Like

Yes! Good job and thanks for sharing!!

I’m having problems with this solution. If the repeating chat group takes too long to load, it doesn’t automatically scroll to the bottom. Have you run into this error?

1 Like

I understand the theory behind this solution and it appears to work, but I don’t understand the workflow when it is executed step-by-step (below). Could somebody help me out here :slight_smile:

  1. When page is loaded, this is the view (probably less than 10 repeating group cells loaded).

  2. By the end of the 1st workflow, this is the view. Note that the custom state has a value of 178 (which is the number of repeating group cells loaded on the page at that time).


It is the next workflow that I don’t understand.

  1. The next workflow is only executed if the actual number of repeating group cells in the database is greater than than the number of repeating group cells loaded on the page (temporarily stored as a number via a custom state). This is the highlighted text below.

According to the below evaluators, the actual number of repeating group cells in the database is 178. Whereas
s the number of repeating group cells loaded on the page is apparently empty (it should be 178 according to the custom state previously set in step 2 of my post).

image image

In the end, this workflow is executed because 178 is of course greater than an empty value, which results in the below view.

To summarize, the scrolling to the very bottom of the repeating group is nice, but I’m unsure that the workflow used to get to this result makes sense (since, in this case, 178 or whatever number of database entries is present, will always be greater than an empty custom state). Essentially, this is just a workflow that scrolls to the bottom twice. In fact, I have a workflow that just scrolls to the bottom of a repeating group twice in my project, and this works fine and is much more simple (without the need to set custom states). Could someone clarify or correct my interpretation? :slight_smile:

Hi @sherman :slight_smile: You’re right that action doesn’t necessarily need to happen on page load (it just does anyway since it’s a Do When Condition is True workflow and the custom state begins as empty each time the page is loaded). This custom state was created to have the repeating group scroll to the bottom automatically for all Users viewing the messages, every time a new message is sent by any User. It’s a little tricky to explain, but without the workflow and custom state, the repeating group would scroll only for the Current User sending a Message (if you have a scroll action for the Current User after the Current User sends a Message), but it would not automatically scroll for other Users viewing the messages at the same time on their own computers, causing them to have to manually scroll down in the repeating group each time a fellow User sends a message.

For example, let’s say you and I both have the page open on our computers. There are 5 messages loaded in our repeating groups (which sets the Repeating Group Number custom state value to 5, after the page is loaded).

On your computer, you type a message and send the message (this changes both of our repeating group :counts to 6) which means that the “Do when repeating group:count (6) > repeating group Number custom state value (5)” will run on both of our screens. Both of our repeating groups are scrolled to the bottom, because the Do When Condition is True workflow runs on both of our screens (and any other User also viewing the page). After the scroll action occurs in that Do When Condition is True workflow, the Repeating Group Number custom state is updated from 5 to 6 for both of us as well, and our repeating groups are automatically scrolled to the bottom.

Then if I send a message back to you, the repeating group count becomes 7, the custom state is 6, so the Do When Condition is True action runs, the scroll action occurs, and the custom state value is updated from 6 to 7 (etc.). This repeats every time a Message is sent. :slight_smile:

A-ha, very nice. I see what you mean. I forgot that the workflow was run on page load, which means the custom state would be empty for the condition. Good work :+1:

1 Like

hie im having problems with this, i my repeating group i have two text boxes, one for current user on the right and the other for the other person sending the message on the left. your logic is only scrolling down for the text box on the right and the messages for the one on the left always remains ontop

Hi @cardyy :slight_smile: Can you share a link to your app editor? You can do this by temporarily setting the app to public by going to Settings --> Application Rights --> Everyone can view/or edit. (Then copy+pasting the URL to the editor here)

hie its now fixed, i sorted everything by date descending “no”, and i changed primary field on my database to date aswell, worked perfect. thanks alot anyway

1 Like

Life saver!! Thanks a lot!! Have been looking for this all over!!

1 Like

Hi Guys, Just wondering if this is still functioning correctly, i notice it doesn’t work in preview, and in the workflow there appears to be a lot of functions missing as if its been deleted or edited.

I just followed his instructions, and it worked for me. I can confirm this thread still contains the solution