Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Widget kustom
<a name="custom-widgets"></a>

Buat komponen dasbor yang disesuaikan dari bawah ke atas untuk memenuhi kebutuhan bisnis spesifik Anda. Widget kustom memungkinkan Anda membangun visualisasi unik tanpa data yang telah ditentukan sebelumnya.

![\[Tambahkan widget pelanggan di tata letak Profile explorer.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/custom-widgets-1.png)


## Komponen kustom yang tersedia
<a name="available-custom-components"></a>
+ [Tabel](#table-widget)
+ [Pasangan nilai kunci](#key-value-pair)
+ [Metrik kunci](#key-metric)
+ [Bagan donat](#donut-chart)

## Membangun widget kustom
<a name="building-custom-widgets"></a>

**Setiap widget kustom dapat dikonfigurasi dengan:**
+ Sumber data kustom
+ Tampilan kustom
+ Bidang kustom
+ Interaksi item khusus

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

Komponen tabel kustom menyediakan opsi konfigurasi fleksibel untuk menampilkan data Anda dalam format tabel, dengan fitur-fitur canggih untuk interaksi dan organisasi.

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

1. **Konfigurasi kolom**
   + Tentukan header kolom kustom
   + Tentukan data untuk setiap kolom
   + Tetapkan opsi pemformatan data
   + Tentukan penempatan kolom

1. **Penyaringan**
   + Filter item dengan cepat di dalam tabel Anda

1. **Menautkan**
   + Tautan Connect Resource
     + Navigasi mulus ke:
       + Segmen
       + Atribut yang dihitung
     + Buka di tab baru
   + **Tautan URL eksternal**
     + Ubah nilai item baris menjadi URLs yang dapat Anda pilih
     + Buka di tab baru
     + Menghasilkan tautan secara dinamis berdasarkan data baris
   + Tautan tampilan laci
     + Buka informasi rinci di laci samping
     + Lihat detail catatan lengkap tanpa meninggalkan halaman

1. Organisasi data
   + Pengelompokan
     + Kelompokkan baris dengan nama bidang tertentu
     + Pengaturan grup persisten
   + Penyortiran
     + Urutkan berdasarkan bidang kolom apa pun
     + Organisasi urutan naik
     + Pengaturan pengurutan persisten

**Gambar 1**

![\[Contoh pengeditan widget tabel kustom.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/table-features-1.png)


**Gambar 2**

![\[Contoh pengeditan widget tabel kustom lainnya.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/table-features-2.png)


### Contoh konfigurasi
<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"]
                    }
                },
            }
        ]
    }
}
```

## Pasangan nilai kunci
<a name="key-value-pair"></a>

Komponen Key Value Pair memungkinkan Anda membuat tampilan terorganisir dari titik data terkait dalam format yang fleksibel dan dapat dibaca.

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

Buat tampilan data dinamis dengan mendefinisikan hubungan kunci-nilai kustom. Komponen ini sangat berguna untuk menampilkan pasangan atribut seperti:
+ Detail pelanggan
+ Informasi akun

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

1. **Opsi tautan interaktif**
   + Connect link sumber daya
     + Tautkan langsung ke sumber daya terkait
     + Navigasi mulus ke:
       + Atribut yang dihitung
       + Segmen
     + Buka di tab baru
   + Tautan URL Eksternal
     + Ubah nilai item menjadi URLs yang dapat Anda pilih
     + Buka di tab baru
   + Tautan Drawer View
     + Buka informasi rinci di laci samping
     + Lihat detail lengkap tanpa meninggalkan halaman

1. Konfigurasi kolom
   + Tentukan 1-4 kolom pasangan kunci-nilai

1. Atur pasangan dalam pengelompokan logis

**Gambar 1**

![\[Contoh pengeditan widget pasangan nilai kunci khusus.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/key-value-pair-features-1.png)


**Gambar 2**

![\[Contoh pengeditan widget pasangan nilai kunci kustom lainnya.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/key-value-pair-features-2.png)


### Contoh konfigurasi
<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]"]
                    }
                }
            }
        ]
    }
}
```

**catatan**  
Komponen ini saat ini tidak mendukung `ProfileObjects` di pembuat UI.

## Metrik kunci
<a name="key-metric"></a>

Komponen Metrik Kunci memungkinkan Anda menampilkan metrik bisnis penting KPIs, dan statistik penting secara mencolok dalam format yang mudah dicerna.

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

Buat tampilan metrik visibilitas tinggi yang menyoroti titik data penting, tren, atau indikator status. Komponen ini sangat ideal untuk menampilkan:
+ Indikator kinerja
+ Pengukuran kritis
+ Ringkasan status
+ Indikator tren

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

1. **Teks tampilan besar**

1. **Format metrik**

1. **Opsi tautan interaktif**
   + Connect link sumber daya
     + Tautkan langsung ke sumber daya terkait
     + Navigasi mulus ke:
       + Atribut yang dihitung
       + Segmen
     + Buka di tab baru
   + Tautan URL eksternal
     + Ubah nilai item menjadi URLs yang dapat Anda pilih
     + Buka di tab baru
   + Tautan tampilan laci
     + Buka informasi rinci di laci samping
     + Lihat detail lengkap tanpa meninggalkan halaman

1. **Mengatur tata letak metrik**

**Gambar 1**

![\[Contoh pengeditan widget metrik kunci khusus.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/key-metric-features-1.png)


**Gambar 2**

![\[Contoh pengeditan widget metrik kunci kustom lainnya.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/key-metric-features-2.png)


### Contoh konfigurasi
<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
            }
        ]
    }
}
```

**catatan**  
Komponen ini saat ini tidak mendukung `ProfileObjects` di pembuat UI.

## Bagan donat
<a name="donut-chart"></a>

Komponen bagan donat memungkinkan visualisasi penilaian sentimen melalui bagan donat melingkar.

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

Buat visualisasi sentimen dinamis dengan mendefinisikan kriteria penilaian khusus. Komponen ini sangat berguna untuk menunjukkan:
+ Metrik keberhasilan
+ Tingkat pencapaian
+ Penilaian risiko
+ Indikator kinerja

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

1. Opsi Analisis Sentimen
   + Sentimen Positif
     + Dimulai dari nol
     + Melacak pencapaian terhadap kriteria:
       + Nilai titik kustom
       + Segmen kode warna
       + Abu-abu untuk kondisi yang tidak terpenuhi
     + Menunjukkan persentase tingkat keberhasilan
   + Sentimen Negatif
     + Mulai dari nilai maksimum
     + Melacak pengurangan:
       + Segmen kode warna
       + Sistem pengurangan titik
       + Hijau untuk nilai yang tersisa
     + Menunjukkan skor akhir

1. Nilai atribut yang dihitung

1. Opsi Operator
   + Sama dengan
   + Tidak Sama Dengan
   + Lebih Besar Dari
   + Kurang dari

1. Kondisi Nilai

1. Poin yang dialokasikan per kondisi

**Gambar 1: Contoh sentimen positif**

![\[Contoh pengeditan widget sentimen positif.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/donut-chart-features-1.png)


**Gambar 2: Contoh sentimen negatif**

![\[Contoh pengeditan widget sentimen negatif.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/donut-chart-features-2.png)


### Contoh konfigurasi
<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
            }
        ]
    }
}
```

**catatan**  
**Donat hanya mendukung atribut Dihitung sebagai sumber data saat ini.**
**Semua definisi kondisi harus menyertakan judul, warna, atribut terhitung, operator, kondisi nilai, dan nilai poin.**