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

Setting Up the Chat App Page

This video is part two 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 in order to get your chat app working.

Creating the Message Input Area

So first of all let's have a look at messages here. I'm going to create a part of this for creating a message. So I need a multi-line input and then a send button. I'm not focusing too much on making it look good. Okay then here so this needs to be min height so in fact max height should be 100% of the screen. Get rid of fit height content.

Adjusting Column Layout

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 a number of rows. Fine and then height I want to be not fit to content but 100% of that fixed height of 100% and then the same with my container here conversations. Okay it's because now it fills up the height of my screen. Good good good and then the height here also don't want that to be fit to content nor do I want it to be limited to number of rows. There we go and then height this I'm just going to say 90%. I think that I've got a constraint here it's fixed height. 100% there we go. That 90 was a little bit too high. 80 so I can see my button. Brilliant okay so let's add in some text fields.

Adding Text Fields to Repeating Group

So 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 one two participants per conversation I know that the first item will be the only item and I can go first name. Let's just time this up a little bit. It's not taking up too much space.

Setting Up Conversation Display

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 a reminder my message column is of type conversation but I'm not giving it a data source. So in order to give it a data source I need to from a workflow so I can say when I click on the group containing everything in my cell element display data and then it is messages current cells conversation.

Implementing Auto-Loading of Messages

Okay and 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 will display that. 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.

Formatting Message Display

So in messages what shall I add in change this to a row I'm just going to add in a little bit of column gap here. 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 BB code layout percent and then onto a new line I shall put the current cells message content okay this will be my text field and that's shown down there.

Creating the Send Message Workflow

Okay let's wire up the workflow for the send button so send will be data create a new thing message when so the content is my multi-line field my participants are set list so I know the list I want to give it current groups conversations participants okay and then the conversation is current groups 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.

Recap and Next Steps

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 I'm set up 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 and check out the next video I'm gonna be recording it right now basically demoing this using the preview of my development app and multiple users.