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

1

Add the component

Add the Chat Group Info component to a screen β€” typically a "Conversation Info" or "Group Details" screen.

2

Choose the members collection

In the Members section, choose the collection that holds your conversation participants.

3

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.

  • 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.comarrow-up-right to ask questions or share what you've built.

Was this helpful?