기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# 사용자 지정 위젯
특정 비즈니스 요구 사항에 맞게 처음부터 맞춤형 대시보드 구성 요소를 생성합니다. 사용자 지정 위젯을 사용하면 사전 정의된 데이터 없이 고유한 시각화를 구축할 수 있습니다.
![\[프로필 탐색기 레이아웃에 고객 위젯을 추가합니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/custom-widgets-1.png)
## 사용 가능한 사용자 지정 구성 요소
+ [표](#table-widget)
+ [키-값 페어:](#key-value-pair)
+ [주요 지표](#key-metric)
+ [도넛 차트](#donut-chart)
## 사용자 지정 위젯 빌드
**각 사용자 지정 위젯은 다음과 같이 구성할 수 있습니다.**
+ 사용자 지정 데이터 소스
+ 사용자 지정 디스플레이
+ 사용자 지정 필드
+ 사용자 지정 항목 상호 작용
## 표
사용자 지정 테이블 구성 요소는 상호 작용 및 구성을 위한 고급 기능과 함께 테이블 형식으로 데이터를 표시할 수 있는 유연한 구성 옵션을 제공합니다.
### 특성
1. **열 구성**
+ 사용자 지정 열 헤더 정의
+ 각 열에 대한 데이터 지정
+ 데이터 형식 지정 옵션 설정
+ 열 배치 정의
1. **필터링**
+ 테이블 내에서 항목을 빠르게 필터링
1. **연결**
+ 리소스 링크 연결
+ 다음에 대한 원활한 탐색:
+ Segments
+ 계산된 속성
+ 새 탭에서 열기
+ **외부 URL 링크**
+ 행 항목 값을 선택할 수 있는 URL로 변환
+ 새 탭에서 열기
+ 행 데이터를 기반으로 동적으로 링크 생성
+ 서랍 보기 링크
+ 측면 서랍에서 세부 정보 열기
+ 페이지를 나가지 않고 전체 레코드 세부 정보 보기
1. 데이터 구성
+ 그룹화
+ 특정 필드 이름을 기준으로 행 그룹화
+ 영구 그룹 설정
+ 정렬
+ 열 필드를 기준으로 정렬
+ 오름차순 정렬
+ 영구 정렬 설정
**그림 1**
![\[사용자 지정 테이블 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/table-features-1.png)
**그림 2**
![\[또 다른 사용자 지정 테이블 위젯 편집 예제입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/table-features-2.png)
### 구성의 예
```
{
"Type": "Table",
"Props": {
"ColumnDefinitions": [
{
"Header": "Table column header"
"Cell": {
"Content": {
"Props": {
"Variant": "Link",
"LinkOptions": {
"LinkType": "Drawer"
}
},
"Type": "TextContent",
"Children": ["string"]
}
},
}
]
}
}
```
## 키-값 페어:
키 값 페어 구성 요소를 사용하면 유연하고 읽기 쉬운 형식으로 관련 데이터 포인트의 구성된 디스플레이를 생성할 수 있습니다.
### 개요
사용자 지정 키-값 관계를 정의하여 동적 데이터 표시를 생성합니다. 이 구성 요소는 다음과 같은 속성 페어를 표시하는 데 특히 유용합니다.
+ 사용자 지정 세부 정보
+ 계정 정보
### 특성
1. **대화형 링크 옵션**
+ 리소스 링크 연결
+ 관련 리소스에 직접 연결
+ 다음에 대한 원활한 탐색:
+ 계산된 속성
+ Segments
+ 새 탭에서 열기
+ 외부 URL 링크
+ 항목 값을 선택할 수 있는 URLs로 변환
+ 새 탭에서 열기
+ 서랍 보기 링크
+ 측면 서랍에서 세부 정보 열기
+ 페이지를 나가지 않고 전체 세부 정보 보기
1. 열 구성
+ 키-값 페어의 1\$14개 열 정의
1. 논리적 그룹화에서 페어 구성
**그림 1**
![\[사용자 지정 키 값 페어 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/key-value-pair-features-1.png)
**그림 2**
![\[또 다른 사용자 지정 키 값 페어 위젯 편집 예제입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/key-value-pair-features-2.png)
### 구성의 예
```
{
"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`를 지원하지 않습니다.
## 주요 지표
주요 지표 구성 요소를 사용하면 중요한 비즈니스 지표, KPI' 및 중요 통계를 쉽게 이해할 수 있는 형식으로 눈에 띄게 표시할 수 있습니다.
### 개요
중요한 데이터 포인트, 추세 또는 상태 표시기를 강조 표시하는 고가시성 지표 디스플레이를 생성합니다. 이 구성 요소는 다음을 보여 주는 데 적합합니다.
+ 성과 지표
+ 중요 측정
+ 상태 요약
+ 추세 지표
### 특성
1. **대형 디스플레이 텍스트**
1. **지표 형식**
1. **대화형 링크 옵션**
+ 리소스 링크 연결
+ 관련 리소스에 직접 연결
+ 다음에 대한 원활한 탐색:
+ 계산된 속성
+ Segments
+ 새 탭에서 열기
+ 외부 URL 링크
+ 항목 값을 선택할 수 있는 URLs로 변환
+ 새 탭에서 열기
+ 서랍 보기 링크
+ 측면 서랍에서 세부 정보 열기
+ 페이지를 나가지 않고 전체 세부 정보 보기
1. **지표 레이아웃 구성**
**그림 1**
![\[사용자 지정 주요 지표 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/key-metric-features-1.png)
**그림 2**
![\[또 다른 사용자 지정 주요 지표 위젯 편집 예제입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/key-metric-features-2.png)
### 구성의 예
```
{
"Type": "KeyMetrics",
"Props": {
"MetricDefinitions": [
{
"MetricLabel": "Total Revenue",
"MetricValue": {
"Content": {
"Type": "TextContent",
"Props": {
"Format": "USD",
"FontSize": "large",
"FontWeight": "bold"
},
"Children": ["[string]"]
}
},
"Columns": 1
}
]
}
}
```
**참고**
이 구성 요소는 현재 UI 빌더에서 `ProfileObjects`를 지원하지 않습니다.
## 도넛 차트
도넛 차트 구성 요소를 사용하면 원형 도넛 차트를 통해 감정 점수를 시각화할 수 있습니다.
### 개요
사용자 지정 점수 기준을 정의하여 동적 감정 시각화를 생성합니다. 이 구성 요소는 다음을 표시하는 데 특히 유용합니다.
+ 성공 지표
+ 달성률
+ 위험 평가
+ 성과 지표
### 특성
1. 감정 분석 옵션
+ 긍정적인 감정
+ 0부터 시작
+ 기준을 기준으로 성과를 추적합니다.
+ 사용자 지정 포인트 값
+ 색상으로 구분된 세그먼트
+ 충족되지 않은 조건의 경우 회색
+ 성공률 백분율을 표시합니다.
+ 부정적인 감정
+ 최대값부터 시작
+ 공제 추적:
+ 색상으로 구분된 세그먼트
+ 포인트 감소 시스템
+ 나머지 값은 녹색
+ 최종 점수를 표시합니다.
1. 계산된 속성 값
1. 연산자 옵션
+ 같음
+ 같지 않음
+ 보다 큼
+ 보다 작음
1. 값 조건
1. 조건당 할당된 포인트
**그림 1: 긍정적인 감정 예제**
![\[긍정적인 감정 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/donut-chart-features-1.png)
**그림 2: 부정적인 감정 예제**
![\[부정적인 감정 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/donut-chart-features-2.png)
### 구성의 예
```
{
"Type": "DonutChart",
"Props": {
"Variant": "PositiveSentiment",
"ConditionDefinitions": [
{
"Title": "Customer Satisfaction",
"Color": "#4CAF50",
"CalculatedAttribute": "satisfaction_score",
"Operator": "GREATER_THAN",
"ValueCondition": 8,
"Points": 10
}
]
}
}
```
**참고**
**Donuts는 현재 계산된 속성만 데이터 소스로 지원합니다.**
**모든 조건 정의에는 제목, 색상, 계산된 속성, 연산자, 값 조건 및 점 값이 포함되어야 합니다.**