> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Log With Details

> Call Log With Details — CometChat documentation.

## Overview

The `CometChatCallLogsWithDetails` is a [Composite Widget](/ui-kit/flutter/v4/components-overview#composite-components) encompassing widgets such as [Call Logs](/ui-kit/flutter/v4/call-logs) and [Call Log Details](/ui-kit/flutter/v4/call-log-details). Both of these widget contributes to the functionality and structure of the overall `CallLogsWithDetails` widget.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/UlRk7SYYn7zdv3js/images/568043ba-call_logs_with_details_overview_cometchat_screens-6e0170654641e6538460b1d4acc3d300.png?fit=max&auto=format&n=UlRk7SYYn7zdv3js&q=85&s=f5e3b0e8ee6d237d80479f8bb471cb9f" alt="Image" width="4498" height="3121" data-path="images/568043ba-call_logs_with_details_overview_cometchat_screens-6e0170654641e6538460b1d4acc3d300.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/ZgtHsaNQApHuht0z/images/bedbe17d-call_logs_with_details_overview_cometchat_screens-d860acfba60574defe592c1b81f47899.png?fit=max&auto=format&n=ZgtHsaNQApHuht0z&q=85&s=30221b9905fc4b317e48064b43992f7a" alt="Image" width="4498" height="3121" data-path="images/bedbe17d-call_logs_with_details_overview_cometchat_screens-d860acfba60574defe592c1b81f47899.png" />
  </Tab>
</Tabs>

| Widgets                                                 | Description                                                                                                                                                                                                                                                     |
| ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Call Logs](/ui-kit/flutter/v4/call-logs)               | The `Call Logs` widget is designed to show the list of Call Log available . By default, names are shown for all listed users, along with their avatar if available.                                                                                             |
| [Call Log Details](/ui-kit/flutter/v4/call-log-details) | The `Call Log Details` widget is designed to displays all the information related to a call. This widget displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. |

***

## Usage

### Integration

`CometChatCallLogsWithDetails` is a composite widget that seamlessly integrates into your application. You can push it onto the navigation stack using a navigation controller. This allows for easy navigation and efficient display of call log details within your application's interface.

You can launch `CometChatCallLogsWithDetails` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatCallLogsWithDetails`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogsWithDetails()));
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatCallLogsWithDetails` as a Widget in the build Method

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
    import 'package:flutter/material.dart';

    class CallLogWithDetailsExample extends StatefulWidget {
      const CallLogWithDetailsExample({super.key});

      @override
      State<CallLogWithDetailsExample> createState() => _CallLogWithDetailsExampleState();
    }

    class _CallLogWithDetailsExampleState extends State<CallLogWithDetailsExample> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: CometChatCallLogsWithDetails(),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/android/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

##### 1. onItemClick

This method proves valuable when users seek to override `onItemClick` functionality within `CometChatCallLogsWithDetails`, empowering them with greater control and customization options.

The `onItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
        callLogsConfiguration: CallLogsConfiguration(
          onItemClick: (callLog) {
            // TODO("Not yet implemented")
          },
        )
    )
    ```
  </Tab>
</Tabs>

***

##### 2. onError

You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
        callLogsConfiguration: CallLogsConfiguration(
          onError: (e) {
            // TODO("Not yet implemented")
          },
        ),
        callLogDetailConfiguration: CallLogDetailsConfiguration(
          onError: (e) {
            // TODO("Not yet implemented")
          },
        ),
    )
    ```
  </Tab>
</Tabs>

***

##### 2. onBack

You can customize this behavior by using the provided code snippet to override the `onBack` and improve error handling.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
        callLogsConfiguration: CallLogsConfiguration(
          onBack: () {
            // TODO("Not yet implemented")
          },
        ),
        callLogDetailConfiguration: CallLogDetailsConfiguration(
          onBack: () {
            // TODO("Not yet implemented")
          },
        ),
    )
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.

While the `CometChatCallLogsWithDetails` widget does not have filters, its widgets do, For more detail on individual filters of its widget refer to [Call Logs](/ui-kit/android/call-logs) and [CometChatCallLogsWithDetails](/ui-kit/android/call-logs).

By utilizing the [Configurations](#configurations) object of its widgets, you can apply filters.

##### 1. CallLogRequestBuilder

The [CallLogRequestBuilder](/ui-kit/android/call-logs) enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in [CallLogRequestBuilder](/ui-kit/android/call-logs)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
      callLogsConfiguration: CallLogsConfiguration(
        callLogsRequestBuilder: CallLogRequestBuilder()
          ..limit = 10
          ..hasRecording = true,
      ),
    )
    ```
  </Tab>
</Tabs>

List of properties exposed by `CallLogRequestBuilder`

