Group Details - CometChat Docs

Provide a detailed view for CometChat groups in your iOS app, enabling users to see group info, join/leave, manage members, and respond to real-time group events.

Overview

GroupDetailsViewController displays comprehensive group information and actions:

Group Info — Name, icon, description, and member count
Actions — Join, leave, or delete group
Member Management — View members, add members, view banned members
Real-Time Updates — Reflects joins, leaves, bans, and ownership changes

Prerequisites

Before implementing group details, ensure you have:

Completed Getting Started setup
CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager
Valid CometChat App ID, Region, and Auth Key
User logged in with CometChatUIKit.login()
Navigation controller (UINavigationController) configured

Components

Component	Description
`CometChatGroup`	Renders group avatar, name, and metadata
`GroupActionView`	Custom view for action buttons (view/add/banned members)
`CometChatMessagesViewController`	Opens group chat interface when “Chat” is tapped
`CometChat.joinGroup()`	Joins public or password-protected groups
`CometChat.leaveGroup()`	Leaves the current group
`CometChat.deleteGroup()`	Deletes and exits the group (owners only)
`CometChatGroupMembers`	Lists current group members
`CometChatGroupDelegate`	Receives real-time group events

Integration Steps

Step 1: Present the Group Details Screen

Push GroupDetailsViewController for a selected group:

import UIKit
import CometChatSDK

class GroupListViewController: UIViewController {
    
    func showGroupDetails(for group: Group) {
        // Initialize the group details view controller
        let detailsVC = GroupDetailsViewController()
        detailsVC.group = group
        
        // Push onto navigation stack
        navigationController?.pushViewController(detailsVC, animated: true)
    }
}

This initializes and presents the details UI with the correct group context. File reference: HomeScreenViewController.swift

Step 2: Set Up the UI

Configure scroll view, header, and action views:

import UIKit
import CometChatUIKitSwift
import CometChatSDK

class GroupDetailsViewController: UIViewController {
    
    var group: Group?
    
    override public func viewDidLoad() {
        super.viewDidLoad()
        
        // Connect to group event listeners
        connect()
        
        // Apply theme
        view.backgroundColor = CometChatTheme.backgroundColor01
        
        // Set up UI components
        setupScrollView()
        setupLayout()
        addButtonActions()
    }
    
    private func setupScrollView() {
        // Configure scroll view for content
    }
    
    private func setupLayout() {
        // Arrange header, info, and action views
    }
}

This lays out the UI components and registers for group events. File reference: GroupDetailsViewController.swift

Step 3: Enable Group Action Buttons

Wire up view/add/banned members actions:

// Action views for member management
private let viewMembersView = GroupActionView()
private let addMembersView = GroupActionView()
private let bannedMembersView = GroupActionView()

public func addButtonActions() {
    // View current group members
    viewMembersView.onActionButtonTapped = { [weak self] in
        self?.viewMembers()
    }
    
    // Add new members to the group
    addMembersView.onActionButtonTapped = { [weak self] in
        self?.addMembers()
    }
    
    // View banned members
    bannedMembersView.onActionButtonTapped = { [weak self] in
        self?.banMembers()
    }
}

private func viewMembers() {
    guard let group = group else { return }
    let membersVC = CometChatGroupMembers()
    membersVC.set(group: group)
    navigationController?.pushViewController(membersVC, animated: true)
}

private func addMembers() {
    // Present add members interface
}

private func banMembers() {
    // Present banned members list
}

This enables user interaction for member management. File reference: GroupDetailsViewController.swift

Step 4: Handle Leave and Delete Actions

Provide ownership-aware leave/delete flows:

@objc func showLeaveGroupAlert() {
    guard let group = group else { return }
    
    let alert = UIAlertController(
        title: "Leave Group",
        message: "Are you sure you want to leave this group?",
        preferredStyle: .alert
    )
    
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
    alert.addAction(UIAlertAction(title: "Leave", style: .destructive) { [weak self] _ in
        self?.leaveGroup()
    })
    
    present(alert, animated: true)
}

@objc func showDeleteGroupAlert() {
    guard let group = group else { return }
    
    let alert = UIAlertController(
        title: "Delete Group",
        message: "Are you sure you want to delete this group? This action cannot be undone.",
        preferredStyle: .alert
    )
    
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
    alert.addAction(UIAlertAction(title: "Delete", style: .destructive) { [weak self] _ in
        self?.deleteGroup()
    })
    
    present(alert, animated: true)
}

private func leaveGroup() {
    guard let guid = group?.guid else { return }
    
    CometChat.leaveGroup(GUID: guid) { [weak self] _ in
        DispatchQueue.main.async {
            self?.navigationController?.popToRootViewController(animated: true)
        }
    } onError: { error in
        print("Leave group error: \(error?.errorDescription ?? "")")
    }
}

private func deleteGroup() {
    guard let guid = group?.guid else { return }
    
    CometChat.deleteGroup(GUID: guid) { [weak self] _ in
        DispatchQueue.main.async {
            self?.navigationController?.popToRootViewController(animated: true)
        }
    } onError: { error in
        print("Delete group error: \(error?.errorDescription ?? "")")
    }
}

