Overview
CometChatDetails functions as a standalone component designed to establish a screen displaying the details of a specific user or group object. It inherits all properties and methods from the CometChatListBase class, ensuring comprehensive functionality and customization options.
CometChatDetails internally implements the following functionalities:
- User Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
- User Actions: The details screen provides actions to block/unblock the user.

Usage
Integration
AsCometChatDetails functions as a view controller, it can be directly launched through a button click or any user-initiated action. Additionally, it can be seamlessly integrated into a tab view controller. CometChatDetails offers a range of parameters and methods for customizing its user interface.
Swift
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. SetOnClose
ThesetOnClose 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
2. SetOnBack
This method allows users to override the onBack Pressed behavior in CometChatDetails by utilizing thesetOnBack , providing customization options for handling the back action.
By default, this action has a predefined behavior: it simply dismisses the current view controller. However, the flexibility of CometChat UI Kit allows you to override this standard behavior according to your application’s specific requirements. You can define a custom action that will be performed instead when the back button is pressed.
- Swift
3. SetOnError
This methodsetOnError, allows users to override error handling within CometChatDetails, providing greater control over error responses and actions.
- Swift
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.CometChatDetails component does not have available filters.
Events
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.
To handle events supported by Users you have to add corresponding listeners by using CometChatUserEvents
| Events | Description |
|---|---|
| emitOnUserBlock | This will get triggered when the logged in user blocks another user |
| emitOnUserUnblock | This will get triggered when the logged in user unblocks another user |
- Swift
Swift
Customization
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.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. Details Style
You can set theDetails Style to the User Detail Component to customize the styling.
- Swift

| Property | Description | Method |
|---|---|---|
| Background | Sets the background color for details | .set(background: UIColor) |
| CornerRadius | Sets the corner radius for details | .set(cornerRadius: CometChatCornerStyle) |
| BorderWidth | Sets the border width for details | .set(borderWidth: CGFloat) |
| TitleColor | Sets the title color for details | .set(titleColor: UIColor) |
| TitleFont | Sets the title font for details | .set(titleFont: UIFont) |
| BackButtonTint | Sets the back button tint color for details | .set(backButtonTint: UIColor) |
| OnlineStatusColor | Sets online status color for details | .set(onlineStatusColor: UIColor) |
| PrivateGroupIconBackgroundColor | Sets private group background color for details | .set(privateGroupIconBackgroundColor: UIColor) |
| ProtectedGroupIconBackgroundColor | Sets add button font for details | .set(protectedGroupIconBackgroundColor: UIColor) |
| HeaderBackground | Sets header background color for details | .set(headerBackground: UIColor) |
| HeaderTextColor | Sets header text color for details | .set(headerTextColor: UIColor) |
| HeaderTextFont | Sets header text font for details | .set(headerTextFont: UIFont) |
| ListItemTitleColor | Sets list item title color for details | .set(listItemTitleColor: UIColor) |
| ListItemTitleFont | Sets list item title font for details | .set(listItemTitleFont: UIFont) |
| ListItemSubtitleFont | Sets list item subtitle font for details | .set(listItemsubTitleFont: UIFont) |
| ListItemSubtitleColor | Sets list item subtitle color for details | .set(listItemSubtitleColor: UIColor) |
2. Avatar Style
To apply customized styles to theAvatar component in the User Details Component, you can use the following code snippet. For further insights on Avatar Styles refer
- Swift
3. StatusIndicator Style
To apply customized styles to the Status Indicator component in the User Details Component, You can use the following code snippet. For further insights on Status Indicator Styles refer- Swift
4. ListItem Style
To apply customized styles to the List Item component in the User Details Component, You can use the following code snippet. For further insights on List Item Styles refer- Swift
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.- Swift
| Property | Description | Code |
|---|---|---|
| Set Title | Used to set the title | .set(title: String, mode: UINavigationItem.LargeTitleDisplayMode) |
| Hide Profile | Used to hide user profile view | .hide(profile: Bool) |
| Set Close Button | Used to set close button | .set(closeButtonIcon: UIImage) |
| Disable UserPresence | Used to control visibility of user indicator shown if user is online | .disable(userPreference: Bool) |
| Data | Used to pass custom details template | setData(data: ((_ user: User?, _ group: Group?) -> [CometChatDetailsTemplate])?) |
| Set User | Used to set the user | .set(user: User?) |
Advance
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.SetSubTitleView
Tailor the subtitle view for each user item to suit your specific preferences and needs.- Swift

CustomUserDetailsSubtitleView.
Afterwards, seamlessly integrate this CustomUserDetailsSubtitleView UIView file into the .setSubtileView method within CometChatDetails().
CustomUserDetailsSubtitleView
- Swift
View controller
SetCustomProfileView report
Tailor the custom profile view for each user item to suit your specific preferences and needs.- Swift
CustomUDProfileView.
Afterwards, seamlessly integrate this CustomUDProfileView UIView file into the .setCustomProfileview method within CometChatUsers().
CustomUDProfileView
- View Controller
DetailsTemplate report
TheCometChatDetailsTemplate offers a structure for organizing information in the CometChat details component. It serves as a blueprint, defining how user-related details are presented. This structure allows for customization and organization within the CometChat interface.
- Swift
Swift
- Swift
DetailsOption
TheDetailsOption 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.
| Properties | Type | Description |
|---|---|---|
| Id | String | Unique identifier for the template |
| Title | String | Text to display below the template |
| TitleColor | UIColor | Defines the color for the title in the template |
| ItemSeparatorColor | UIFont | Defines the separator color for the option in the template |
| HideItemSeparator | Bool | Used to hide the item seperator in the template |
| CustomView | UIView | Used to set the customView for the template |
| Options | ((_ user: User?, _ group: Group?) -> [CometChatDetailsOption])? | Used to set the list of options for the template |
| Title Font | UIFont | Sets all the different properties of font for the title text |
| Height | CGFloat | Sets the height |
| On click | ((_ user: User?, _ group: Group?, _ section: Int, _ option: CometChatDetailsOption, _ controller: UIViewController?) -> ())? | Sets the onClick Handler for the option |