CometChatDetails is a Component that provides additional information and settings related to a specific group.The details screen includes the following elements and functionalities:
Group Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
Group Chat Features: It provides additional functionalities for managing the group. This includes options to add or remove participants, assign roles or permissions, and view group-related information.
Group Actions: This offers actions related to the group, such as leaving the group, or deleting the group.
The CometChatDetails 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.
CometChatDetails, 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 banned 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 CometChatDetails component into your application.
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. onClose
The onClose event is typically triggered when the close button is clicked and it carries a default action. However, with the following code snippet, you can effortlessly override this default operation.This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
Swift
Copy
Ask AI
let cometChatDetails = CometChatDetails().set(group: group).set (onClose:{//Perform Your Action})
2. SetOnError
You can customize this behavior by using the provided code snippet to override the On Error and improve error handling.
Swift
Copy
Ask AI
let cometChatDetails = CometChatDetails().set(group: group).setOnError (onError:{ error in //Perform Your Action})
3. 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
Copy
Ask AI
let cometChatDetails = CometChatDetails().set(group: group).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.CometChatDetails component does not have available filters.
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.Events emitted by the Join Group component is as follows.
Event
Description
onGroupMemberLeave
This event is triggered when the group member leaves the group successfully.
onGroupDelete
This event is triggered when the group member deletes the group successfully.
onGroupMemberChangeScope
This will get triggered when the logged in user changes the scope of another group member.
onGroupMemberBan
This will get triggered when the logged in user bans a group member from the group.
onGroupMemberKick
This will get triggered when the logged in user kicks another group member from the group.
onGroupMemberUnban
This will get triggered when the logged in user unbans a user banned from the group.
onGroupMemberJoin
This will get triggered when the logged in user joins a group.
onGroupMemberAdd
This will get triggered when the logged in user add new members to the group.
onOwnershipChange
This will get triggered when the logged in user transfer the ownership of their group to some other member.
onGroupCreate
This will get triggered when the logged in user creates a new group.
onCreateGroupClick
This will get triggered when the logged in user taps on create group button.
Add Listener
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 onGroupMemberLeave(leftUser: User, leftGroup: Group) { // Do Stuff } public func onGroupMemberLeave(leftUser: User, leftGroup: Group) { // Do Stuff } public func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) { // Do Stuff } public func onGroupMemberBan(bannedUser: User, bannedGroup: Group, bannedBy: User) { // Do Stuff } public func onGroupMemberKick(kickedUser: User, kickedGroup: Group, kickedBy: User) { // Do Stuff } public func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group, unbannedBy: User) { // Do Stuff } public func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) { // Do Stuff } public func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) { // Do Stuff } public func onOwnershipChange(group: Group?, member: GroupMember?) { // Do Stuff } public func onGroupCreate(group: Group) { // Do Stuff } public func onCreateGroupClick() { // Do Stuff }}
Emitting Group Events
Copy
Ask AI
///emit this when logged in user leaves the group.CometChatGroupEvents.emitOnGroupMemberLeave(leftUser: User, leftGroup: Group)///you need to pass the [Group] object of the group which is deletedCometChatGroupEvents.emitOnGroupDelete(group: Group)
Remove Listener
View controller
Copy
Ask AI
public override func viewWillDisappear(_ animated: Bool) { // Uncubscribing for the listener to listen events from user moduleCometChatGroupEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")}
To fit your app’s design requirements, you can customize the appearance of the Details 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. Details Style
You can set the DetailsStyle to the CometChatDetails Component to customize the styling.
To apply customized styles to the Avatar component in the CometChatDetails 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 CometChatDetails 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 CometChatDetails 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.
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
Copy
Ask AI
let cometChatDetails = CometChatDetails() .set(group: group) .set (subTitleView:{ user,group in //Perform Your Action})
You can customize the subtitle view for each CometChatDetails item to meet your requirements
Example
In this example, we will create a Custom_GroupDetails_SubtitleViewa UIView file.Custom_GroupDetails_SubtitleView
Ensure to pass and present CometChatDetails. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
The CometChatDetailsTemplate offers a structure for organizing information in the CometChat details component. It serves as a blueprint, defining how group-related details are presented. This structure allows for customization and organization within the CometChat interface.
The DetailsOption defines the structure for individual options within the CometChat details component, facilitating customization and functionality for user interactions. This defines the structure of each option for a template in the details component.
Configurations offer the ability to customize the properties of each component within a Composite Component. CometChatDetails has Add Members, Banned Members, Transfer Ownership and Group Members component. Hence, each of these components will have its individual `Configuration“.
Configurations expose properties that are available in its individual components.
You can customize the properties of the Group Members component by making use of the groupMembersConfiguration. You can accomplish this by employing the groupMembersConfiguration as demonstrated below:
Swift
Copy
Ask AI
// Create an object of GroupMembersConfigurationlet groupMembersConfiguration = GroupMembersConfiguration()
All exposed properties of GroupMembersConfiguration can be found under Group Members. Properties marked with the symbol are not accessible within the Configuration Object.ExampleLet’s say you want to change the style of the Group Member subcomponent and, in addition, you only want to hide separator and show back button.You can modify the style using the groupMembersStyle property, hide the separator using hideSeparator property and show back button using .show(backButton: bool) property.
You can customize the properties of the Add Members component by making use of the AddMembersConfiguration. You can accomplish this by employing the addMembersConfiguration as demonstrated below:
Swift
Copy
Ask AI
// Create an object of AddMembersConfigurationlet addMembersConfiguration = AddMembersConfiguration()
All exposed properties of AddMembersConfiguration can be found under Add Members. Properties marked with the symbol are not accessible within the Configuration Object.ExampleLet’s say you want to change the style of the Add Members subcomponent and, in addition, you only want to show the back button.You can modify the style using the ListItemStyle property and AvatarStyle property
Swift
Swift
Copy
Ask AI
CometChat.getGroup(GUID: "GROUP_ID", onSuccess: { (group) in DispatchQueue.main.async {// Create an object of AddMembersConfigurationlet addMembersConfiguration = AddMembersConfiguration()let avatarStyle = AvatarStyle()avatarStyle.set(cornerRadius: .init(cornerRadius: 5))// Creating ListItemStyle objectlet listItemStyle = ListItemStyle()// Creating Modifying the propeties of list itemlistItemStyle.set(background: .init(red: 0.81, green: 0.64, blue: 0.96, alpha: 1.00)).set(titleFont: .systemFont(ofSize: 18)).set(titleColor: .init(red: 0.47, green: 0.02, blue: 0.93, alpha: 1.00)).set(cornerRadius: CometChatCornerStyle(cornerRadius: 8.0)).set(borderColor: .black).set(borderWidth: 3)// Assign the properties as per your needaddMembersConfiguration.show(backButton: true).set(avatarStyle: avatarStyle).set(listItemStyle: listItemStyle)let cometChatDetails = CometChatDetails().set(group: group).set(addMembersConfiguration: addMembersConfiguration)let naviVC = UINavigationController(rootViewController: cometChatDetails)self.present(naviVC, animated: true, completion: nil) } }, onError: { (error) in DispatchQueue.main.async { print("Error fetching group: \(String(describing: error?.errorDescription))") } })
Replace “GROUP_ID” with the ID of the group you want to fetch.
You can customize the properties of the Banned Members component by making use of the BannedMembersConfiguration. You can accomplish this by employing the bannedMembersConfiguration as demonstrated below:
Swift
Copy
Ask AI
// Create an object of BannedMembersConfigurationlet bannedMembersConfiguration = BannedMembersConfiguration()
All exposed properties of BannedMembersConfiguration can be found under Banned Members. Properties marked with the symbol are not accessible within the Configuration Object.ExampleLet’s say you want to change the style of the Banned Members subcomponent and, in addition, you only want to show the back button.You can modify the style using the ListItemStyle property and AvatarStyle property
You can customize the properties of the Transfer Ownership component by making use of the TransferOwnershipConfiguration. You can accomplish this by employing the transferOwnershipConfiguration as demonstrated below:
Swift
Copy
Ask AI
// Create an object of TransferOwnershipConfigurationlet transferOwnershipConfiguration = TransferOwnershipConfiguration()
All exposed properties of TransferOwnershipConfiguration can be found under Transfer Ownership. Properties marked with the symbol are not accessible within the Configuration Object.Example Let’s say you want to change the style of the Transfer Ownership subcomponent and, in addition, you only want to show the back button.You can modify the style using the ListItemStyle property and AvatarStyle property
