本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 自訂小工具
<a name="custom-widgets"></a>

從頭開始建立專屬儀表板元件，以符合您的特定商業需求。您可以透過自訂小工具，在沒有任何預先定義資料時建置唯一的視覺化效果。

![\[在 Profile Explorer 配置中新增客戶小工具。\]](http://docs.aws.amazon.com/zh_tw/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. **連結**
   + 連接資源連結
     + 順暢導覽至：
       + 客群
       + 計算屬性
     + 在新索引標籤中開啟
   + **外部 URL 連結**
     + 將列項目值轉換為您可以選擇的 URL
     + 在新索引標籤中開啟
     + 根據列資料動態產生連結
   + 抽屜檢視連結
     + 在側邊抽屜開啟詳細資訊
     + 檢視完整的記錄詳細資訊，而不離開頁面

1. 資料整理
   + 分組
     + 根據特定欄位名稱分組資料列
     + 長久的群組設定
   + 排序
     + 根據任何欄位排序
     + 遞增順序
     + 長久的排序設定

**圖 1**

![\[自訂資料表小工具編輯範例。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/table-features-1.png)


**圖 2**

![\[另一個自訂資料表小工具編輯範例。\]](http://docs.aws.amazon.com/zh_tw/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. **互動式連結選項**
   + 連接資源連結
     + 直接連結至相關資源
     + 順暢導覽至：
       + 計算屬性
       + 客群
     + 在新索引標籤中開啟
   + 外部 URL 連結
     + 將項目值轉換為您可以選擇的 URL
     + 在新索引標籤中開啟
   + 抽屜檢視連結
     + 在側邊抽屜開啟詳細資訊
     + 檢視完整的詳細資訊，而不離開頁面

1. 欄位組態
   + 定義鍵值對的 1-4 欄

1. 在邏輯分組中整理配對

**圖 1**

![\[自訂鍵值對小工具編輯範例。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/key-value-pair-features-1.png)


**圖 2**

![\[另一個自訂鍵值對小工具編輯範例。\]](http://docs.aws.amazon.com/zh_tw/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]"]
                    }
                }
            }
        ]
    }
}
```

**注意**  
此元件目前不支援 UI 建置器中的 `ProfileObjects`。

## 金鑰指標
<a name="key-metric"></a>

金鑰指標元件可讓您以易於理解的格式，強調關鍵業務指標、KPI 和重要統計資料。

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

建立易見的指標視圖，強調重要的資料點、趨勢或狀態指示。此元件非常適合顯示：
+ 績效指標
+ 重要測量項目
+ 狀態摘要
+ 趨勢指標

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

1. **大型顯示文字**

1. **指標格式**

1. **互動式連結選項**
   + 連接資源連結
     + 直接連結至相關資源
     + 順暢導覽至：
       + 計算屬性
       + 客群
     + 在新索引標籤中開啟
   + 外部 URL 連結
     + 將項目值轉換為您可以選擇的 URL
     + 在新索引標籤中開啟
   + 抽屜檢視連結
     + 在側邊抽屜開啟詳細資訊
     + 檢視完整的詳細資訊，而不離開頁面

1. **整理指標配置**

**圖 1**

![\[自訂關鍵指標小工具編輯範例。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/key-metric-features-1.png)


**圖 2**

![\[另一個自訂關鍵指標小工具編輯範例。\]](http://docs.aws.amazon.com/zh_tw/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
            }
        ]
    }
}
```

**注意**  
此元件目前不支援 UI 建置器中的 `ProfileObjects`。

## 甜甜圈圖
<a name="donut-chart"></a>

甜甜圈圖表元件可透過圓形的甜甜圈圖表，視覺化情緒評分。

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

定義自訂評分條件，建立動態情緒視覺效果。此元件特別適用於顯示：
+ 成功指標
+ 達成率
+ 風險評估
+ 績效指標

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

1. 情緒分析選項
   + 正面情緒
     + 從零開始
     + 根據條件追蹤進度：
       + 自訂點數值
       + 以顏色顯示的區段
       + 以灰色表示未滿足的條件
     + 顯示成功率百分比
   + 負面情緒
     + 從最大值開始
     + 追蹤推論：
       + 以顏色顯示的區段
       + 點數扣除系統
       + 綠色代表剩餘值
     + 顯示最終分數

1. 計算屬性值

1. 運算子選項
   + Equal To
   + Not Equal To
   + Greater Than
   + Less Than

1. 值條件

1. 每個條件的配置點

**圖 1：正面情緒範例**

![\[正面情緒小工具編輯範例。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/donut-chart-features-1.png)


**圖 2：負面情緒範例**

![\[負面情緒小工具編輯範例。\]](http://docs.aws.amazon.com/zh_tw/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
            }
        ]
    }
}
```

**注意**  
**甜甜圈圖目前僅支援作為資料來源的計算屬性。**
**所有條件定義都必須包含標題、顏色、計算屬性、運算子、值條件和點數值。**