Overview
CometChatGroups
functions as a standalone component designed to create a screen displaying a list of groups, with the added functionality of enabling users to search for specific groups. Acting as a container component, CometChatGroups encapsulates and formats the CometChatListBase
without introducing any additional behavior of its own.

Groups
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 Group object onto a tile, featuring a title, subtitle, leading view, and trailing view. |
Usage
Integration
The following code snippet illustrates how you can can launch CometChatGroups.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 CometChatGroups.
-
set(OnItemLongClick:)
set(OnItemLongClick:)
is triggered when you long press on a ListItem of the groups component. This set(OnItemLongClick:)
method proves beneficial when a user intends to additional functionality on long press on list item in CometChatGroups.
3. set(onBack:)
Thisset(onBack:)
method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatGroups.
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 groups.
5. set(onError:)
This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatGroups.6. set(onEmpty:)
Thisset(onEmpty:)
method is triggered when the groups list is empty in CometChatGroups.
7. setOnLoad
This set(onLoad:) gets triggered when a group list is fully fetched and going to displayed on the screen, this return the list of groups to get displayed on the screen.Filters
Filters allow you to customize the data displayed in a list within a Component. 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. |
joinedOnly | boolean | Exclusively fetches joined groups. |
setTags | [String] | Utilized to fetch groups containing the specified tags. |
withTags | boolean | Utilized to retrieve groups with specific tags. |
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.
The list of events emitted by the Groups component is as follows.
Event | Description |
---|---|
onGroupCreate | This gets triggered when the logged in user creates a group. |
onGroupDelete | This gets triggered when the logged in user deletes a group. |
onGroupMemberLeave | This gets triggered when the logged in user leaves a group. |
onGroupMemberChangeScope | This gets triggered when the logged in user changes the scope of another group member. |
onGroupMemberBan | This gets triggered when the logged in user bans a group member from the group. |
onGroupMemberKick | This gets triggered when the logged in user kicks another group member from the group. |
onGroupMemberUnban | This gets triggered when the logged in user unbans a user banned from the group. |
onGroupMemberJoin | This gets triggered when the logged in user joins a group. |
onGroupMemberAdd | This gets triggered when the logged in user adds new members to the group. |
onOwnershipChange | This gets triggered when the logged in user transfers the ownership of their group to some other member. |
CometChatGroupsEvents
Listener’s
Emitting Group Events
CometChatGroupsEvents
Listener’s
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. Groups Style
Enhance your Groups Component by setting the GroupsStyle to customize its appearance. Group level styling
Property | Description | Code |
---|---|---|
List Item Selected Image | Check box image when a list item is selected. | listItemSelectedImage |
List Item Deselected Image | Check box image when a list item is deselected. | listItemDeSelectedImage |
Search Icon Tint Color | Tint color for the search icon, defaults to the secondary icon color from CometChatTheme. | searchIconTintColor |
Search Bar Style | Style of the search bar, defaulting to the standard style. | searchBarStyle |
Search Tint Color | Tint color for the search bar, defaults to the primary color from CometChatTheme. | searchTintColor |
Search Bar Tint Color | Background color of the search bar, defaulting to clear. | searchBarTintColor |
Search Bar Placeholder Text Color | Placeholder text color for the search bar, defaults to the tertiary text color from CometChatTheme. | searchBarPlaceholderTextColor |
Search Bar Placeholder Text Font | Font used for the placeholder text in the search bar, defaults to regular body font. | searchBarPlaceholderTextFont |
Search Bar Text Color | Color of the text entered in the search bar, defaults to the primary text color from CometChatTheme. | searchBarTextColor |
Search Bar Text Font | Font used for the text in the search bar, defaults to regular body font. | searchBarTextFont |
Search Bar Background Color | Background color of the search bar, defaults to a specific background color from CometChatTheme. | searchBarBackgroundColor |
Search Bar Cancel Icon Tint Color | Tint color for the cancel icon in the search bar, defaults to the primary color from CometChatTheme. | searchBarCancelIconTintColor |
Search Bar Cross Icon Tint Color | Tint color for the cross icon in the search bar, defaults to the secondary icon color from CometChatTheme. | searchBarCrossIconTintColor |
Background Color | Background color of the overall view, defaults to a specific background color from CometChatTheme. | backgroundColor |
Border Width | Width of the border around the view, defaults to 0 (no border). | borderWidth |
Border Color | Color of the border around the view, defaults to clear. | borderColor |
Corner Radius | Corner radius settings for the view, defaults to no corner radius. | cornerRadius |
Title Color | Color for the title text, defaults to the primary text color from CometChatTheme. | titleColor |
Title Font | Font used for the title text, defaults to nil (not set). | titleFont |
Large Title Color | Color for the large title text, defaults to the primary text color from CometChatTheme. | largeTitleColor |
Large Title Font | Font used for the large title text, defaults to nil (not set). | largeTitleFont |
Navigation Bar Tint Color | Background color of the navigation bar, defaults to a specific background color from CometChatTheme. | navigationBarTintColor |
Navigation Bar Items Tint Color | Tint color for items in the navigation bar, defaults to the highlight color from CometChatTheme. | navigationBarItemsTintColor |
Error Title Text Font | Font used for the error title text, defaults to a bold heading 3 font from CometChatTypography. | errorTitleTextFont |
Error Title Text Color | Color of the error title text, defaults to the primary text color from CometChatTheme. | errorTitleTextColor |
Error Subtitle Font | Font used for the error subtitle text, defaults to regular body font. | errorSubTitleFont |
Error Subtitle Text Color | Color of the error subtitle text, defaults to the secondary text color from CometChatTheme. | errorSubTitleTextColor |
Retry Button Text Color | Color for the retry button text, defaults to button text color from CometChatTheme. | retryButtonTextColor |
Retry Button Text Font | Font used for the retry button text, defaults to medium button font from CometChatTypography. | retryButtonTextFont |
Retry Button Background Color | Background color for the retry button, defaults to the primary color from CometChatTheme. | retryButtonBackgroundColor |
Retry Button Border Color | Border color for the retry button, defaults to clear. | retryButtonBorderColor |
Retry Button Border Width | Width of the border around the retry button, defaults to 0 (no border). | retryButtonBorderWidth |
Retry Button Corner Radius | Corner radius settings for the retry button, defaults to a specific corner radius from CometChatSpacing. | retryButtonCornerRadius |
Empty State Title Font | Font used for the empty state title text, defaults to a bold heading 3 font from CometChatTypography. | emptyTitleTextFont |
Empty State Title Color | Color of the empty state title text, defaults to the primary text color from CometChatTheme. | emptyTitleTextColor |
Empty State Subtitle Font | Font used for the empty state subtitle text, defaults to regular body font. | emptySubTitleFont |
Empty State Subtitle Color | Color of the empty state subtitle text, defaults to the secondary text color from CometChatTheme. | emptySubTitleTextColor |
Table View Separator | Color of the table view separator, defaults to clear. | tableViewSeparator |
List Item Title Text Color | Color of the title text in list items, defaults to the primary text color from CometChatTheme. | listItemTitleTextColor |
List Item Title Font | Font used for the title text in list items, defaults to medium heading 4 font from CometChatTypography. | listItemTitleFont |
List Item Subtitle Text Color | Color of the subtitle text in list items, defaults to the secondary text color from CometChatTheme. | listItemSubTitleTextColor |
List Item Subtitle Font | Font used for the subtitle text in list items, defaults to regular body font. | listItemSubTitleFont |
List Item Background | Background color for list items, defaults to clear. | listItemBackground |
List Item Selected Background | Background color for list items if selected, defaults to clear. | listItemSelectedBackground |
List Item Border Width | Width of the border around list items, defaults to 0 (no border). | listItemBorderWidth |
List Item Border Color | Color of the border around list items, defaults to the light border color from CometChatTheme. | listItemBorderColor |
List Item Corner Radius | Corner radius settings for list items, defaults to no corner radius. | listItemCornerRadius |
List Item Selection Image Tint | Tint color for the selection image in list items, defaults to the highlight color from CometChatTheme. | listItemSelectionImageTint |
List Item Deselection Image Tint | Tint color for the deselected image in list items. | listItemDeSelectedImageTint |
Password Group Image Tint Color | Tint color for the password group image, defaults to the background color from CometChatTheme. | passwordGroupImageTintColor |
Password Group Image Background Color | Background color for the password group image, defaults to the warning color from CometChatTheme. | passwordGroupImageBackgroundColor |
Private Group Image Tint Color | Tint color for the private group image, defaults to the background color from CometChatTheme. | privateGroupImageTintColor |
Private Group Image Background Color | Background color for the private group image, defaults to the success color from CometChatTheme. | privateGroupImageBackgroundColor |
Private Group Icon | Image for a private group icon. | privateGroupIcon |
Protected Group Icon | Image for a protected group icon. | protectedGroupIcon |
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. Below is a list of customizations along with corresponding code snippetsMethod | Description | Code |
---|---|---|
set(groupsRequestBuilder:) | Sets the request builder for fetching groups. | set(groupsRequestBuilder: requestBuilder) |
set(searchRequestBuilder:) | Sets the request builder for searching groups. | set(searchRequestBuilder: searchRequestBuilder) |
set(searchKeyword:) | Sets the search keyword to filter groups. | set(searchKeyword: "group_name") |
hideErrorView | Hides the error state view. | hideErrorView = true |
hideNavigationBar | Hides or shows the navigation bar. | hideNavigationBar = true |
hideSearch | Hides the search bar. | hideSearch = true |
hideBackButton | Hides the back button. | hideBackButton = true |
hideLoadingState | Hides the loading state indicator. | hideLoadingState = true |
hideReceipts | Hides message read/delivery receipts. | hideReceipts = true |
hideDeleteConversationOption | Hides the option to delete a conversation. | hideDeleteConversationOption = true |
hideUserStatus | Hides the online/offline status of users. | hideUserStatus = true |
hideGroupType | Hides the group type (private/public). | hideGroupType = 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 views, layouts, and UI elements and then incorporate those into the component.SetOptions
You can define custom options for each group using .set(options:). This method allows you to return an array of CometChatGroupOption based on the group object.AddOptions
You can dynamically add options to groups using .add(options:). This method lets you return additional CometChatGroupOption elements.SetListItemView
With this function, you can assign a custom ListItem to the groups Component.
CustomListItemView
as a custom UIView
. Which we will inflate in setListItemView()
swift
SetLeadingView
You can modify the leading view of a group 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 cell using .set(titleView:).
CustomTitleView
as a custom UIView
. Which we will inflate in setTitleView()
SetTrailView
You can modify the trailing view of a group cell using .set(trailView:).
CustomTrailView
as a custom UIView
. Which we will inflate in setTrailView()
SetSubTitleView
You can customize the subtitle view for each group item to meet your requirements
CustomSubtitleView
UIView file into the .set(subtitleView:)
method within CometChatGroups.