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
This involves keywords, phrases, or criteria into the search bar and retrieving relevant results based on the search query.| 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. |
Loading state
This refers to the state of the groups 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 groups 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 groups 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
This provides set of methods that allow developers to easily create and configure groups before fetching them for the intended recipients.| Name | Type | Description |
|---|---|---|
| searchRequestBuilder | CometChat.GroupsRequestBuilder | Class that allows you to set various parameters to the GroupsRequest class based on which the groups are searched |
| groupsRequestBuilder | CometChat.GroupsRequestBuilder | Class that allows you to set various parameters to the GroupsRequest class based on which the groups are fetched |
Toggle
Switch to hide or show the separators, and error message.| 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. |
activeGroup
This refers to a group which has an ongoing interactions and participation from its members.| Name | Type | Description |
|---|---|---|
| activeGroup | CometChat.Group | Group where where members are actively engaged in discussions |
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<(groups:CometChat.Group[]) => void> | Method invoked which returns the selected groups. |
Custom view
UI component created and customised by the developer to meet your design or functional requirements.| Name | Type | Description |
|---|---|---|
| subtitleView | Function as PropType<(group: CometChat.Group) => ViewType> | User-defined component to customise the secondary text shown in the default group 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 groups 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<(group:CometChat.Group) => CometChatOption[]> | User-defined actions which appears for each group 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<(group:CometChat.Group) => void> | Override the method that is invoked when user clicks on a individual item in the list |
| onError | Function as PropType<(error: CometChat.CometChatException) => void> | Override the method that is invoked when an error is encountered within the component |
Style
Styling properties and values of all the involved 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 |
| groupsStyle | GroupsStyle | Styling properties and values of the Groups component |
Usage
CometChatGroups can be launched by adding the following code snippet.- Vue