本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 自定义小组件
<a name="custom-widgets"></a>

从头开始创建量身定制的控制面板组件，以满足您的特定业务需求。自定义小组件可让您在没有任何预定义数据的情况下构建独特的可视化效果。

![\[在配置文件浏览器布局中添加客户小组件。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/custom-widgets-1.png)


## 可用的自定义组件
<a name="available-custom-components"></a>
+ [表](#table-widget)
+ [键值对](#key-value-pair)
+ [关键指标](#key-metric)
+ [圆环图](#donut-chart)

## 构建自定义小组件
<a name="building-custom-widgets"></a>

**可以为每个自定义小组件配置：**
+ 自定义数据来源
+ 自定义显示
+ 自定义字段
+ 自定义项目互动

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

自定义表组件提供灵活的配置选项，用于以表格式显示数据，并具有用于互动和整理的高级功能。

### 功能
<a name="table-features"></a>

1. **列配置**
   + 定义自定义列标题
   + 为每列指定数据
   + 设置数据格式化选项
   + 定义列位置

1. **过滤**
   + 快速筛选表中的项目

1. **链接**
   + 连接资源链接
     + 无缝导航至：
       + Segments
       + 计算的属性
     + 在新选项卡中打开
   + **外部 URL 链接**
     + 将行项目值转换为 URLs 可以选择的值
     + 在新选项卡中打开
     + 根据行数据动态生成链接
   + 抽屉式视图链接
     + 在侧边抽屉中打开详细信息
     + 无需离开页面即可查看完整的记录详情

1. 数据整理
   + 分组
     + 按特定字段名称对行进行分组
     + 持久性组设置
   + 排序
     + 按任意列字段排序
     + 升序整理
     + 持久性排序设置

**图 1**

![\[自定义表小组件编辑示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/table-features-1.png)


**图 2**

![\[另一个自定义表小组件编辑示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/table-features-2.png)


### 示例配置
<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"]
                    }
                },
            }
        ]
    }
}
```

## 键值对
<a name="key-value-pair"></a>

利用“键值对”组件，您能够以灵活、易于阅读的格式创建相关数据点的有条理显示。

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

通过定义自定义键值关系来创建动态数据显示。此组件对于显示属性对特别有用，例如：
+ 客户详细信息
+ 账户信息

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

1. **交互式链接选项**
   + 连接资源链接
     + 直接链接到相关资源
     + 无缝导航至：
       + 计算的属性
       + Segments
     + 在新选项卡中打开
   + 外部 URL 链接
     + 将项目值转换为您可以选择 URLs 的值
     + 在新选项卡中打开
   + 抽屉式视图链接
     + 在侧边抽屉中打开详细信息
     + 无需离开页面即可查看完整详情

1. 列配置
   + 定义 1-4 列键值对

1. 按逻辑分组整理配对

**图 1**

![\[自定义键值对小组件编辑示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/key-value-pair-features-1.png)


**图 2**

![\[另一个自定义键值对小组件编辑示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/key-value-pair-features-2.png)


### 示例配置
<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]"]
                    }
                }
            }
        ]
    }
}
```

**注意**  
此组件目前在用户界面生成器中不支持 `ProfileObjects`。

## 关键指标
<a name="key-metric"></a>

关键指标组件使您能够以易于理解的格式突出显示关键业务指标和重要统计数据。 KPIs

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

创建高可见度指标显示，以突出显示重要的数据点、趋势或状态指标。此组件非常适合展示：
+ 性能指标
+ 关键测量值
+ 状态摘要
+ 趋势指标

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

1. **大的显示文字**

1. **指标格式**

1. **交互式链接选项**
   + 连接资源链接
     + 直接链接到相关资源
     + 无缝导航至：
       + 计算的属性
       + Segments
     + 在新选项卡中打开
   + 外部 URL 链接
     + 将项目值转换为您可以选择 URLs 的值
     + 在新选项卡中打开
   + 抽屉式视图链接
     + 在侧边抽屉中打开详细信息
     + 无需离开页面即可查看完整详情

1. **整理指标布局**

**图 1**

![\[自定义关键指标小组件编辑示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/key-metric-features-1.png)


**图 2**

![\[另一个自定义关键指标小组件编辑示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/key-metric-features-2.png)


### 示例配置
<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
            }
        ]
    }
}
```

**注意**  
此组件目前在用户界面生成器中不支持 `ProfileObjects`。

## 圆环图
<a name="donut-chart"></a>

圆环图组件通过圆形的圆环图实现了情绪评分的可视化。

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

通过定义自定义评分标准来创建动态情绪可视化效果。此组件特别适用于显示：
+ 成功指标
+ 成就率
+ 风险评测
+ 性能指标

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

1. 情绪分析选项
   + 正面情绪
     + 从零开始
     + 根据标准跟踪成就：
       + 自定义点值
       + 颜色编码的客户细分
       + 灰色表示未满足的条件
     + 显示成功率百分比
   + 负面情绪
     + 从最大值开始
     + 跟踪扣除额：
       + 颜色编码的客户细分
       + 积分扣除系统
       + 绿色表示剩余价值
     + 显示最终分数

1. 计算的属性值

1. 运算符选项
   + 等于
   + 不等于
   + 大于
   + 小于

1. 值条件

1. 每个条件分配的积分

**图 1：正面情绪示例**

![\[正面情绪小组件编辑示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/donut-chart-features-1.png)


**图 2：负面情绪示例**

![\[负面情绪小组件编辑示例。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/donut-chart-features-2.png)


### 示例配置
<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
            }
        ]
    }
}
```

**注意**  
**圆环图目前仅支持将计算的属性作为数据来源。**
**所有条件定义都必须包括标题、颜色、计算的属性、运算符、值条件和积分值。**