This manages group exit, with transfer prompt for owners. File reference: GroupDetailsViewController.swift

Step 5: Listen for Group Events

Update UI on member joins, leaves, bans, and ownership changes:

private let listenerId = "group-details-listener"

func connect() {
    // Add SDK group listener
    CometChat.addGroupListener(listenerId, self)
    
    // Add UIKit group events listener
    CometChatGroupEvents.addListener(listenerId, self)
}

func disconnect() {
    CometChat.removeGroupListener(listenerId)
    CometChatGroupEvents.removeListener(listenerId)
}

deinit {
    disconnect()
}

// MARK: - CometChatGroupDelegate
extension GroupDetailsViewController: CometChatGroupDelegate {
    
    func onGroupMemberJoined(action: ActionMessage, joinedUser: User, joinedGroup: Group) {
        updateGroupInfo(joinedGroup)
    }
    
    func onGroupMemberLeft(action: ActionMessage, leftUser: User, leftGroup: Group) {
        // Hide UI if current user left
        if leftUser.uid == CometChat.getLoggedInUser()?.uid {
            navigationController?.popViewController(animated: true)
        } else {
            updateGroupInfo(leftGroup)
        }
    }
    
    func onGroupMemberKicked(action: ActionMessage, kickedUser: User, kickedBy: User, kickedFrom: Group) {
        updateGroupInfo(kickedFrom)
    }
    
    func onGroupMemberBanned(action: ActionMessage, bannedUser: User, bannedBy: User, bannedFrom: Group) {
        updateGroupInfo(bannedFrom)
    }
    
    func onGroupMemberUnbanned(action: ActionMessage, unbannedUser: User, unbannedBy: User, unbannedFrom: Group) {
        updateGroupInfo(unbannedFrom)
    }
    
    func onGroupMemberScopeChanged(action: ActionMessage, scopeChangeduser: User, scopeChangedBy: User, scopeChangedTo: String, scopeChangedFrom: String, group: Group) {
        updateGroupInfo(group)
    }
    
    func onMemberAddedToGroup(action: ActionMessage, addedBy: User, addedUser: User, addedTo: Group) {
        updateGroupInfo(addedTo)
    }
}

// MARK: - CometChatGroupEventListener
extension GroupDetailsViewController: CometChatGroupEventListener {
    
    func ccOwnershipChanged(group: Group, newOwner: GroupMember) {
        updateGroupInfo(group)
    }
}

private func updateGroupInfo(_ group: Group) {
    self.group = group
    // Refresh UI with updated group data
}

This keeps the group details in sync with back-end events. File reference: GroupDetailsViewController.swift

Customization Options

Header Styling

Use CometChatTheme to customize fonts, colors, and borders:

// Apply custom theme
CometChatTheme.palette.primary = UIColor.systemBlue
CometChatTheme.typography.heading = UIFont.systemFont(ofSize: 20, weight: .bold)

Button Labels

Localize or rebrand action texts:

viewMembersView.setTitle("View Members", for: .normal)
addMembersView.setTitle("Add Members", for: .normal)
bannedMembersView.setTitle("Banned Members", for: .normal)

Avatar Placeholder

Provide fallback initials or default images:

avatarView.set(name: group.name)
avatarView.set(image: UIImage(named: "default_group_avatar"))

Edge Cases

Scenario	Handling
Private/Protected groups	Prompt for a password before joining
Already a member	Hide or disable Join button
Empty group	Show an empty state when no members
Owner restrictions	Disable Delete for non-owners

Error Handling

Error Type	Solution
Join failures	Show alert on network or permission errors
Leave/Delete errors	Display retry prompt on API failure
Event errors	Log and notify user if group events fail

Feature Matrix

Feature	Component / Method	File(s)
Show group details	`GroupDetailsViewController`	`GroupDetailsViewController.swift`
View group members	`viewMembersView` action	`GroupDetailsViewController.swift`
Add members	`addMembersView` action	`GroupDetailsViewController.swift`
Ban members	`bannedMembersView` action	`GroupDetailsViewController.swift`
Join group	`CometChat.joinGroup()`	`GroupDetailsViewController.swift`
Leave group	`showLeaveGroupAlert()`	`GroupDetailsViewController.swift`
Delete group	`showDeleteGroupAlert()`	`GroupDetailsViewController.swift`
Real-time updates	`CometChatGroupDelegate`	`GroupDetailsViewController.swift`

Groups - Display group list
Group Members - Display group member list
Events - Listen for chat events

Sample App

Explore the complete Group Details flow

UIKit Source

Browse the Group Details implementation

Groups

Display and manage group list

Group Members

View and manage group membership

Events

Handle group and membership events

​Overview

​Prerequisites

​Components

​Integration Steps

​Step 1: Present the Group Details Screen

​Step 2: Set Up the UI

​Step 3: Enable Group Action Buttons

​Step 4: Handle Leave and Delete Actions

​Step 5: Listen for Group Events

​Customization Options

​Header Styling

​Button Labels

​Avatar Placeholder

​Edge Cases

​Error Handling

​Feature Matrix

​Related Components