# Layout definition
<a name="layout-definition"></a>

Understanding the structure and components of Profile explorer layouts.

**Topics**
+ [How it works](how-it-works.md)
+ [Widgets](widgets.md)

# How it works
<a name="how-it-works"></a>

Profile explorer offers various widgets to display customer information, layouts are stored as JSON definitions, representing the complete structure and configuration of your dashboard. Each widget and component in your visual layout corresponds to a specific JSON block within this definition.

## Core components
<a name="core-components"></a>

Every component in the layout definition is comprised of five common elements:
+ **Type**
  + Defines the component category
  + Determines how the component renders
  + Examples: BoardItem, Table, KeyValuePair
+ **Id**
  + Unique identifier for each component
  + Used for component tracking and updates
  + Generated automatically when components are created in the builder
+ **Props**
  + Component-specific properties
  + Controls appearance and behavior
  + Contains configuration settings
+ **Children**
  + Nested components or content
  + Defines hierarchical relationships
  + Can contain multiple sub-components
+ **DataSource**
  + Specifies data origin
  + Defines data retrieval parameters
  + Controls data binding for components

## Example layout component definition
<a name="example-layout-component-definition"></a>

The following is a sample JSON structure for a dashboard table component:

```
{
    "Id": "unique-identifier",
    "Type": "BoardItem",
    "Props": {},
    "Children": [
        {
            "Id": "unique-identifier",
            "Type": "Table",
            "Props": {},
            "Children": [
                {
                    "Id": "unique-identifier",
                    "Type": "TextContent",
                    "Props": {},
                    "Children": ["string"]
                }
            ]
        }
    ],
    "DataSource": [
        {
            "Type": "source-type",
            "Params": {}
        }
    ]
}
```

## Dynamic data configuration
<a name="dynamic-data-configuration"></a>

Profile explorer uses template expressions to access and display Customer Profiles data dynamically within your components.

### Single value support
<a name="single-value-support"></a>

For components like Key Value Pairs and Key Metrics, you can access:

#### Standard profile information
<a name="standard-profile-information"></a>

```
{{Customer.<StandardProfileInfo>}}
```

Example usage:
+ `{{Customer.FirstName}}`
+ `{{Customer.LastName}}`
+ `{{Customer.PhoneNumber}}`

#### Calculated Attributes
<a name="calculated-attributes"></a>

```
{{Customer.CalculatedAttributes.<attributeDefinitionName>}}
```

Example usage:
+ `{{Customer.CalculatedAttributes._cases_count}}`
+ `{{Customer.CalculatedAttributes._new_customer}}`

### Tabular data support syntax
<a name="tabular-data-support-syntax"></a>

#### Calculated Attributes
<a name="calculated-attributes-tabular"></a>

```
{{Customer.CalculatedAttributes.DisplayName}}
```

```
{{Customer.CalculatedAttributes.CalculatedAttributeDefinitionName}}
```

#### Segments
<a name="segments"></a>

```
{{Customer.CalculatedAttributes.DisplayName}}
```

```
{{Customer.CalculatedAttributes.SegmentDefinitionName}}
```

#### Profile objects
<a name="profile-objects"></a>

```
{{Customer.ObjectAttributes.<objectTypeName>.<fieldName>}}
```

**Example usage:**
+ `{{Customer.ObjectAttributes.CTR.contactId}}`
+ `{{Customer.ObjectAttributes.Order.orderId}}`

### Implementation examples
<a name="implementation-examples"></a>

#### Single value component
<a name="single-value-component"></a>

```
{
    "Type": "KeyValuePair",
    "Props": {
        "Items": [
            {
                "Label": {
                    "Content": {
                        "Type": "TextContent",
                        "Children": ["Customer Name"]
                    }
                },
                "Value": {
                    "Content": {
                        "Type": "TextContent",
                        "Children": ["{{Customer.FirstName}}"]
                    }
                }
            }
        ]
    }
}
```

#### Tabular component
<a name="tabular-component"></a>

```
{
    "Type": "Table",
    "Props": {
        "ColumnDefinitions": [
            {
                "Cell": {
                    "Content": {
                        "Type": "TextContent",
                        "Children": ["{{Customer.ObjectAttributes.CTR.contactId}}"]
                    }
                },
                "Header": "Contact ID"
            }
        ]
    }
}
```

**Note**  
Ensure that the attributes, objects, and segments you reference exist in your Customer Profiles configuration before using them in your layout.

# Widgets
<a name="widgets"></a>

Explore the different widget types available in Profile explorer.

## Overview
<a name="widgets-overview"></a>

