

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

# Sesuaikan tampilan dan nuansa dasbor dan visual tertanam Amazon Quick Sight
Tema runtime

Anda dapat menggunakan Amazon Quick Sight Embedding SDK (versi 2.5.0 dan yang lebih tinggi) untuk membuat perubahan pada tema dasbor dan visual Amazon Quick Sight yang disematkan saat runtime. Tema runtime memudahkan untuk mengintegrasikan aplikasi Perangkat Lunak sebagai layanan (SaaS) Anda dengan aset tertanam Amazon Quick Sight Anda. Tema runtime memungkinkan Anda untuk menyinkronkan tema konten yang disematkan dengan tema aplikasi induk tempat aset Amazon Quick Sight Anda disematkan. Anda juga dapat menggunakan tema runtime untuk menambahkan opsi penyesuaian bagi pembaca. Perubahan tema dapat diterapkan pada aset yang disematkan saat inisialisasi atau sepanjang masa pakai dasbor atau visual Anda yang disematkan.

Untuk informasi lebih lanjut tentang tema, lihat[Menggunakan tema di Amazon Quick Sight](themes-in-quicksight.md). Untuk informasi selengkapnya tentang menggunakan Amazon Quick Sight Embedding SDK, lihat di. [amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk) GitHub

**Prasyarat**

Sebelum Anda dapat memulai, pastikan Anda memiliki prasyarat berikut.
+ Anda menggunakan Amazon Quick Sight Embedding SDK versi 2.5.0 atau lebih tinggi.
+ Izin untuk mengakses tema yang ingin Anda kerjakan. Untuk memberikan izin ke tema di Amazon Quick Sight, lakukan panggilan `UpdateThemePermissions` API atau gunakan ikon **Bagikan** di sebelah tema di editor analisis konsol Amazon Quick Sight.

## Terminologi dan konsep


Terminologi berikut dapat berguna saat bekerja dengan tema runtime tertanam.
+ *Tema* - Kumpulan pengaturan yang dapat Anda terapkan ke beberapa analisis dan dasbor yang mengubah cara konten ditampilkan.
+ *ThemeConfiguration*- Objek konfigurasi yang berisi semua properti tampilan untuk tema.
+ *Theme Override* - `ThemeConfiguration` Objek yang diterapkan pada tema aktif untuk mengesampingkan beberapa atau semua aspek bagaimana konten ditampilkan.
+ *Tema ARN* - Nama Sumber Daya Amazon (ARN) yang mengidentifikasi tema Amazon Quick Sight. Berikut ini adalah contoh dari tema khusus ARN.

  `arn:aws:quicksight:region:account-id:theme/theme-id`

  Amazon Quick Sight menyediakan tema pemula tidak memiliki wilayah dalam tema ARN mereka. Berikut ini adalah contoh dari tema starter ARN.

  `arn:aws:quicksight::aws:theme/CLASSIC`

## Menyiapkan


Pastikan Anda memiliki informasi berikut yang siap untuk mulai bekerja dengan tema runtime.
+ Tema ARNs tema yang ingin Anda gunakan. Anda dapat memilih tema yang ada, atau Anda dapat membuat yang baru. Untuk mendapatkan daftar semua tema dan tema ARNs di akun Amazon Quick Sight Anda, lakukan panggilan ke operasi [ListThemes](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_ListThemes.html)API. Untuk informasi tentang tema Amazon Quick Sight yang telah ditetapkan sebelumnya, lihat[Menyetel tema default untuk analisis Amazon Quick dengan Amazon Quick APIs](customizing-quicksight-default-theme.md).
+ Jika Anda menggunakan penyematan pengguna terdaftar, pastikan pengguna memiliki akses ke tema yang ingin Anda gunakan.

  Jika Anda menggunakan penyematan pengguna anonim, berikan daftar tema ARNs ke `AuthorizedResourceArns` parameter `GenerateEmbedUrlForAnonymousUser` API. Pengguna anonim diberikan akses ke tema apa pun yang tercantum dalam `AuthorizedResourceArns` parameter.

## Antarmuka metode SDK


**Metode setter**

Tabel berikut menjelaskan metode setter berbeda yang dapat digunakan pengembang untuk tema runtime.


| Metode | Deskripsi | 
| --- | --- | 
|  `setTheme(themeArn: string)`  |  Mengganti tema aktif dasbor atau visual dengan tema lain. Jika diterapkan, penggantian tema akan dihapus. Kesalahan dikembalikan jika Anda tidak memiliki akses ke tema atau jika tema tidak ada.  | 
|  `setThemeOverride(themeOverride: ThemeConfiguration)`  |  Menetapkan dinamika `ThemeConfiguration` untuk mengganti tema aktif saat ini. Ini menggantikan penggantian tema yang telah ditetapkan sebelumnya. Nilai apa pun yang tidak diberikan dalam `ThemeConfiguration` yang baru akan default ke nilai dalam tema yang sedang aktif. Kesalahan dikembalikan jika `ThemeConfiguration` yang Anda berikan tidak valid.  | 

## Menginisialisasi konten tertanam dengan tema


Untuk menginisialisasi dasbor tertanam atau visual dengan tema non-default, tentukan `themeOptions` objek pada `DashboardContentOptions` atau `VisualContentOptions` parameter, dan atur `themeArn` properti di dalam `themeOptions` ke tema ARN yang diinginkan.

Contoh berikut menginisialisasi dashboard tertanam dengan `MIDNIGHT` tema.

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        themeArn: "arn:aws:quicksight::aws:theme/MIDNIGHT"
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```

## Menginisialisasi konten yang disematkan dengan penggantian tema


Pengembang dapat menggunakan penggantian tema untuk menentukan tema dasbor atau visual yang disematkan saat runtime. Ini memungkinkan dasbor atau visual untuk mewarisi tema dari aplikasi pihak ketiga tanpa perlu melakukan pra-konfigurasi tema dalam Amazon Quick Sight. Untuk menginisialisasi dasbor atau visual yang disematkan dengan penggantian tema, atur `themeOverride` properti `themeOptions` di dalam `DashboardContentOptions` atau `VisualContentOptions` parameter. Contoh berikut mengesampingkan font tema dasbor dari font default ke. `Amazon Ember`

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        "themeOverride":{"Typography":{"FontFamilies":[{"FontFamily":"Comic Neue"}]}}
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```

## Menginisialisasi konten yang disematkan dengan tema yang dimuat sebelumnya


Pengembang dapat mengonfigurasi satu set tema dasbor yang akan dimuat sebelumnya pada inisialisasi. Ini paling bermanfaat untuk beralih cepat di antara tampilan yang berbeda, misalnya mode gelap dan terang. Dasbor atau visual yang disematkan dapat diinisialisasi dengan hingga 5 tema yang dimuat sebelumnya. Untuk menggunakan tema yang dimuat sebelumnya, atur `preloadThemes` properti di salah satu `DashboardContentOptions` atau `VisualContentOptions` dengan array hingga 5`themeArns`. Contoh berikut memuat tema `Midnight` dan `Rainier` starter ke dasbor.

```
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

const embeddingContext = await createEmbeddingContext();

const {
    embedDashboard,
} = embeddingContext;

const frameOptions = {
    url: '<YOUR_EMBED_URL>',
    container: '#experience-container',
};
const contentOptions = {
    themeOptions: {
        "preloadThemes": ["arn:aws:quicksight::aws:theme/RAINIER", "arn:aws:quicksight::aws:theme/MIDNIGHT"]
    }
};

// Embedding a dashboard experience
const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions);
```