I’m hoping to style my cards, simply by aligning self from the right if it’s message sender is by me; and aligning self from the left if message sender is not me. (Imagine whatsapp, facebook messenger style.)
There’s no formula option under align self? I wonder if there’s any hack here that can accomplish this. Thanks.
Hi! I’ve attempted to do this same thing actually and I’ve requested for formula support to be added to align self, but unfortunately it looks like we aren’t getting that any time soon. Instead, the solution I went for with a chat bubble composite component (I’ll try to get it published soon!) is that I used the conditional renderer to show either the message for the receiver or the sender. You can either use the conditional renderer or hide manually from visibility based on who sent the message.
Hello, I am trying to do the same thing. We have a chat app and we need to format the messages (left and right based on the sender). Just by reading your post I realised that you found a working solution. Would you be so kind and may you please suggest how to solve this issue? Thank you very much. Jerry
Hi!
I believe the way I solved this at the time was using conditional renderer. Another option is a container with two containers containing the message styled from the different senders, and showing the one that is relevant (based on the sender of that message).
Hi,
Thank you for your reply, we managed to solve it exactly the same way you suggested.
Hello, i’m struggling with this, could you share more details on how to achive it?
Hi!
Please check out our short video on the conditional renderer to get an idea of how it works. Basically you will make two different bubbles that look almost identical but one for the sender and one for the receiver, and show the one you need based on which one the sender was.
@Mattia_Borroni asked for more details in PM so I’m continuing here for visibility that others may find this as well – I’ll cover this briefly, because we have plans to publish components for building a chat once we get all the required features for them.
The basic idea is to have a conditional renderer that is repeated with Messages, and in each repeated instance of Messages, it will choose which chat bubble to show based on which user has sent the message. This “which user was the message sent by” is determined by the formula in “Active Render ID”, which checks if the authorId of the message matches the id of the current user, if yes, show “current_user”, if no, show “other_user”.
Hi @Mevi ,
I have tried the option with the conditional renderer and it looks like the renderer does not check each repeat if the senderid is changing on my webapp. It always shows all messeges on the side of the first entry.
I attached some screenshots:
Sorry, resolved it! I chose the senderid from a static database information. Instead I was supposed to use the “currently repeated data items” variables in order to recheck the information with every new repeat.
