Users

This component lists all the users registered on CometChat and also allows users to search for other users. It enables users to find and locate specific individuals based on various search criteria or parameters. Online users are represented with a green colored dot.

Properties

Title

Heading text for the component

Name	Type	Description
title	string	Heading text for the component
titleAlignment	string	Alignment of the heading text for the component

Search

Name	Type	Description
searchPlaceholder	string	Sample text that appears in the search input as a prompt or suggestion
searchIconURL	string	Asset URL for the search icon.
hideSearch	boolean	When set to true, hides the search input.

Section Header

Name	Type	Description
sectionHeaderField	string
hideSectionSeparator	boolean	When set to true, hides the separator between the individual sections in the list.
showSectionHeader	boolean	When set to true, displays the header between the individual sections in the list.

Loading state

This refers to the state of the conversations component when it is actively retrieving or fetching data.

Name	Type	Description
loadingIconURL	string	Asset URL for the loading indicator icon
loadingStateView	view	User-defined component to customise the loading indicator

Empty state

This refers to the state of the conversations component when it has no content or data to display

Name	Type	Description
emptyStateText	string	The textual content displayed in the empty state of the component.
emptyStateView	view	User-defined component to customise the empty state of the component.

Error state

This refers to the state of the conversations component when an error occurs during the retrieval of the data.

Name	Type	Description
errorStateText	string	The textual content displayed in the error state of the component.
errorStateView	view	User-defined component to customise the error state of the component.

RequestBuilder

Name	Type	Description
searchRequestBuilder	CometChat.UsersRequestBuilder	Class that allows you to set various search parameters to the UsersRequest class based on which the users are fetched
usersRequestBuilder	CometChat.UsersRequestBuilder	Class that allows you to set various parameters to the UsersRequest class based on which the users are fetched

Toggle

Switch to hide or show the separators, and user presence.

Name	Type	Description
hideError	boolean	When set to true, hides the error messages displayed within the component
hideSeparator	boolean	When set to true, hides the separator between the individual elements in the list.
disableUsersPresence	boolean	When set to true, Users will not be able to see whether a particular user is currently online or offline.

activeUser

This refers to a user who is actively engaged.

Name	Type	Description
activeUser	CometChat.User	User who is currently active.

selectionMode

Allows user to choose individual or multiple items.

Name	Type	Description
selectionMode	SelectionMode	Allows user to select individual or multiple items for applying specific operations.
onSelect	Function as PropType<(users:CometChat.User[]) => void>	Method invoked which returns the selected users.

Custom view

UI component created and customised by the developer to meet your design or functional requirements.

Name	Type	Description
subtitleView	Function as PropType<(user: CometChat.User) => ViewType>	User-defined component to customise the secondary text shown in the default user profile.

Menu

UI component created and customised by the developer to meet your design or functional requirements representing the button actions in the header section.

Name	Type	Description
menu	view	User-defined component to showcase options related to the users in the header section.

Actions

This includes action buttons or icons that allow users to perform common actions or tasks, such as muting the notification etc.

Name	Type	Description
options	Function as PropType<(user:CometChat.User) => CometChatOption[]>	User-defined actions which appears for each user on mouseover.

Function Callback

Functions that can be invoked by the user in response to a specific event or condition.

Name	Type	Description
onItemClick	Function as PropType<(user:CometChat.User) => void>	Override the method that is invoked when user clicks on a particular user
onError	Function as PropType<(error: CometChat.CometChatException) => void>	Override the method that is invoked when an error is encountered within the details component

Style

Styling properties and values of all the child components

Name	Type	Description
avatarStyle	AvatarStyle	Styling properties and values of the Avatar component
statusIndicatorStyle	StatusIndicator	Styling properties and values of the StatusIndicator component
listItemStyle	ListItemStyle	Styling properties and values of the ListItem component
usersStyle	UsersStyle	Styling properties and values of the Users component

Usage

CometChatUsers can be launched by adding the following code snippet.

Vue

const getSubtitleView = (user:CometChat.User) => {
  return {
    html: `<p>${user.getUid()}</p>`,
  };
};

const getEmptyStateView = () => {
  return {
  	html: "<p>CustomEmptyView</p>",
  };
};

const getLoadingStateView = () => {
  return {
  	componentName: "CustomLoadingViewComponent",
  };
};

const getErrorStateView = () => {
  return {
  	componentName: "CustomErrorViewComponent",
  };
};

let emptyStateText = "users not found";
let errorStateText = "somet thing went wrong";
let DeleteIcon = "./assets/DeleteIcon.svg";

function options(user: CometChat.User) {

  return [
    new CometChatOption({
    	id: "id",
    	title: "Delete user",
    	iconURL: DeleteIcon,
    	iconTint: "blue",
    	onClick: () => //do something,
    }),
  ];
}

<CometChatUsers
  :subtitleView="getSubtitleView"
  :emptyStateText="emptyStateText"
  :errorStateText="errorStateText"
  :emptyStateView="getEmptyStateView"
  :loadingStateView="getLoadingStateView"
  :errorStateView="errorStateView"
  :options="options"></CometChatUsers>

---