

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# カスタムウィジェット
<a name="custom-widgets"></a>

特定のビジネスニーズに合わせて、カスタマイズされたダッシュボードコンポーネントを空の状態から作成します。カスタムウィジェットを使用すると、事前定義済みのデータなしで独自のビジュアライゼーションを構築できます。

![プロファイルエクスプローラーレイアウトへのカスタマーウィジェットの追加。](http://docs.aws.amazon.com/ja_jp/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/ja_jp/connect/latest/adminguide/images/table-features-1.png)


**図 2**

![別のカスタムテーブルウィジェットの編集例。](http://docs.aws.amazon.com/ja_jp/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/ja_jp/connect/latest/adminguide/images/key-value-pair-features-1.png)


**図 2**

![別のカスタムキー値ペアウィジェットの編集例。](http://docs.aws.amazon.com/ja_jp/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/ja_jp/connect/latest/adminguide/images/key-metric-features-1.png)


**図 2**

![別のカスタムキーメトリクスウィジェットの編集例。](http://docs.aws.amazon.com/ja_jp/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/ja_jp/connect/latest/adminguide/images/donut-chart-features-1.png)


**図 2: ネガティブセンチメントの例**

![ネガティブセンチメントウィジェットの編集例。](http://docs.aws.amazon.com/ja_jp/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
            }
        ]
    }
}
```

**注記**  
**現時点では、ドーナツはデータソースとして計算属性のみをサポートします。**
**すべての条件定義には、タイトル、色、計算属性、演算子、値条件、ポイント値を含める必要があります。**