Overview
CometChatGroupMembers
is a versatile Component designed to showcase all users who are either added to or invited to a group, thereby enabling them to participate in group discussions, access shared content, and engage in collaborative activities. Group members have the capability to communicate in real-time through messaging, voice and video calls, and various other interactions. Additionally, they can interact with each other, share files, and join calls based on the permissions established by the group administrator or owner.

CometChatGroupMembers
component is composed of the following BaseComponents:
Components | Description |
---|---|
CometChatListBase | CometChatListBase serves as a container component equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list view. |
CometChatListItem | This component renders information extracted from a User object onto a tile, featuring a title, subtitle, leading view, and trailing view. experience, facilitating seamless navigation and interaction within the component. |
Usage
Integration
CometChatGroupMembers
, as a custom view controller, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action. Additionally, it seamlessly integrates into tab view controllers. With group members, users gain access to a wide range of parameters and methods for effortless customization of its user interface.
The following code snippet exemplifies how you can seamlessly integrate the GroupMembers component into your application.
If you are already using a navigation controller, you can use the pushViewController function instead of presenting the view controller.
Actions
Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.-
set(onItemClick:)
set(OnItemClick:)
is triggered when you click on a ListItem of the groups component. This set(OnItemClick:)
method proves beneficial when a user intends to customize the on-click behavior in CometChatGroupMembers.
-
set(OnItemLongClick:)
set(OnItemLongClick:)
is triggered when you long press on a ListItem of the group members component. This set(OnItemLongClick:)
method proves beneficial when a user intends to additional functionality on long press on list item in CometChatGroupMembers.
3. set(onBack:)
Thisset(onBack:)
method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatGroupMembers.
4. set(onSelection:)
Theset(onSelection:)
only gets trigger when selection mode is set to multiple of single. And this gets trigger on every selection, and returns the list of selected group members.
5. set(onError:)
This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatGroupMembers.6. set(onEmpty:)
Thisset(onEmpty:)
method is triggered when the groups list is empty in CometChatGroupMembers.
7. setOnLoad
This set(onLoad:) gets triggered when a group members list is fully fetched and going to displayed on the screen, this return the list of group members to get displayed on the screen.Filters
Filters allow you to customize the data displayed in a list within aComponent
. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders
of Chat SDK.
1. GroupsRequestBuilder
The GroupsRequestBuilder enables you to filter and customize the group list based on available parameters in GroupsRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in GroupsRequestBuilderMethods | Type | Description |
---|---|---|
setLimit | Int | Configure the maximum number of groups to fetch in a single request, optimizing pagination for smoother navigation. |
setSearchKeyword | String | Employed to retrieve groups that match the provided string, facilitating precise searches. |
scopes | [String] | used for fetching group members based on multiple scopes |
2. SearchRequestBuilder
The SearchRequestBuilder uses GroupsRequestBuilder enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List. ExampleEvents
Events are emitted by aComponent
. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
Events emitted by the Join Group component is as follows.
Event | Description |
---|---|
onGroupMemberBan | Triggers when the group member banned from the group successfully |
onGroupMemberKick | Triggers when the group member kicked from the group successfully |
onGroupMemberChangeScope | Triggers when the group member scope is changed in the group |
Emitting Group Events
View Controller
Customization
To fit your app’s design requirements, you can customize the appearance of the Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.Style
Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.1. GroupMembers Style
You can set theGroupMembersStyle
to the Group Memebers
Component to customize the styling.
Global level styling

