Chat Conversation Info
Show a scrollable list of everyone in a conversation β with inline group editing for admins, a real-time search bar, and swipe-to-remove or leave actions for each member.
Before You Begin
You need a Conversations collection and a Members (or equivalent join) collection that links users to conversations.
Your Conversations collection should have fields for Group Name and Group Image URL (text field, not image type).
Your Members collection should include the user's ID, name, avatar URL, and any subtitle fields you want to display.
Getting Started
Map the member template fields
Open the Member Template section and map your data fields:
Member Name β the user's name field
Subtitle β any secondary line (e.g., email, role, or username)
Avatar Image β the user's profile photo
Member ID β the user's ID β this is passed to remove/leave actions as an argument
Settings
Conversation Settings
These fields tell the component about the current conversation and who is logged in.
Logged In User ID β Set this to Logged In User > ID using Magic Text. The component uses this to determine whether the current user is the admin.
Admin / Owner User ID β Bind to the conversation's owner or admin ID field. When this matches the logged-in user's ID, admin controls appear.
Group Name β Bind to the conversation's name field. Shown as the group title when there are more than 2 members.
Group Image β Bind to the conversation's image URL field. Use a text field here, not an image field β Adalo can crash when an image-type field is null.
Header
Section Title β The label shown above the member list. Defaults to "Members."
Show Member Count β Toggle on to display the number of members next to the section title.
Show Dividers β Toggle on to show hairline separators between member rows.
Show Search Bar β Toggle on to add a real-time search field that filters members by name.
Search Placeholder β The placeholder text shown in the search bar when empty.
Member Style
Show Avatars β Show or hide the avatar image on each row.
Avatar Size β The diameter of each avatar in pixels (28β64, default: 44).
Show Subtitle β Show or hide the secondary line of text on each row.
Show Line 3 β Toggle on a third line of text per row if your data supports it.
Row Height β The height of each member row in pixels (48β96, default: 64).
Remove Button Label β The label on the remove button shown to admins. Defaults to "Remove."
Leave Button Label β The label on the leave button shown to non-admin members. Defaults to "Leave."
Colors
Customize the background, text, avatar fallback, dividers, remove/leave buttons, and search bar to match your app's style.
Actions
Set these up in the Actions section.
Row Click Actions β Fires when a member row is tapped. Use this to navigate to the user's profile.
On Remove Member β Fires when an admin taps Remove on a member row. Passes Removed Member ID and Removed Member Name as Magic Text β use these to delete the membership record in your database.
On Leave Group β Fires when a non-admin taps their own Leave button. Use this to delete the current user's membership record.
On Group Image Tap β Fires when the group image is tapped (read-only, non-admin). Passes the current Group Image URL as Magic Text.
On Save Group Name β Fires when an admin saves a new group name inline. Passes New Group Name as Magic Text β update your conversation's name field with this value.
On Save Group Image β Fires when an admin picks a new group image. Passes the selected Group Image β use this to update the conversation's image field.
Admin vs. Member View
The component automatically shows different UI based on whether the logged-in user is the admin.
Admin view (logged-in user ID matches Admin/Owner User ID):
A large group image and editable group name appear at the top (when there are more than 2 members)
Tapping the group image opens the device photo library to pick a new image
Tapping the pencil icon next to the group name opens an inline text editor with Save and Cancel
Each member row shows a Remove button
Member view (everyone else):
The group header is read-only
Each member row shows a Leave button
Tips
For 1-on-1 conversations (2 members), the group header is hidden automatically β only the member list shows.
The search bar filters locally in real time β no extra database calls needed.
Always use a text field (not image type) for Group Image β binding an image-type field that can be null will cause an error in Adalo.
Connect On Save Group Name to an Update action that writes the Magic Text argument to your conversation's name field.
Connect On Save Group Image to an Update action that writes the image argument to your conversation's image field.
Need Help?
Visit forum.adalo.com to ask questions or share what you've built.
Was this helpful?