Version: v5

Users

Overview

The Users is a Component, showcasing an accessible list of all available users. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the widget displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline.

The Users component is composed of the following BaseComponents:

Components	Description
ListBase	a reusable container component having title, search box, customisable background and a List View
ListItem	a component that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view

Usage

Integration

As CometChatUsers is a custom view controller, it can be launched directly by user actions such as button clicks or other interactions. It's also possible to integrate it into a tab view controller. CometChatUsers offers several parameters and methods for UI customization.

Swift

let cometChatUsers = CometChatUsers()
let naviVC = UINavigationController(rootViewController: cometChatUsers)
self.present(naviVC, animated: true)

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 users component. This set(OnItemClick:) method proves beneficial when a user intends to customize the on-click behavior in CometChatUsers.

Swift

cometChatUsers.set(onItemClick: { user, indexPath in
    // Override on item click
})

set(OnItemLongClick:)

set(OnItemLongClick:) is triggered when you long press on a ListItem of the users component. This set(OnItemLongClick:) method proves beneficial when a user intends to additional functionality on long press on list item in CometChatUsers.

Swift

cometChatUsers.set(onItemLongClick: { user, indexPath in
    // Override on item click
})

3. set(onBack:)

This set(onBack:) method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatUsers.

Swift

cometChatUsers.set(onBack: {
    // Override on back
})

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

Swift

cometChatUsers.set(onSelection: { users in
     //Handle action
})

5. set(onError:)

This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatUsers.

Swift

cometChatUsers.set(onError: { error in
    // Override on error
})

6. set(onEmpty:)

This set(onEmpty:) method is triggered when the users list is empty in CometChatUsers.

Swift

cometChatUsers.set(onEmpty: {
    // Handle empty state
})

7. setOnLoad

This set(onLoad:) gets triggered when a user list is fully fetched and going to displayed on the screen, this return the list of users to get displayed on the screen.

Swift

cometChatUsers.set(onLoad: { users in
    // Handle loaded users
})

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

The UserRequestBuilder enables you to filter and customize the user list based on available parameters in UserRequestBuilder. This feature allows you to create more specific and targeted queries when fetching users. The following are the parameters available in UserRequestBuilder

Methods	Type	Description
setLimit	int	sets the number users that can be fetched in a single request, suitable for pagination
setSearchKeyword	String	used for fetching users matching the passed string
hideBlockedUsers	bool	used for fetching all those users who are not blocked by the logged in user
friendsOnly	bool	used for fetching only those users in which logged in user is a member
setRoles	[String]	used for fetching users containing the passed tags
setTags	[String]	used for fetching users containing the passed tags
withTags	bool	used to fetch tags data along with the list of users.
setStatus	CometChat.UserStatus	used for fetching users by their status online or offline
setUIDs	[String]	used for fetching users containing the passed users

Example

In the example below, we are applying a filter to the UserList based on Friends.

Swift

let usersRequestBuilder = UsersRequest.UsersRequestBuilder(limit: 20).friendsOnly(true)

let usersWithMessages = CometChatUsersWithMessages(usersRequestBuilder: usersRequestBuilder)
let naviVC = UINavigationController(rootViewController: usersWithMessages)
self.present(naviVC, animated: true)

2. SearchRequestBuilder

The SearchRequestBuilder uses UserRequestBuilder enables you to filter and customize the search list based on available parameters in UserRequestBuilder. This feature allows you to keep uniformity between the displayed UserList and searched UserList.

Example In the example below, we are applying a filter to the UserList based on Search.

Swift

let usersRequestBuilder = UsersRequest.UsersRequestBuilder(limit: 20)
.set(searchKeyword: "**")

let usersWithMessages = CometChatUsers(usersRequestBuilder: usersRequestBuilder)
let naviVC = UINavigationController(rootViewController: usersWithMessages)
self.present(naviVC, animated: true)

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.

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

///pass the [User] object of the user which has been blocked by the logged in user
 CometChatUserEvents.emitOnUserBlock(user: User)

///pass the [User] object of the user which has been unblocked by the logged in user
 CometChatUserEvents.emitOnUserUnblock(user: User)

Usage

Swift
// 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
         CometChatUserEvents.addListener("UNIQUE_ID", self as CometChatUserEventListener)
    }

    public override func viewWillDisappear(_ animated: Bool) {
       // Uncubscribing for the listener to listen events from user module
        CometChatUserEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
    }
}

 // Listener events from user module
extension  ViewController: CometChatUserEventListener {

    func onUserBlock(user: User) {
        // Do Stuff
    }

