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 and CometChatGroupList components without introducing any additional behavior of its own.
The Groups component is composed of the following BaseComponents:
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.
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. SetOnItemClick
This method proves valuable when users seek to override onItemClick functionality within CometChatGroups, empowering them with greater control and customization options.The setOnItemClick action doesn’t have a predefined behavior. You can override this action using the following code snippet.
Swift
Report incorrect code
Copy
Ask AI
let groups = CometChatGroups().setOnItemClick (onItemClick:{ group, indexPath in//Perform Your Action })
2. SetOnItemLongClick
This method becomes invaluable when users seek to override long-click functionality within CometChatGroups, offering them enhanced control and flexibility in their interactions.The setOnItemLongClick action doesn’t have a predefined behavior. You can override this action using the following code snippet.
Swift
Report incorrect code
Copy
Ask AI
let groups = CometChatGroups().setOnItemLongClick (onItemLongClick:{ group, indexPath in//Perform Your Action})
3. SetOnError
You can customize this behavior by using the provided code snippet to override the On Error and improve error handling.
Swift
Report incorrect code
Copy
Ask AI
let groups = CometChatGroups() .setOnError (onError:{ error in //Perform Your Action})
4. SetOnBack
Enhance your application’s functionality by leveraging the SetOnBack feature. This capability allows you to customize the behavior associated with navigating back within your app. Utilize the provided code snippet to override default behaviors and tailor the user experience according to your specific requirements.
Swift
Report incorrect code
Copy
Ask AI
let groups = CometChatGroups() .setOnBack (onBack:{ //Perform Your Action })
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
Methods
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.
ExampleIn the example below, we are applying a filter to the Group List based on only joined groups.
Swift
Report incorrect code
Copy
Ask AI
// You can create GroupRequestBuilder as per your requirementlet groupsRequestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 20).set(joinedOnly: true)let groups = CometChatGroups(groupsRequestBuilder: groupsRequestBuilder)let naviVC = UINavigationController(rootViewController: groups)self.present(naviVC, animated: true)
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
Swift
Report incorrect code
Copy
Ask AI
// You can create GroupRequestBuilder as per your requirementlet groupsRequestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 2).set(searchKeyword: "")let groups = CometChatGroups(groupsRequestBuilder: groupsRequestBuilder)let naviVC = UINavigationController(rootViewController: groups)self.present(naviVC, animated: true)
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.
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.
Adding CometChatGroupsEvents Listener’s
Add Listener
Report incorrect code
Copy
Ask AI
// View controller from your project where you want to listen events.public class ViewController: UIViewController { public override func viewDidLoad() { super.viewDidLoad() // Subscribing for the listener to listen events from user module CometChatGroupEvents.addListener("UNIQUE_ID", self as CometChatGroupEventListener) }} // Listener events from groups moduleextension ViewController: CometChatGroupEventListener { public func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) { // Do Stuff } public func onCreateGroupClick() { // Do Stuff } public func onGroupCreate(group: Group) { // Do Stuff } public func onGroupDelete(group: Group) { // Do Stuff } public func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) { // Do Stuff } public func onGroupMemberLeave(leftUser: User, leftGroup: Group) { // Do Stuff } public func onGroupMemberBan(bannedUser: User, bannedGroup: Group) { // Do Stuff } public func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) { // Do Stuff } public func onGroupMemberKick(kickedUser: User, kickedGroup: Group) { // Do Stuff } public func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) { // Do Stuff } public func onOwnershipChange(group: Group?, member: GroupMember?) { // Do Stuff }}
Emitting Group Events
Report incorrect code
Copy
Ask AI
///you need to pass the [Group] object of the group which is createdCometChatGroupEvents.emitOnGroupCreate(group: Group)///you need to pass the [Group] object of the group which is deletedCometChatGroupEvents.emitOnGroupDelete(group: Group)///emit this when logged in user leaves the group.CometChatGroupEvents.emitOnGroupMemberLeave(leftUser: User, leftGroup: Group)///emit this when group member's scope is changed by logged in user.CometChatGroupEvents.emitOnGroupMemberChangeScope(updatedBy: User , updatedUser: User , scopeChangedTo: CometChat.MemberScope , scopeChangedFrom: CometChat.MemberScope, group: Group)///emit this when group member is banned from the group by logged in user.CometChatGroupEvents.emitOnGroupMemberBan(bannedUser: User, bannedGroup: Group, bannedBy: User)///emit this when group member is kicked from the group by logged in user.CometChatGroupEvents.emitOnGroupMemberKick(kickedUser: User, kickedGroup: Group, kickedBy: User)///emit this when a banned group member is unbanned from group by logged in user.CometChatGroupEvents.emitOnGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group, unbannedBy: User)///emit this when logged in user has joined a group successfully.CometChatGroupEvents.emitOnGroupMemberJoin(joinedUser: User, joinedGroup: Group)//emit this when members are added to a group by the logged in user.CometChatGroupEvents.emitOnGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User)///emit this when ownership is changed by logged in user.CometChatGroupEvents.emitOnGroupMemberChangeScope(updatedBy: User , updatedUser: User , scopeChangedTo: CometChat.MemberScope , scopeChangedFrom: CometChat.MemberScope, group: Group)
Removing CometChatGroupsEvents Listener’s
Remove Listener
Report incorrect code
Copy
Ask AI
public override func viewWillDisappear(_ animated: Bool) { // Uncubscribing for the listener to listen eventsCometChatGroupEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")}
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.
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.
To apply customized styles to the Avatar component in the Groups Component, you can use the following code snippet. For further insights on Avatar Styles refer
To apply customized styles to the Status Indicator component in the Groups Component, You can use the following code snippet. For further insights on Status Indicator Styles refer
To apply customized styles to the ListItemStyle component in the Groups Component, you can use the following code snippet. For further insights on ListItemStyle Styles refer
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.
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.
Utilize this property to assign a custom ListItem to the Groups Component, allowing for enhanced customization and flexibility in its rendering.
Swift
Report incorrect code
Copy
Ask AI
let groups = CometChatGroups() .setListItemView(listItemView: { group in //Perform Your Action})
Example
In this example, we will create a UIView file CustomListItemGroupView and pass it inside the setListItemView() method.
CustomListItemGroupView
Report incorrect code
Copy
Ask AI
import UIKitimport CometChatSDKimport CometChatUIKitSwiftclass CustomListItemGroupView: UIView { // Initialize your subviews let titleLabel: UILabel = { let label = UILabel() label.translatesAutoresizingMaskIntoConstraints = false label.font = UIFont.boldSystemFont(ofSize: 16) return label }() let statusIndicator: UIView = { let view = UIView() view.translatesAutoresizingMaskIntoConstraints = false view.backgroundColor = .green view.layer.cornerRadius = 5 return view }() let groupImageView: CometChatAvatar = { let imageView = CometChatAvatar(frame: .zero) imageView.translatesAutoresizingMaskIntoConstraints = false return imageView }() // Override the initializer override init(frame: CGRect) { super.init(frame: frame) // Add subviews and layout constraints addSubview(groupImageView) addSubview(titleLabel) addSubview(statusIndicator) NSLayoutConstraint.activate([ groupImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8), groupImageView.centerYAnchor.constraint(equalTo: centerYAnchor), groupImageView.heightAnchor.constraint(equalToConstant: 40), groupImageView.widthAnchor.constraint(equalToConstant: 40), titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor), titleLabel.leadingAnchor.constraint(equalTo: groupImageView.trailingAnchor, constant: 8), titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8), statusIndicator.widthAnchor.constraint(equalToConstant: 10), statusIndicator.heightAnchor.constraint(equalToConstant: 10), statusIndicator.trailingAnchor.constraint(equalTo: titleLabel.trailingAnchor), statusIndicator.bottomAnchor.constraint(equalTo: titleLabel.bottomAnchor) ]) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } // Configure the view with a group func configure(with group: CometChatSDK.Group) { titleLabel.text = group.name statusIndicator.backgroundColor = group.hasJoined ? .green : .gray groupImageView.setAvatar(avatarUrl: group.icon ?? "", with: group.name ?? "") }}
Swift
Report incorrect code
Copy
Ask AI
let groups = CometChatGroups() .setListItemView(listItemView: { group in let customListItemGroupView = CustomListItemGroupView() customListItemGroupView.configure(with: group!) return customListItemGroupView})
Ensure to pass and present CometChatGroups. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
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.
Swift
Report incorrect code
Copy
Ask AI
let groups = CometChatGroups() .setSubtitleView (subtitle:{ group in //Perform Your Action})
You can customize the subtitle view for each group item to meet your requirements
Example
In this example, we will create a Custom_Subtitle_Group_Viewa UIView file.
We will be passing a custom subtitle view to CometChatGroups, ensuring a tailored and user-friendly interface.
Swift
Report incorrect code
Copy
Ask AI
let cometChatGroups = CometChatGroups() .setSubtitleView(subtitle: { group in let customSubtitleGroupView = CustomSubtitleGroupView() customSubtitleGroupView.configure(with: group!) return customSubtitleGroupView})
Ensure to pass and present CometChatGroups. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
Ensure to pass and present CometChatGroups. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
Ensure to pass and present CometChatGroups. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
You can set the Custom Menus to add more options to the Groups component.
Swift
Report incorrect code
Copy
Ask AI
let cometChatGroups = CometChatGroups() .set(menus: [UIBarButtonItem])
You can customize the menus for groups to meet your requirements
Example
In this example, we’ll craft a custom button tailored for CometChatGroups, enhancing its interface with a personalized menu for a more user-friendly experience.
Ensure to pass and present CometChatGroups. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.