Property | Description | Code |
---|---|---|
retryButtonTextColor | Sets the text color for the retry button. | .retryButtonTextColor: UIColor |
retryButtonTextFont | Sets the text font for the retry button. | .retryButtonTextFont: UIFont |
retryButtonBackgroundColor | Sets the background color for the retry button. | .retryButtonBackgroundColor: UIColor |
retryButtonBorderColor | Sets the border color for the retry button. | .retryButtonBorderColor: UIColor |
retryButtonBorderWidth | Sets the border width for the retry button. | .retryButtonBorderWidth: CGFloat |
retryButtonCornerRadius | Sets the corner radius for the retry button. | .retryButtonCornerRadius: CometChatCornerStyle |
listItemSelectedBackground | Sets the background color for selected list items. | .listItemSelectedBackground: UIColor |
listItemDeSelectedImageTint | Sets the tint color for deselected list item images. | .listItemDeSelectedImageTint: UIColor |
listItemSelectionImageTint | Sets the tint color for selected list item images. | .listItemSelectionImageTint: UIColor |
listItemSelectedImage | Sets the image for selected list items. | .listItemSelectedImage: UIImage |
listItemDeSelectedImage | Sets the image for deselected list items. | .listItemDeSelectedImage: UIImage |
backgroundColor | Sets the background color. | .backgroundColor: UIColor |
borderWidth | Sets the border width. | .borderWidth: CGFloat |
borderColor | Sets the border color. | .borderColor: UIColor |
cornerRadius | Sets the corner radius style. | .cornerRadius: CometChatCornerStyle |
titleFont | Sets the font for the title. | .titleFont: UIFont? |
largeTitleFont | Sets the font for the large title. | .largeTitleFont: UIFont? |
titleColor | Sets the color for the title text. | .titleColor: UIColor? |
largeTitleColor | Sets the color for the large title text. | .largeTitleColor: UIColor? |
navigationBarTintColor | Sets the tint color for the navigation bar. | .navigationBarTintColor: UIColor? |
navigationBarItemsTintColor | Sets the tint color for navigation bar items. | .navigationBarItemsTintColor: UIColor? |
errorTitleTextFont | Sets the font for the error title text. | .errorTitleTextFont: UIFont |
errorTitleTextColor | Sets the color for the error title text. | .errorTitleTextColor: UIColor |
errorSubTitleFont | Sets the font for the error subtitle text. | .errorSubTitleFont: UIFont |
errorSubTitleTextColor | Sets the color for the error subtitle text. | .errorSubTitleTextColor: UIColor |
emptyTitleTextFont | Sets the font for the empty state title text. | .emptyTitleTextFont: UIFont |
emptyTitleTextColor | Sets the color for the empty state title text. | .emptyTitleTextColor: UIColor |
emptySubTitleFont | Sets the font for the empty state subtitle text. | .emptySubTitleFont: UIFont |
emptySubTitleTextColor | Sets the color for the empty state subtitle text. | .emptySubTitleTextColor: UIColor |
tableViewSeparator | Sets the color for the table view separator. | .tableViewSeparator: UIColor |
listItemTitleTextColor | Sets the text color for list item titles. | .listItemTitleTextColor: UIColor |
listItemTitleFont | Sets the font for list item titles. | .listItemTitleFont: UIFont |
listItemSubTitleTextColor | Sets the text color for list item subtitles. | .listItemSubTitleTextColor: UIColor |
listItemSubTitleFont | Sets the font for list item subtitles. | .listItemSubTitleFont: UIFont |
listItemBackground | Sets the background color for list items. | .listItemBackground: UIColor |
listItemBorderWidth | Sets the border width for list items. | .listItemBorderWidth: CGFloat |
listItemBorderColor | Sets the border color for list items. | .listItemBorderColor: UIColor |
listItemCornerRadius | Sets the corner radius for list items. | .listItemCornerRadius: CometChatCornerStyle |
messageTypeImageTint | Sets the tint color for message type icons. | .messageTypeImageTint: UIColor |
passwordGroupImageTintColor | Sets the tint color for password group icons. | .passwordGroupImageTintColor: UIColor |
passwordGroupImageBackgroundColor | Sets the background color for password group icons. | .passwordGroupImageBackgroundColor: UIColor |
privateGroupImageTintColor | Sets the tint color for private group icons. | .privateGroupImageTintColor: UIColor |
privateGroupImageBackgroundColor | Sets the background color for private group icons. | .privateGroupImageBackgroundColor: UIColor |
Functionality
These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.Method | Description | Code |
---|---|---|
set(groupMembersRequestBuilder:) | Sets the request builder for fetching group members. | set(groupMembersRequestBuilder: GroupMembersRequest.GroupMembersRequestBuilder) |
set(searchRequestBuilder:) | Sets the request builder for searching group members. | set(searchRequestBuilder: searchRequestBuilder) |
set(searchKeyword:) | Sets the search keyword to filter group members. | set(searchKeyword: "group_name") |
hideError | Hides the error state view. | hideError = true |
hideUserStatus | Hides the online/offline status of users. | hideUserStatus = true |
hideNavigationBar | Hides or shows the navigation bar. | hideNavigationBar = true |
hideLoadingState | Hides the loading state indicator. | hideLoadingState = true |
hideBackIcon | Hides the back button/icon. | hideBackIcon = true |
hideKickMemberOption | Hides the option to kick a member from the group. | hideKickMemberOption = true |
hideBanMemberOption | Hides the option to ban a member from the group. | hideBanMemberOption = true |
hideScopeChangeOption | Hides the option to change a member’s scope (role). | hideScopeChangeOption = true |
hideSearch | Hides the search bar. | hideSearch = true |
Advanced
For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your own views, layouts, and UI elements and then incorporate those into the component. TheJoin Group
component does not provide additional functionalities beyond this level of customization.
SetListItemView
Utilize this property to assign a custom ListItem to the GroupMembers Component, allowing for enhanced customization and flexibility in its rendering.
CustomListItemGroupView
and pass it inside the setListItemView()
method.
CustomListItemGroupView
SetLeadingView
You can modify the leading view of a group member cell using .set(leadingView:).
CustomLeadingView
as a custom UIView
. Which we will inflate in setLeadingView()
SetTitleView
You can customize the title view of a group member cell using .set(titleView:).
CustomTitleView
as a custom UIView
. Which we will inflate in setTitleView()
SetTrailView
You can set a custom Tailview using.setTailView()
to match the TailView
view of your app.

Custom_Tail_GroupView
and pass it inside the .setTailView()
method.
Custom_Tail_GroupView
SubtitleView
You can set your custom Subtitle view using the.setSubtitleView()
method. But keep in mind, by using this you will override the default Subtitle view functionality.
- You can customize the subtitle view for each GroupMembers item to meet your requirements

Custom_Subtitle_GroupMember_View
a UIView file.
Custom_Subtitle_GroupMember_View
Options
Enhance your GroupsMembers component by setting Custom Options to incorporate additional functionalities when swiping- You can customize the options for group members to meet your requirements

CometChatGroupMembers
by introducing a tailored feature. By adding a custom option, such as “Delete” with a corresponding trash icon, users can now enjoy a more interactive and user-friendly experience.
Menus
You can set the Custom Menus to add more options to the Group members component.- You can customize the menus for groups to meet your requirements

CometChatGroupMembers
, enhancing its interface with a personalized menu
for a more user-friendly experience.
SetLoadingView
You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.SetErrorView
You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.SetEmptyView
You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no group members are available.Ensure to pass and present
CometChatGroupMembers
. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.