| **Property**       | Description                                                 | Code                     |
| ------------------ | ----------------------------------------------------------- | ------------------------ |
| **Auth Token**     | Sets the authentication token.                              | `authToken: String?`     |
| **Call Category**  | Sets the category of the call.                              | `callCategory: String?`  |
| **Call Direction** | Sets the direction of the call.                             | `callDirection: String?` |
| **Call Status**    | Sets the status of the call.                                | `callStatus: String?`    |
| **Call Type**      | Sets the type of the call.                                  | `callType: String?`      |
| **Guid**           | Sets the unique ID of the group involved in the call.       | `guid: String?`          |
| **Has Recording**  | Indicates if the call has a recording.                      | `hasRecording: bool`     |
| **Limit**          | Sets the maximum number of call logs to return per request. | `limit: int`             |
| **Uid**            | Sets the unique ID of the user involved in the call.        | `uid: String?`           |

***

### Events

[Events](/ui-kit/android/components-overview#events) are emitted by a `Widget`. 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 `CometChatCallLogsWithDetails` does not produce any events but its subwidget does.

***

## Customization

To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using **Style** you can **customize** the look and feel of the widget in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the widget.

It's important to note that while `CometChatCallLogsWithDetails` does not provide its own specific styling options, each individual widget contained within it offers its own set of styling attributes.

You can also customize its widget styles. For more details on individual widget styles, you can refer [Call Logs Styles](/ui-kit/flutter/v4/call-logs#1-calllogs-style) and [Call Log Details Styles](/ui-kit/flutter/v4/call-log-details#1-calllogdetails-style).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
        callLogsConfiguration: CallLogsConfiguration(
            callLogsStyle: CallLogsStyle(
                // Add here CallLog Style
            ),
        ),
        callLogDetailConfiguration: CallLogDetailsConfiguration(
            detailStyle: CallLogDetailsStyle(
                // Add here CallLogDetails Style
            ),
        ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android (Call Logs Style)">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/hS2ODI36gzqSC7wJ/images/b439e694-call_logs_style_cometchat_screens-31c52aac917624f46c12148fafb1b41a.png?fit=max&auto=format&n=hS2ODI36gzqSC7wJ&q=85&s=c730cc0f4233a85e2ec96248af23d3d3" alt="Image" width="4498" height="3121" data-path="images/b439e694-call_logs_style_cometchat_screens-31c52aac917624f46c12148fafb1b41a.png" />
  </Tab>

  <Tab title="Android (Call Log Details Style)">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/2IblOTiSDtb-DzS7/images/fefbf0b7-call_logs_details_style_cometchat_screens-66930607b4689dee397f63f4f08e4b39.png?fit=max&auto=format&n=2IblOTiSDtb-DzS7&q=85&s=b65f5345def26ed1d83786a0f82a6f3b" alt="Image" width="4498" height="3121" data-path="images/fefbf0b7-call_logs_details_style_cometchat_screens-66930607b4689dee397f63f4f08e4b39.png" />
  </Tab>

  <Tab title="iOS (Call Logs Style)">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/hS2ODI36gzqSC7wJ/images/b75e1dc5-call_logs_style_cometchat_screens-6814aa0f4d5ff13e0209282183593cb3.png?fit=max&auto=format&n=hS2ODI36gzqSC7wJ&q=85&s=b5a0707a3acf8e05b6925f91d3dd5d69" alt="Image" width="4498" height="3121" data-path="images/b75e1dc5-call_logs_style_cometchat_screens-6814aa0f4d5ff13e0209282183593cb3.png" />
  </Tab>

  <Tab title="iOS (Call Log Details Style)">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/H2Jrd_-HLEdrybSX/images/ec701158-call_logs_details_style_cometchat_screens-96016f8d7c7ceab8d44e5b979ac5e64e.png?fit=max&auto=format&n=H2Jrd_-HLEdrybSX&q=85&s=b7a2a7b052e4ce310a5b77ec97450004" alt="Image" width="4498" height="3121" data-path="images/ec701158-call_logs_details_style_cometchat_screens-96016f8d7c7ceab8d44e5b979ac5e64e.png" />
  </Tab>
</Tabs>

Styles can be applied to SubWidgets using their respective [configurations](#configurations).

***

### Functionality

These are a set of **small functional customizations** that allow you to **fine-tune** the overall experience of the widget. With these, you can **change text**, set **custom icons**, and toggle the **visibility** of UI elements.

You can also customize its widget functionality. For more details on individual widget functionality, you can refer [Call Logs Functionality](/ui-kit/flutter/v4/call-logs#functionality) and [Call Log Details Functionality](/ui-kit/flutter/v4/call-log-details#functionality).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
        callLogsConfiguration: CallLogsConfiguration(
            // CallLog functionality
        ),
        callLogDetailConfiguration: CallLogDetailsConfiguration(
            // CallLogDetails functionality
        ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android (Call Logs Functionality)">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/hS2ODI36gzqSC7wJ/images/b63f7edc-call_logs_functionality_cometchat_screens-9440a7269b6a247eec0ea0b0be9853d7.png?fit=max&auto=format&n=hS2ODI36gzqSC7wJ&q=85&s=89f1805cc712fd7b87a38b5cdc55c0a9" alt="Image" width="4498" height="3121" data-path="images/b63f7edc-call_logs_functionality_cometchat_screens-9440a7269b6a247eec0ea0b0be9853d7.png" />
  </Tab>

  <Tab title="Android Functionality">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/jFxtGVgb6H4XYgC5/images/dae5eacf-call_logs_details_functionality_cometchat_screens-c02f994cd79d06ce912f7072abfe9bd7.png?fit=max&auto=format&n=jFxtGVgb6H4XYgC5&q=85&s=0a5e07eb977c062ffe983e02e59bc56f" alt="Image" width="4498" height="3121" data-path="images/dae5eacf-call_logs_details_functionality_cometchat_screens-c02f994cd79d06ce912f7072abfe9bd7.png" />
  </Tab>

  <Tab title="iOS (Call Logs Functionality)">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/TL-Cugoq3mfKvxoh/images/7d1ac343-call_logs_functionality_cometchat_screens-6da1c65caba38476d7a76ef530beef6d.png?fit=max&auto=format&n=TL-Cugoq3mfKvxoh&q=85&s=59d72cc275cb7e704f2d3aa56fac5bf7" alt="Image" width="4498" height="3121" data-path="images/7d1ac343-call_logs_functionality_cometchat_screens-6da1c65caba38476d7a76ef530beef6d.png" />
  </Tab>

  <Tab title="iOS (Call Log Details Functionality)">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/jFxtGVgb6H4XYgC5/images/d9eae8db-call_logs_details_functionality_cometchat_screens-6d66f1cc33fc2fb322fe5011eb7dbb06.png?fit=max&auto=format&n=jFxtGVgb6H4XYgC5&q=85&s=9f2442450665d9584b57915a3498a6b3" alt="Image" width="4498" height="3121" data-path="images/d9eae8db-call_logs_details_functionality_cometchat_screens-6d66f1cc33fc2fb322fe5011eb7dbb06.png" />
  </Tab>
</Tabs>

Functionality can be applied to SubWidgets using their respective [configurations](#configurations).

***

### Advanced

For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own views, layouts, and UI elements and then incorporate those into the widget.

For the details of individual widgets' advanced-level customization, you can refer to [Call Logs Advanced Section](/ui-kit/flutter/v4/call-logs#advanced) and [Call Log Details Advanced Section](/ui-kit/flutter/v4/call-log-details#advanced).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
        callLogsConfiguration: CallLogsConfiguration(
            // CallLog advanced-level customization
        ),
        callLogDetailConfiguration: CallLogDetailsConfiguration(
            // CallLogDetails advanced-level customization
        ),
    )
    ```
  </Tab>
</Tabs>

By utilizing the [Configuration](#configurations) object of each widget, you can apply advanced-level customizations to the GroupsWithMessages.

***

## Configurations

[Configurations](/ui-kit/flutter/v4/components-overview#configurations) offer the ability to customize the properties of each widget within a Composite Widget.

`CometChatCallLogsWithDetails` has [Call Logs](/ui-kit/flutter/v4/call-logs) and [Call Log Details](/ui-kit/flutter/v4/call-log-details) widget. Hence, each of these widgets will have its individual `Configuration`.

* `Configurations` expose properties that are available in its individual widgets.

#### Call Logs

You can customize the properties of the [Call Logs](/ui-kit/flutter/v4/call-logs) by making use of the `CallLogsConfiguration`. You can accomplish this by employing the `callLogsConfiguration` props as demonstrated below:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
        callLogsConfiguration: CallLogsConfiguration(
            // Override the properties of CallLog
        )
    )
    ```
  </Tab>
</Tabs>

All exposed properties of `CallLogsConfiguration` can be found under [Call Logs](/ui-kit/flutter/v4/call-logs). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

***

#### Call Log Details

You can customize the properties of the [Call Log Details](/ui-kit/flutter/v4/call-log-details) widget by making use of the `CallLogDetailsConfiguration`. You can accomplish this by employing the `callLogDetailConfiguration` props as demonstrated below:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogsWithDetails(
        callLogDetailConfiguration: CallLogDetailsConfiguration(
            // Override the properties of CallLogDetails
        )
    )
    ```
  </Tab>
</Tabs>

All exposed properties of `CallLogDetailsConfiguration` can be found under [Call Log Details](/ui-kit/flutter/v4/call-log-details#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

***