Group Details
CometChatDetails is a component that provides additional information and settings related to a specific group.
The details screen includes the following elements and functionalities:
- Group Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
- 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.
- 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>