Skip to main content

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:

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.

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

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

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.

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.

5. set(onError:)
This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatUsers.

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

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.

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 Example In the example below, we are applying a filter to the UserList based on Friends.
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.

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
Usage
Swift

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
Instance level styling
List of properties exposed by MessageListStyle

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

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.

AddOptions

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

SetListItemView

With this function, you can assign a custom ListItem to the users Component.
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

SetLeadingView

You can modify the leading view of a user 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 user 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 user 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 users item to meet your requirements
Example Demonstration
You can seamlessly integrate this CustomSubtitleView UIView file into the .set(subtitleView:) method within CometChatUsers.

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