Group Details

Group Details — CometChat documentation.

CometChatDetails is a component that provides additional information and settings related to a specific group.

The details screen includes the following elements and functionalities:

1. Group Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
2. Group Chat Features: It provides additional functionalities for managing the group. This includes options to add or remove participants, assign roles or permissions, and view group-related information.
3. Group Actions: This offers actions related to the group, such as leaving the group, or deleting the group.

Properties

Group

You can view details of this particular group

Name	Type	Description
group	CometChat.Group	View details of this particular CometChat group

Title

Title for the component

Name	Type	Description
title	string	Heading text for the component

Asset URLs

Custom asset URL used for graphical representation

Name	Type	Description
privateGroupIcon	string	Asset URL for the icon representing private groups
protectedGroupIcon	string	Asset URL for the icon representing password protected groups
closeButtonIconURL	string	Asset URL for the close icon

Data / Templates

Pre-defined structure to serve as a starting point to create the details component.

Name	Type	Description
data	CometChatDetailsTemplate	Data model that serve as a starting point of the details component for a particular user

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.
customProfileView	Function as PropType<(user?: CometChat.User) => ViewType>	User-defined component to customise user profile view.

Toggle profile view

Switch to hide or show the default user profile.

Name	Type	Description
hideProfile	boolean	When set to true, the user profile view will be hidden

Function callbacks

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

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

Configurations

Name	Type	Description
groupMembersConfiguration	GroupMembersConfiguration	Configurable properties of the CometChatGroupMembers component
addMembersConfiguration	AddMembersConfiguration	Configurable properties of the CometChatAddMembers component
bannedMembersConfiguration	BannedMembersConfiguration	Configurable properties of the CometChatBannedMembers component
transferOwnershipConfiguration	TransferOwnershipConfiguration	Configurable properties of the CometChatTransferOwnership 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
leaveDialogStyle	ConfirmDialogStyle	Styling properties and values of the ConfirmDialog component
detailsStyle	DetailsStyle	Styling properties and values of the Details component

Usage

Vue

//Group with guid=hello_group
const GUID = "hello_group";
const groupName = "Hello Group!";
const groupType = CometChat.GROUP_TYPE.PUBLIC;
const password = "";

var group = new CometChat.Group(GUID, groupName, groupType, password);

//Pass the user object to the details component
<CometChatDetails [group]="group"></CometChatDetails>