    func onUserUnblock(user: User) {
        // Do Stuff
    }
}

Customization

To fit your app's design requirements, you can customize the appearance of the users 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. Users Style

You can set the UsersStyle to the Users Component to customize the styling.

Global level styling

Swift

let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
        
CometChatUsers.style.titleColor = UIColor(hex: "#F76808")
CometChatUsers.style.titleFont = UIFont(name: "Times-New-Roman", size: 34)
CometChatUsers.avatarStyle = customAvatarStyle

Instance level styling

Swift

let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
        
let userStyle = UsersStyle()
userStyle.titleColor = UIColor(hex: "#F76808")
userStyle.titleFont = UIFont(name: "Times-New-Roman", size: 34)
        
let customUser = CometChatUsers()
customUser.style = userStyle
customUser.avatarStyle = customAvatarStyle

List of properties exposed by MessageListStyle

Property	Description	Code
List Item Selected Image	Image shown when a list item is selected.	`CometChatUsers.style.listItemSelectedImage = UIImage()`
List Item Deselected Image	Image shown when a list item is deselected.	`CometChatUsers.style.listItemDeSelectedImage = UIImage()`
Search Icon Tint Color	Tint color for the search icon in the search bar.	`CometChatUsers.style.searchIconTintColor = UIColor()`
Search Bar Style	Style of the search bar (e.g., default, prominent).	`CometChatUsers.style.searchBarStyle = .default`
Search Tint Color	Tint color for the search bar elements.	`CometChatUsers.style.searchTintColor = UIColor?`
Search Bar Tint Color	Background color for the search bar (excluding text input).	`CometChatUsers.style.searchBarTintColor = UIColor?`
Placeholder Text Color	Color of the placeholder text in the search bar.	`CometChatUsers.style.searchBarPlaceholderTextColor = UIColor?`
Placeholder Text Font	Font of the placeholder text in the search bar.	`CometChatUsers.style.searchBarPlaceholderTextFont = UIFont?`
Search Bar Text Color	Color of the entered text in the search bar.	`CometChatUsers.style.searchBarTextColor = UIColor?`
Search Bar Text Font	Font of the entered text in the search bar.	`CometChatUsers.style.searchBarTextFont = UIFont?`
Search Bar Background Color	Background color of the search bar’s text input area.	`CometChatUsers.style.searchBarBackgroundColor = UIColor?`
Cancel Icon Tint Color	Tint color for the cancel button in the search bar.	`CometChatUsers.style.searchBarCancelIconTintColor = UIColor?`
Cross Icon Tint Color	Tint color for the clear (cross) button in the search bar.	`CometChatUsers.style.searchBarCrossIconTintColor = UIColor?`
Background Color	Background color for the entire screen or view.	`.backgroundColor = CometChatTheme.backgroundColor01`
Border Width	Border width for the search bar or container.	`CometChatUsers.style.borderWidth = 0`
Border Color	Color of the border, default is clear.	`CometChatUsers.style.borderColor = .clear`
Corner Radius	Corner radius for search bar or other elements.	`CometChatUsers.style.cornerRadius = CometChatCornerStyle.init(cornerRadius: 0)`
Title Text Color	Text color for title elements within the list or navigation bar.	`CometChatUsers.style.titleColor = CometChatTheme.textColorPrimary`
Title Font	Font for title text.	`CometChatUsers.style.titleFont = CometChatTypography.Heading4.medium`
Large Title Text Color	Text color for large titles.	`CometChatUsers.style.largeTitleColor = CometChatTheme.textColorPrimary`
Large Title Font	Font for large titles.	`CometChatUsers.style.largeTitleFont = UIFont?`
Navigation Bar Tint Color	Tint color for the navigation bar background.	`CometChatUsers.style.navigationBarTintColor = CometChatTheme.backgroundColor01`
Navigation Bar Items Tint Color	Tint color for navigation bar items (buttons, icons).	`CometChatUsers.style.navigationBarItemsTintColor = CometChatTheme.iconColorHighlight`
Error Title Font	Font for the error title displayed in UI.	`CometChatUsers.style.errorTitleTextFont = CometChatTypography.Heading3.bold`
Error Title Text Color	Text color for the error title.	`CometChatUsers.style.errorTitleTextColor = CometChatTheme.textColorPrimary`
Error Subtitle Font	Font for the subtitle of error messages.	`CometChatUsers.style.errorSubTitleFont = CometChatTypography.Body.regular`
Error Subtitle Text Color	Text color for the subtitle of error messages.	`CometChatUsers.style.errorSubTitleTextColor = CometChatTheme.textColorSecondary`
Retry Button Text Color	Text color for the retry button in error states.	`CometChatUsers.style.retryButtonTextColor = CometChatTheme.buttonTextColor`
Retry Button Text Font	Font for the retry button text.	`CometChatUsers.style.retryButtonTextFont = CometChatTypography.Button.medium`
Retry Button Background Color	Background color for the retry button.	`CometChatUsers.style.retryButtonBackgroundColor = CometChatTheme.primaryColor`
Retry Button Border Color	Border color for the retry button.	`CometChatUsers.style.retryButtonBorderColor = .clear`
Retry Button Border Width	Border width for the retry button.	`CometChatUsers.style.retryButtonBorderWidth = 0`
Retry Button Corner Radius	Corner radius for the retry button.	`CometChatUsers.style.retryButtonCornerRadius = CometChatCornerStyle?`
Empty State Title Font	Font for the empty state title (when no users/items are present).	`CometChatUsers.style.emptyTitleTextFont = CometChatTypography.Heading3.bold`
Empty State Title Color	Text color for the empty state title.	`CometChatUsers.style.emptyTitleTextColor = CometChatTheme.textColorPrimary`
Empty Subtitle Font	Font for the subtitle in the empty state.	`CometChatUsers.style.emptySubTitleFont = CometChatTypography.Body.regular`
Empty Subtitle Text Color	Text color for the subtitle in the empty state.	`CometChatUsers.style.emptySubTitleTextColor = CometChatTheme.textColorSecondary`
Table View Separator Color	Color for the table view separator.	`CometChatUsers.style.tableViewSeparator = .clear`
List Item Title Text Color	Text color for list item titles.	`CometChatUsers.style.listItemTitleTextColor = CometChatTheme.textColorPrimary`
List Item Title Font	Font for list item titles.	`CometChatUsers.style.listItemTitleFont = CometChatTypography.Heading4.medium`
List Item Subtitle Text Color	Text color for list item subtitles.	`CometChatUsers.style.listItemSubTitleTextColor = CometChatTheme.textColorSecondary`
List Item Subtitle Font	Font for list item subtitles.	`CometChatUsers.style.listItemSubTitleFont = CometChatTypography.Body.regular`
List Item Background	Background color for individual list items.	`CometChatUsers.style.listItemBackground = .clear`
List Item Border Width	Border width for individual list items.	`CometChatUsers.style.listItemBorderWidth = 0`
List Item Border Color	Border color for individual list items.	`CometChatUsers.style.listItemBorderColor = CometChatTheme.borderColorLight`
List Item Corner Radius	Corner radius for list items.	`CometChatUsers.style.listItemCornerRadius = CometChatCornerStyle.init(cornerRadius: 0)`
Selection Image Tint Color	Tint color for selection indicator in list items.	`CometChatUsers.style.listItemSelectionImageTint = CometChatTheme.iconColorHighlight`
Selected Background Color	Background color for selected list items.	`CometChatUsers.style.listItemSelectedBackground = .clear`
Deselected Image Tint Color	Tint color for the deselected state image.	`CometChatUsers.style.listItemDeSelectedImageTint = CometChatTheme.borderColorDefault`
Header Title Color	Text color for section header titles in the list.	`CometChatUsers.style.headerTitleColor = CometChatTheme.textColorHighlight`
Header Title Font	Font for section header titles.	`CometChatUsers.style.headerTitleFont = CometChatTypography.Heading4.medium`

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

