Call Log Details
is a Composite Component that displays all the information related to a call. This component displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. Also, it has buttons to start a new call.
Components | Description |
---|---|
Call Log History | The Call Log History component shows a paginated list of all the calls between the logged-in user & another user or group. This allows the user to see all the calls with a specific user/group they have initiated/received/missed. |
Call Log Recordings | The Call Log Recordings component shows a paginated list of recordings of a particular call. |
Call Log participants | The Call Log Participants component shows a separate view that displays comprehensive information about Call. |
onBackClick
is triggered when you click on the back button of the Call Log Details component. You can override this action using the following code snippet.
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.
The Call Log Details
component does not have any exposed filters.
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.
The CallLogDetails
does not produce any events.
CallLogDetails
component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
callLogDetailsStyle
to the Call Log Details Component to customize the styling.
CallLogDetailsStyle
:
Property | Description | Code |
---|---|---|
border | Used to set border | border?: string, |
borderRadius | Used to set border radius | borderRadius?: string; |
background | Used to set background colour | background?: string; |
height | Used to set height | height?: string; |
width | Used to set width | width?: string; |
titleFont | Used to set title font | titleFont?: string, |
titleColor | Used to set title color | titleColor?: string; |
nameTextFont | Used to set name text font | nameTextFont?: string, |
nameTextColor | Used to set name text color | nameTextColor?: string; |
backIconTint | Used to set color of the back icon | backIconTint?: string; |
Avatar
component within the Call Log Details
Component, you can use the following code snippet. For more information you can refer Avatar Styles.
Call Log Details
component.
Property | Description | type |
---|---|---|
title | Used to set custom title | title?: string, |
backIconUrl | Used to set custom back icon URL | backIconUrl?: string; |
call | Call data object | call: CallLog; |
data | Override the list of templates which is used for displaying relevant options. | data?: (callLog: any, loggedInUser: CometChat.User, theme: CometChatTheme) => CometChatDetailsTemplate[]; |
CometChatDetailsTemplate
offers a structure for organizing information in the Call Log Details component. It serves as a blueprint, defining how call log related details are presented. This structure allows for customization and organization within the CometChat interface.
This defines the structure of template data for the call log details component.
Name | Type | Description |
---|---|---|
id | String | Identifier for the template |
title | String | Heading text for the template |
titleFont | String | Sets all the different properties of font for the title text |
titleColor | String | Sets the foreground color of title text |
itemSeparatorColor | String | Sets the color of the template’s option separator |
hideItemSeparator | Boolean | When set to true, hides the separator under each option in a template |
sectionSeparatorColor | String | Sets the color of the template separator |
hideSectionSeparator | Boolean | When set to true, hides the separator for the template |
options | CometChatDetailsTemplate.options?: ((loggedInUser: User | null, group: Group | null, section: string) => CometChatDetailsOption[]) | null | undefined | defines the structure for individual options |
DetailsOption
defines the structure for individual options within the CometChat Call Log Details component, facilitating customization and functionality for user interactions.
This defines the structure of each option for a template in the details component.
Name | Type | Description |
---|---|---|
id | String | Identifier for the template option |
title | String | Heading text for the template option |
tail | any | User-defined UI component to customise the trailing view for each option in a template. |
customView | any | User-defined UI component to override the default view for the option. |
onClick | ((item: CometChat.User | CometChat.Group) => void) | null; | Function invoked when user clicks on the option. |
titleFont | String | Sets all the different properties of font for the title text |
titleColor | String | Sets the foreground colour of title text |
iconURL | String | Image url for the icon to symbolise an option |
iconTint | String | Color applied to the icon of the option |
backgroundColor | String | Color applied to the background of the option |
Call Log History
, Call Log Recordings
and Call Log Participants
component. Hence, each of these components will have its individual Configuration
.
Configurations
expose properties that are available in its individual components.callLogHistoryConfiguration
. You can accomplish this by employing the callLogHistoryConfiguration
props as demonstrated below:
All exposed properties of CallLogHistoryConfiguration
can be found under Call Log History. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Example
Let’s say you want to change the style of the Call Log History subcomponent and, in addition, you only want to change the date pattern to show day date and time.
You can modify the style using the callLogHistoryStyle
property, change the date pattern using datePattern
property.
callLogRecordingsConfiguration
. You can accomplish this by employing the callLogRecordingsConfiguration
props as demonstrated below:
All exposed properties of CallLogRecordingsConfiguration
can be found under Call Log Recordings. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Example
Let’s say you want to change the style of the Call Log Recordings subcomponent and, in addition, you only want to hide the download button.
You can modify the style using the callLogRecordingsStyle
property, and hide the download button using hideDownloadButton
property.
callLogParticipantsConfiguration
. You can accomplish this by employing the callLogParticipantsConfiguration
props as demonstrated below:
All exposed properties of CallLogParticipantsConfiguration
can be found under Call Log Participants. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Example
Let’s say you want to change the style of the Call Log Participants subcomponent and, in addition, you only want to change the back icon.
You can modify the style using the callLogParticipantsStyle
property, and change the back icon using backIconUrl
property.