Any thoughts about how to make color-coded text messages based on sender?
I’m storing usernames and message strings in Firebase and want the output to look something like this:
In the Snap to Place (StP) interface, I could clone blocks with different properties or use a Data Viewer List (DVL) and change the properties of individual elements but in the Drag & Drop (DnD) interface, I don’t have either of those options.
Is there another way?
But you do have that option
But @tatiang you do have those options, it’s just not always apparent! 
Check out this project! Specifically go to the screen ‘scr View notes’ and check out the blocks. I use the DVL without ever entering data into the table. I also manipulate the DVL components manually and apply values to them directly from a firebase call!
So, you’d make 1 chat row that has both left and right chat box with the correct color and based on who the logged in user is and the id associated with the message, color the boxes accordingly!
All of this nonsense aside, I can’t wait until we get cloning blocks back into drag and drop
I was confusing List Viewers and Data Viewer Lists. I’ll swap it out for a DVL. Thanks!
Edit: This is an impressive demo! Many thanks!
@jared I’m happy with the results so far:
I still need to adjust the custom DVL layout sizing since it’s cutting off the messages but I was focused on the player name colors and that’s working great.
I’m using a row with two labels inside. The row is set to “fit contents” for the height and each label is as well. But they don’t expand to fit longer messages. Any ideas why?
This topic seems like it might steer me in the right direction although it’s using the Snap to Place interface:
The image @domhnallohanlon posted in that topic is basically what I’m trying to make work with a custom DVL layout:
I tried setting the Positioning properties the same as in that demo but it still doesn’t expand or wrap the text in my DVL rows:
Why do you need the Advanced Properties. Isn’t just Fit contents for the row which will make it respond to the size of the Label inside it.
I’ve tried Fit contents for the row and for the labels inside. It doesn’t expand.
This is my attempt in StP
This is in DnD
Looks great! Is it using a DVL? If so, would you mind sharing the project that has the layout?
Project in StP with layout
https://x.thunkable.com/projectPage/61df08d9e3e9530010050267
This is DnD using the layout
https://x.thunkable.com/projectPage/61df0e18e3e9530010050325
You need to save the layout in your account and use Row1 to save it.
For testing purposes, I created a local table and populated it with sample data.
I don’t see the layout in that project. Just the DVL itself and a title label.
Truly sorry. I copied the DnD project by mistake. I corrected the post. You should see both StP and DnD.
looks like a great start! How cool that when the label doesn’t have text, nothing shows!
Thanks, @muneer! It’s working. I’m still not sure why mine didn’t but at least I have something to work with now. Any particular reason you used two rows instead of one?
From experience, if you use only one row then you will need to use the magical wait block when manipulating the rows at run time just like what we do for cloning. When you use two rows inside each other it works without the wait block.
I think I’ve settled on this layout:
I agree.
It looks professional and cool at the same time. 
But how will you code the chat app because i am now also stuck in designing
The chat screen
I save each chat message in a Firebase object that has the player name and message. Then I loop through that list every split second and populate a Data Viewer List with a custom layout where I change each row’s background color according to which player name it contains.
If you’re new to Thunkable, you can search for chat video tutorials and demo projects.
ok thank you