Method	Description	Code
set(userRequestBuilder:)	Sets a custom request builder for fetching users.	`.set(userRequestBuilder: UsersRequest.UsersRequestBuilder())`
set(searchRequestBuilder:)	Sets a custom request builder for searching users.	`.set(searchRequestBuilder: UsersRequest.UsersRequestBuilder())`
set(searchKeyword:)	Sets a search keyword for filtering users.	`.set(searchKeyword: "John")`
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`
hideUserStatus	Hides the online/offline status of users.	`hideUserStatus = true`
hideSectionHeader	Hides the section header for table view indicating initials of users.	`hideSectionHeader = true`

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.

SetOptions

You can define custom options for each user using .set(options:). This method allows you to return an array of CometChatUserOption based on the user object.

Swift

cometChatUsers.set(options: { user in  
    return [CometChatUserOptions]  
})  

AddOptions

You can dynamically add options to users using .add(options:). This method lets you return additional CometChatUserOption elements.

Swift

cometChatUsers.add(options: { user in  
    return [ArchiveOption()]  
})  

SetListItemView

With this function, you can assign a custom ListItem to the users Component.

Swift

let cometChatUser = CometChatUsers()
cometChatUser.set(listItemView: { user in
    //Perform Your Actions
})

You can indeed create a custom listitem UIView file named Custom_User_ListItem_View for more complex or unique list items.

Afterwards, seamlessly integrate this Custom_User_ListItem_View UIView file into the .setListItemView method within CometChatUsers().

You can create a CustomListItemView as a custom UIView. Which we will inflate in setListItemView()

swift

import UIKit
import CometChatUIKitSwift

class CustomListItem: UIView {
    // Initialize UI components
    private var profileImageView: CometChatAvatar = {
        let imageView = CometChatAvatar(image: UIImage())
        imageView.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
        return imageView
    }()

    private var nameLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupUI() {
        addSubview(profileImageView)
        addSubview(nameLabel)

        NSLayoutConstraint.activate([
            // Profile image constraints
            profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
            profileImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            profileImageView.widthAnchor.constraint(equalToConstant: 40),
            profileImageView.heightAnchor.constraint(equalToConstant: 40),

            nameLabel.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 8),
            nameLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
            nameLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }

    func set(user: User) {
        var avatarURL: String?
        if let group = conversation.conversationWith as? Group {
            nameLabel.text = group.name
            avatarURL = group.icon
        }

        if let user = conversation.conversationWith as? User {
            nameLabel.text = user.name
            avatarURL = user.avatar
        }




    self.profileImageView.setAvatar(avatarUrl: avatarURL, with: nameLabel.text)
    }
}

SetLeadingView

You can modify the leading view of a user cell using .set(leadingView:).

Swift

cometChatUsers.set(leadingView: { user in  
    let view = CustomLeadingView()
    return view  
})  

Demonstration

You can create a CustomLeadingView as a custom UIView. Which we will inflate in setLeadingView()

Swift

import UIKit

class CustomLeadingView: UIView {
    
    private let imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.layer.cornerRadius = 10
        return imageView
    }()
    
    private let badgeView: UIView = {
        let view = UIView()
        view.backgroundColor = .orange
        view.layer.cornerRadius = 12
        view.layer.borderWidth = 2
        view.layer.borderColor = UIColor.white.cgColor
        
        let icon = UIImageView(image: UIImage(systemName: "star.fill"))
        icon.tintColor = .white
        icon.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(icon)
        
        NSLayoutConstraint.activate([
            icon.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            icon.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            icon.widthAnchor.constraint(equalToConstant: 14),
            icon.heightAnchor.constraint(equalToConstant: 14)
        ])
        
        return view
    }()
    
    init(image: UIImage?) {
        super.init(frame: .zero)
        imageView.image = image
        
        addSubview(imageView)
        addSubview(badgeView)
        
        imageView.translatesAutoresizingMaskIntoConstraints = false
        badgeView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: topAnchor),
            imageView.leadingAnchor.constraint(equalTo: leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: bottomAnchor),
            
            badgeView.widthAnchor.constraint(equalToConstant: 24),
            badgeView.heightAnchor.constraint(equalToConstant: 24),
            badgeView.bottomAnchor.constraint(equalTo: imageView.bottomAnchor, constant: -4),
            badgeView.trailingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: -4)
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

SetTitleView

You can customize the title view of a user cell using .set(titleView:).

Swift

cometChatUsers.set(titleView: { user in  
    let view = CustomTitleView()
    return view
})  

Demonstration

You can create a CustomTitleView as a custom UIView. Which we will inflate in setTitleView()

Swift

import UIKit

class CustomTitleView: UIView {
    
    private let nameLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.boldSystemFont(ofSize: 18)
        label.textColor = .black
        return label
    }()
    
    private let badgeLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 14)
        label.textColor = .white
        label.backgroundColor = .systemGreen
        label.text = "Teacher"
        label.textAlignment = .center
        label.layer.cornerRadius = 8
        label.layer.masksToBounds = true
        return label
    }()
    
    init(name: String, role: String) {
        super.init(frame: .zero)
        nameLabel.text = name
        badgeLabel.text = " \(role) "
        
        let stackView = UIStackView(arrangedSubviews: [nameLabel, badgeLabel])
        stackView.axis = .horizontal
        stackView.spacing = 8
        stackView.alignment = .center
        
        addSubview(stackView)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
            stackView.topAnchor.constraint(equalTo: topAnchor),
            stackView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

SetTrailView

You can modify the trailing view of a user cell using .set(trailView:).

Swift

cometChatUsers.set(trailView: { user in  
    let view = CustomTrailView() 
    return view  
})  

Demonstration

You can create a CustomTrailView as a custom UIView. Which we will inflate in setTrailView()

Swift

import UIKit

class CustomTrailView: UIView {
    
    private let badgeView: UIView = {
        let view = UIView()
        view.backgroundColor = .purple
        view.layer.cornerRadius = 12
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    private let icon: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "star.fill"))
        imageView.tintColor = .white
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()
    
    private let label: UILabel = {
        let label = UILabel()
        label.text = "PRO"
        label.font = UIFont.boldSystemFont(ofSize: 14)
        label.textColor = .white
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    init() {
        super.init(frame: .zero)
        
        addSubview(badgeView)
        badgeView.addSubview(icon)
        badgeView.addSubview(label)
        
        NSLayoutConstraint.activate([
            badgeView.leadingAnchor.constraint(equalTo: leadingAnchor),
            badgeView.trailingAnchor.constraint(equalTo: trailingAnchor),
            badgeView.topAnchor.constraint(equalTo: topAnchor),
            badgeView.bottomAnchor.constraint(equalTo: bottomAnchor),
            
            icon.centerXAnchor.constraint(equalTo: badgeView.centerXAnchor),
            icon.topAnchor.constraint(equalTo: badgeView.topAnchor, constant: 4),
            icon.widthAnchor.constraint(equalToConstant: 16),
            icon.heightAnchor.constraint(equalToConstant: 16),
            
            label.centerXAnchor.constraint(equalTo: badgeView.centerXAnchor),
            label.topAnchor.constraint(equalTo: icon.bottomAnchor, constant: 2),
            label.bottomAnchor.constraint(equalTo: badgeView.bottomAnchor, constant: -4)
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

SetSubTitleView

You can customize the subtitle view for each users item to meet your requirements

Swift

let cometChatUser = CometChatUsers()
cometChatUser.set(subtitleView: { user in
   let view = CustomSubtitleView()
   return view
})

Example

Demonstration

You can seamlessly integrate this CustomSubtitleView UIView file into the .set(subtitleView:) method within CometChatUsers.

Swift

import UIKit

class CustomSubtitleView: UILabel {
    
    init(lastActiveDate: String) {
        super.init(frame: .zero)
        self.text = "Last Active at: \(lastActiveDate)"
        self.textColor = UIColor.gray
        self.font = UIFont.systemFont(ofSize: 14)
        self.numberOfLines = 1
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

SetLoadingView

You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.

Swift

let loadingIndicator = UIActivityIndicatorView(style: .medium)  
loadingIndicator.startAnimating()  
cometChatUsers.set(loadingView: loadingIndicator)  

SetErrorView

You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.

Swift

let errorLabel = UILabel()  
errorLabel.text = "Something went wrong!"  
errorLabel.textColor = .red  
cometChatUsers.set(errorView: errorLabel)  

SetEmptyView

You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no user are available.

Swift

let emptyLabel = UILabel()  
emptyLabel.text = "No users found"  
emptyLabel.textColor = .gray  
emptyLabel.textAlignment = .center  
cometChatUsers.set(emptyView: emptyLabel)  

Chat & Calling

Extend

UI Kits

SDKs

Widgets

APIs

Overview​

Usage​

Integration​

Actions​

set(onItemClick:)​

set(OnItemLongClick:)​

3. set(onBack:)​

4. set(onSelection:)​

5. set(onError:)​

6. set(onEmpty:)​

7. setOnLoad​

Filters​

1. UserRequestBuilder​

2. SearchRequestBuilder​

Events​

Customization​

Style​

1. Users Style​

Functionality​

Advance​

SetOptions​

AddOptions​

SetListItemView​

SetLeadingView​

SetTitleView​

SetTrailView​

SetSubTitleView​

SetLoadingView​

SetErrorView​

SetEmptyView​

Overview

Usage

Integration

Actions

set(onItemClick:)

set(OnItemLongClick:)

3. set(onBack:)

4. set(onSelection:)

5. set(onError:)

6. set(onEmpty:)

7. setOnLoad

Filters

1. UserRequestBuilder

2. SearchRequestBuilder

Events

Customization

Style

1. Users Style

Functionality

Advance

SetOptions

AddOptions

SetListItemView

SetLeadingView

SetTitleView

SetTrailView

SetSubTitleView

SetLoadingView

SetErrorView

SetEmptyView