Widgets in Profile explorer are composite elements built from JSON components within your layout definition. While these widgets represent complex JSON structures, our UI builder handles the technical composition automatically, making dashboard management straightforward and accessible.

**Topics**
+ [Overview](#widgets-overview)
+ [Available widgets](#available-widgets)
+ [Default widgets](default-widgets.md)
+ [Custom widgets](custom-widgets.md)

## Available widgets
<a name="available-widgets"></a>
+ Default widgets
  + [Generative AI summary](default-widgets.md#generative-ai-summary)
  + [Customer information](default-widgets.md#customer-information)
  + [Calculated attribute](default-widgets.md#calculated-attribute)
  + [Contacts](default-widgets.md#contacts)
  + [Cases](default-widgets.md#cases-cp)
  + [Orders](default-widgets.md#orders-cp)
  + [Assets](default-widgets.md#assets-cp)
+ Custom widgets
  + [Table](custom-widgets.md#table-widget)
  + [Key value pair](custom-widgets.md#key-value-pair)
  + [Key metric](custom-widgets.md#key-metric)
  + [Donut chart](custom-widgets.md#donut-chart)

# Default widgets
<a name="default-widgets"></a>

Profile explorer comes with a collection of pre-configured widgets designed to work seamlessly with Customer Profiles data. These default widgets offer immediate value with minimal setup, allowing you to build sophisticated dashboards in a few clicks.

![\[Add default widgets in the explorer layout.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/default-widgets-1.png)


## Ready-to-use widgets
<a name="ready-to-use-widgets"></a>
+ [Generative AI summary](#generative-ai-summary)
+ [Customer information](#customer-information)
+ [Calculated attribute](#calculated-attribute)
+ [Contacts](#contacts)
+ [Cases](#cases-cp)
+ [Orders](#orders-cp)
+ [Assets](#assets-cp)

**Note**  
While these widgets come pre-configured, you can still customize them to better match your specific needs. They serve as a starting point to allow for easy onboarding.

## Generative AI summary
<a name="generative-ai-summary"></a>

Profile explorer delivers default AI-powered customer insights that generate concise summaries highlighting key behavioral patterns, provides personalized customer insights based on interaction history and surface actionable recommendations from customer 360 data. The AI-generated summaries help organizations make data-driven decisions by identifying patterns across multiple customer touchpoints, delivering personalized behavioral insights specific to each customer and supporting improved customer experiences and increased loyalty.

![\[Generative AI summary widget.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/generative-ai-summary-1.png)


## Customer information
<a name="customer-information"></a>

The Customer Information widget provides a clear, organized view of standard Customer Profile data using key-value pair components. This default widget automatically displays essential customer information in an easily scannable format.

### Overview
<a name="customer-information-overview"></a>

This widget utilizes the key value pair component to display customer attributes in a structured layout.
+ First name
+ Last name
+ Email Address
+ Phone Number
+ Address
+ Account number
+ Profile ID

### Data
<a name="customer-information-data"></a>

The widget automatically connects to your Customer Profiles domain and pulls information from standard profile attributes. No additional configuration is required for basic functionality.

**Note**: While this widget comes pre-configured with standard profile attributes, you can customize which attributes from the standard Profile are displayed based on your specific needs.

#### Learn more
<a name="customer-information-learn-more"></a>
+ [Standard Profile Definition](standard-profile-definition.md)
+ Key value pair

## Calculated attribute
<a name="calculated-attribute"></a>

The Calculated Attribute widget enables you to display a key metrics component utilizing data from your customer profiles' calculated attributes.

### Overview
<a name="calculated-attribute-overview"></a>

The Calculated Attribute widget enables you to display a key metrics component utilizing data from your customer profiles' calculated attributes.

### Component Features
<a name="component-features"></a>
+ Display calculated metrics as single value indicators

### Example use cases could be
<a name="example-use-cases"></a>
+ Campaigns delivered
+ Cases opened
+ Average call time
+ Channel Preference

### Configuration
<a name="configuration"></a>

Simply select your calculated attribute and choose your preferred display format

**Note**  
Calculated attributes must be configured in your Customer Profiles domain before they can be used in this widget.

**Learn more**
+ Key metric
+ [Set up calculated attributes](customerprofiles-calculated-attributes-admin-website.md)

## Contacts
<a name="contacts"></a>

Built using the Table JSON component, the Contacts widget displays your Customer Profiles contact object data in an organized, tabular format. This widget automatically connects to the Customer Profiles CTR data, showing key contact information and interaction history.

### Features
<a name="contacts-features"></a>
+ View all customer contact events
+ Sort and filter contact records
+ Customize displayed contact fields
+ Access detailed contact information

For more information about Customer Profiles CTR objects, see [Contact record templates in Amazon Connect Customer Profiles](ctr-contact-record-template.md)

## Cases
<a name="cases-cp"></a>

Built using the Table JSON component, the Cases widget displays your Customer Profiles case object data in an organized, tabular format. This widget automatically connects to the Customer Profiles Case data, showing support interactions and case management details.

### Features
<a name="cases-features"></a>
+ View all customer cases
+ Sort and filter case records
+ Customize displayed case fields
+ Access detailed case information

For more information about Customer Profiles Case objects, see [Object type mapping for the standard case in Customer Profiles](object-type-mapping-standard-case.md).

## Orders
<a name="orders-cp"></a>

Built using the Table JSON component, the Orders widget displays your Customer Profiles order object data in an organized, tabular format. This widget automatically connects to the Customer Profiles Order data, showing purchase history and transaction details.

### Features
<a name="orders-features"></a>
+ View all customer order events
+ Sort and filter order records
+ Customize displayed order fields
+ Access detailed order information

For more information about Customer Profiles Order objects, see [Object type mapping for the standard order in Amazon Connect Customer Profiles](object-type-mapping-standard-order.md)

## Assets
<a name="assets-cp"></a>

Built using the Table JSON component, the Assets widget displays your Customer Profiles asset object data in an organized, tabular format. This widget automatically connects to the Customer Profiles Asset data, showing customer-owned products and services.

### Features
<a name="assets-features"></a>
+ View all customer asset records
+ Sort and filter asset data
+ Customize displayed asset fields
+ Access detailed asset information

For more information about Customer Profiles Asset objects, see [Object type mapping for the standard asset in Customer Profiles](object-type-mapping-standard-asset.md)

# Custom widgets
<a name="custom-widgets"></a>

Create tailored dashboard components from the ground up to meet your specific business needs. Custom widgets allow you to build unique visualizations without any predefined data.

![\[Add customer widgets in the Profile explorer layout.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/custom-widgets-1.png)


## Available custom components
<a name="available-custom-components"></a>
+ [Table](#table-widget)
+ [Key value pair](#key-value-pair)
+ [Key metric](#key-metric)
+ [Donut chart](#donut-chart)

## Building custom widgets
<a name="building-custom-widgets"></a>

**Each custom widget can be configured with:**
+ Custom data sources
+ Custom displays
+ Custom fields
+ Custom item interactions

## Table
<a name="table-widget"></a>

The custom table component provides flexible configuration options for displaying your data in a tabular format, with advanced features for interaction and organization.

### Features
<a name="table-features"></a>

1. **Column configurations**
   + Define custom column headers
   + Specify data for each column
   + Set data formatting options
   + Define column placement

1. **Filtering**
   + Quickly filter items within your table

1. **Linking**
   + Connect Resource Links
     + Seamless navigation to:
       + Segments
       + Calculated attributes
     + Opens in new tab
   + **External URL links**
     + Convert row item value into URLs that you can choose
     + Opens in new tab
     + Dynamically generate links based on row data
   + Drawer view links
     + Open detailed information in side drawer
     + View complete record details without leaving the page

1. Data organization
   + Grouping
     + Group rows by specific field names
     + Persistent group settings
   + Sorting
     + Sort by any column field
     + Ascending order organization
     + Persistent sort settings

**Figure 1**

![\[Custom table widget editing example.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/table-features-1.png)


**Figure 2**

![\[Another custom table widget editing example.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/table-features-2.png)


### Example configuration
<a name="table-example-configuration"></a>

```
{
    "Type": "Table",
    "Props": {
        "ColumnDefinitions": [
            {
                "Header": "Table column header"
                "Cell": {
                    "Content": {
                        "Props": {
                            "Variant": "Link",
                            "LinkOptions": {
                                "LinkType": "Drawer"
                            }
                        },
                        "Type": "TextContent",
                        "Children": ["string"]
                    }
                },
            }
        ]
    }
}
```

## Key value pair
<a name="key-value-pair"></a>

The Key Value Pair component enables you to create organized displays of related data points in a flexible, readable format.

### Overview
<a name="key-value-pair-overview"></a>

Create dynamic data displays by defining custom key-value relationships. This component is particularly useful for showing attribute pairs such as:
+ Customer details
+ Account information

### Features
<a name="key-value-pair-features"></a>

1. **Interactive link options**
   + Connect resource links
     + Link directly to related resources
     + Seamless navigation to:
       + Calculated attributes
       + Segments
     + Opens in new tab
   + External URL Links
     + Convert item value into URLs that you can choose
     + Opens in new tab
   + Drawer View Links
     + Open detailed information in side drawer
     + View complete details without leaving the page

1. Column configuration
   + Define 1-4 columns of key-value pairs

1. Organize pairs in logical groupings

**Figure 1**

![\[Custom key value pair widget editing example.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/key-value-pair-features-1.png)


**Figure 2**

![\[Another custom key value pair widget editing example.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/key-value-pair-features-2.png)


### Example configuration
<a name="key-value-pair-example-configuration"></a>

```
{
    "Type": "KeyValuePair",
    "Id": "UniqueId",
    "Props": {
        "Columns": 2,
        "Items": [
            {
                "Label": {
                    "Content": {
                        "Type": "TextContent",
                        "Id": "UniqueId",
                        "Props": {
                            "FontWeight": "bold"
                        },
                        "Children": ["Profile id"]
                    }
                },
                "Value": {
                    "Content": {
                        "Type": "TextContent",
                        "Id": "UniqueId",
                        "Props": {},
                        "Children": ["[string]"]
                    }
                }
            }
        ]
    }
}
```

**Note**  
This component does not currently support `ProfileObjects` in the UI builder.

## Key metric
<a name="key-metric"></a>

The Key Metric component enables you to prominently display critical business metrics, KPIs, and vital statistics in an easily digestible format.

### Overview
<a name="key-metric-overview"></a>

Create high-visibility metric displays that highlight important data points, trends, or status indicators. This component is ideal for showcasing:
+ Performance indicators
+ Critical measurements
+ Status summaries
+ Trend indicators

### Features
<a name="key-metric-features"></a>

1. **Large display text**

1. **Metric format**

1. **Interactive link options**
   + Connect resource links
     + Link directly to related resources
     + Seamless navigation to:
       + Calculated attributes
       + Segments
     + Opens in new tab
   + External URL links
     + Convert item value into URLs that you can choose
     + Opens in new tab
   + Drawer view links
     + Open detailed information in side drawer
     + View complete details without leaving the page

1. **Organize metrics layout**

**Figure 1**

![\[Custom key metric widget editing example.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/key-metric-features-1.png)


**Figure 2**

![\[Another custom key metric widget editing example.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/key-metric-features-2.png)


### Example configuration
<a name="key-metric-example-configuration"></a>

```
{
    "Type": "KeyMetrics",
    "Props": {
        "MetricDefinitions": [
            {
                "MetricLabel": "Total Revenue",
                "MetricValue": {
                    "Content": {
                        "Type": "TextContent",
                        "Props": {
                            "Format": "USD",
                            "FontSize": "large",
                            "FontWeight": "bold"
                        },
                        "Children": ["[string]"]
                    }
                },
                "Columns": 1
            }
        ]
    }
}
```

**Note**  
This component does not currently support `ProfileObjects` in the UI builder.

## Donut chart
<a name="donut-chart"></a>

The donut chart component enables visualization of sentiment scoring through a circular donut chart.

### Overview
<a name="donut-chart-overview"></a>

Create dynamic sentiment visualizations by defining custom scoring criteria. This component is particularly useful for showing:
+ Success metrics
+ Achievement rates
+ Risk assessments
+ Performance indicators

### Features
<a name="donut-chart-features"></a>

1. Sentiment Analysis Options
   + Positive Sentiment
     + Starts from zero
     + Tracks achievement against criteria:
       + Custom point values
       + Color-coded segments
       + Grey for unmet conditions
     + Shows success rate percentage
   + Negative Sentiment
     + Starts from maximum value
     + Tracks deductions:
       + Color-coded segments
       + Point reduction system
       + Green for remaining value
     + Shows final score

1. Calculated attribute value

1. Operator Options
   + Equal To
   + Not Equal To
   + Greater Than
   + Less Than

1. Value Condition

1. Allotted points per condition

**Figure 1: Positive sentiment example**

![\[Positive sentiment widget editing example.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/donut-chart-features-1.png)


**Figure 2: Negative sentiment example**

![\[Negative sentiment widget editing example.\]](http://docs.aws.amazon.com/connect/latest/adminguide/images/donut-chart-features-2.png)


### Example configuration
<a name="donut-chart-example-configuration"></a>

```
{
    "Type": "DonutChart",
    "Props": {
        "Variant": "PositiveSentiment",
        "ConditionDefinitions": [
            {
                "Title": "Customer Satisfaction",
                "Color": "#4CAF50",
                "CalculatedAttribute": "satisfaction_score",
                "Operator": "GREATER_THAN",
                "ValueCondition": 8,
                "Points": 10
            }
        ]
    }
}
```

**Note**  
**Donuts only support Calculated attributes as a data source at this time.**
**All condition definitions must include a title, color, calculated attribute, operator, value condition, and points value.**