Conversation List

An Apple Messages-style inbox that lists all of a user's conversations. It automatically detects which participant is the "other person" based on who's logged in, and shows their name and avatar without any conditional logic on your end.

---

Before You Begin

• You need a Conversations collection with fields for User 1 ID, User 1 Name, User 1 Image URL, User 2 ID, User 2 Name, and User 2 Image URL.

• For group conversations, your collection should also have a Group Name and Group Image Property field.

• Each conversation row can show two lines of text below the participant name — map these to any fields you like (e.g., last message preview and timestamp).

---

Getting Started

1

Add the Conversation List

Add the Conversation List to your conversations screen.

2

Choose your Conversations collection

In the Conversations section, choose your Conversations collection. Filter it to show only conversations the logged-in user is part of (e.g., where User 1 ID = Logged In User > ID or User 2 ID = Logged In User > ID or Conversation > Users).

3

Set the Logged In User ID

Set Logged In User ID to Logged In User > ID using Magic Text — the component uses this to figure out who the "other person" is on each row.

4

Map your Conversation Fields

Open Conversation Fields and map your data:

• User1 ID, User1 Name, User1 Image URL → your User 1 fields

• User2 ID, User2 Name, User2 Image URL → your User 2 fields

• Text Line 1 → typically a last message preview

• Text Line 2 → typically a timestamp or other metadata

• Group Name / Group Image URL → for group conversations (when set, these override the user name logic)

• Read By User IDs → a comma-separated text field of user IDs who have read the conversation — if the logged-in user's ID is not in this string, an unread badge appears on the row

5

Set up Click Actions

Set up Click Actions on the conversation row to navigate to the conversation screen — pass the conversation ID so the next screen knows which conversation to load.

---

Settings

Name Style

Controls the font size, weight, and color of the participant's name on each row.

Line 1 Style / Line 2 Style

Independently control the font size and color of each text line below the name. Line 1 is typically used for a message preview; Line 2 for a timestamp or other detail.

Avatar Style

• Avatar Size — The diameter of the participant avatar (28–80, default: 48).

• Avatar Fallback Color — Background color shown when no avatar image is available.

• Avatar Initials Color — Color of the initials shown as a fallback.

Row Style

• Row Background Color — Background of each conversation row.

• Selected Row Color — Tint applied when a row is pressed (brief tap feedback).

• Divider Color / Show Divider — Hairline separators between rows.

• Row Height — Height of each conversation row (50–100, default: 72).

• Unread Badge Color — The dot color for unread conversations.

---

How Participant Detection Works

The component compares User 1 ID to Logged In User ID. If they match, it shows User 2's name and avatar. If they don't match, it shows User 1's name and avatar. For group conversations, if Group Name is set, it always shows that instead.

---

Tips

• Sort your Conversations collection by a Last Message At timestamp field (descending) so the most recent conversations appear at the top — just like a real inbox.

• Store a participant_key field on each conversation (a sorted, comma-separated string of participant IDs). Filter on this with the Conversation Action Button to prevent duplicate conversations.

• The Read By User IDs field is a simple text field — when you send a message, append the sender's ID to this string. When other users open the conversation, append their ID too. Clear it when a new message arrives.

• Use the Display Name and Display Image URL Magic Text outputs to pre-populate the Chat Header Bar on the conversation screen.

---

Need Help?

Visit forum.adalo.com to ask questions or share what you've built.