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 onOwnershipChange(group: Group?, member: GroupMember?) {
        if let group = group {
            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

​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