Chat app style - Extension

Questions about Thunkable
1

SEARCH
How do i add chat bubble style in a list view like whatsapp , I created a chat app please help

2

There are no extensions in Thunkable but you can design a custom data viewer layout for this. Google custom data viewer layout Thunkable.

1 Like
3

Hi, I am guessing you are looking to make a design like this? -

image
image330×612 31.1 KB

I’ve done this similar thing for a recent app of mine, let me show you a rough idea of how I did it -

  • This can be done by designing a custom column layout for DVL. your column would contain two columns inside it, one designed as right-side (sender side) bubble, and other designed as left-side (receiving msg) bubble.
  • when creating the layout, make sure to advance-bind the visibility of both of these bubbles/columns to the layout, as that’s how we’ll be showing the bubble for the sender/receiver dynamically.
  • assuming you have a messages list, from which you know which message in the list was sent by whom, you can create a row in the table linked to the DVL, and set the column assigned to right-bubble & left-bubble to true and false to show & hide the bubbles.

Now for example, if you have 5 messages between person A & B (we’re in POV of person B), where 3 messages are sent by A to B & 2 from B to A, while going through the messages list, the code would create a row in the table, and for the A to B messages, right-side (sender) bubble column’s visibility would be false and left-side bubbles would be visible (as we’re in B’s POV, B has received these 3 messages from A, therefore left-bubble). Similarly for the B-A messages, for the message row right bubble’s vis. = true & left bubble’s vis. = false.

This is how you can dynamically show/hide left/right bubbles as per your list. Apologies for the long post, but I hope this helps… Cheers!