Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

How to build a chat app with Bubble.io Part 2

In this Bubble tutorial we explain how to build a chat app with Bubble between your Bubble app users. This second video in a 3 part series focusses on additional UI elements required to build your own chat app and how to set up your repeating groups to show both conversations and messages.

Watch part 1 of this series: https://www.planetnocode.com/tutorial/design/how-to-build-a-chat-app-with-bubble-io-part-1/

Watch part 3 of this series: https://www.planetnocode.com/tutorial/design/how-to-build-a-chat-app-with-bubble-io-part-3/

This video is part 2 (part 1 is here) of a mini series showing how to build a chat app in Bubble. In the previous video, I looked at setting up this page with my two columns of conversations and messages. I looked at the data and the fields that are required to get this working and I also looked at Privacy settings; in order to ensure that messages can only be read by people participating in the conversation.

This video is going to focus on the workflow and the form fields required in order to get your chat app working.

Adding form fields

So first of all, let's have a look at messages here. I am going to create a part of this for creating a message. So I need a multiline input and then a send button.

I'm not focusing too much on making it look good here. So this needs to be min height, so in fact max height should be 100% of the screen, get rid of fit height to content. Okay, then let's just tidy up these columns here. So inside of the repeating group, I want it to have a row. And also I don't want it to be restricted to number of rows. Fine. And then height, I want to be not fit to content but 100%, in fact fixed height of 100%. Then the same with my container here, conversations.

Okay. Because now it fills up the height of my screen. Good. And then the height here, also I don't want that to be fit to content, nor do I want it to be limited to number of rows. Here we go. And then height. I'm just going to say 90%. I think that I've got a constraint here. Fixed height. There we go. In fact 90 was a little bit too high I see my button. Brilliant.

Displaying conversation data

Let's add in some text input fields into this repeating group. These are my conversations. I want the text to show me not my name, but the other person's name. So I can go current cell participants, minus item, Current User. And then there's only going to be because at the moment I'm focusing on just two participants per conversation. I know that the first item will be the only item and I can go first name. Let's just tie this up a little bit. It's not taking up too much space.

Okay, so now this will show me the first name of the other person in the conversation. And while we're at that, I'm just going to group this in a row because I want to be able to click on a conversation for it to display on my message column. Just to remind that my message column is of type conversation, but I've not given it a data source. So in order to give it a data source, I need to find a workflow so I can say when I click on the group containing everything in my cell element display data and then it is current cell's conversation.

UX trick

What I can even do to make my app work a little bit better is so that when the page loads there is something already there. I can go data Source repeating group conversations, list of conversations, first item. So it will automatically when the page loads, pull in the messages attached to this conversation at the top of my conversation Repeating group and it would display that.

But if I was to click on another one, it would display those instead. Remember that my search for messages are messages that have the field conversation that I assign to the messages group here as the data source.

So in Messages, what should I add in? Change this to a row. I'm just going to add in a little bit of column gap here. There we go. So this is going to contain... I need two labels in here. Again, we're just doing it really simply. Current message creator name. In fact, I put that in bold using BBcode, layout and then onto a new line, I shall put the current cell's message. This will be my text field that's shown down.

Workflows

Let's wire up the workflow for the send button. So send will be data create a new thing Message. So the content is my multiline input field. My participants are set list because I know the list I want to give it current group's conversations, participants. Okay, and then the conversation is current group's conversation. So by filling in those last two sets of fields, I ensure that I'm working with my privacy rules that I've set up here, that messages can only be read when this message participants contains current user. And the same goes for Conversations. So privacy is in place, right?

Let's see what we've got.

Okay, let's just recap what we have because I think the final step, I'm going to put that in a follow up video. I have got the data structure in place for Conversations and Messages. I've got the Privacy setup in place for conversation messages and I've just beginning, in fact, let's finish off the workflow. So create a message and then reset inputs.

There we go. So that would allow me to enter a new message straight after check out the next video. I'm going to be recording it right now. Basically demoing this using the preview of my development app and multiple users.

Latest videos

lockmenu