Skip to main content

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.
The Groups component is composed of the following BaseComponents:

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.
  1. 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.

  1. 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:)
This set(onBack:) method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatGroups.

4. set(onSelection:)
The set(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:)
This set(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 GroupsRequestBuilder Example In the example below, we are applying a filter to the Group List based on only joined groups.
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. Example

Events

Events are emitted by a Component. 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. Adding CometChatGroupsEvents Listener’s
Emitting Group Events
Removing 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
Instance level styling

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 snippets

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.
Demonstration
You can create a 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:).
Demonstration
You can create a 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:).
Demonstration
You can create a 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:).
Demonstration
You can create a 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
Example Demonstration
You can seamlessly integrate this CustomSubtitleView UIView file into the .set(subtitleView:) method within CometChatGroups.

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 groups are available.