Sesuaikan tampilan dan nuansa dasbor dan visual yang disematkan - Amazon QuickSight
Terminologi dan konsepPengaturanSDKantarmuka metodeMenginisialisasi konten tertanam dengan temaMenginisialisasi konten tertanam dengan penggantian temaMenginisialisasi konten yang disematkan dengan tema yang dimuat sebelumnya

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 yang disematkan

Anda dapat menggunakan Amazon QuickSight Embedding SDK (versi 2.5.0 dan yang lebih tinggi) untuk membuat perubahan pada tema QuickSight dasbor dan visual yang disematkan saat runtime. Tema runtime memudahkan untuk mengintegrasikan aplikasi Perangkat Lunak sebagai layanan (SaaS) Anda dengan aset tertanam Amazon Anda. QuickSight Tema runtime memungkinkan Anda untuk menyinkronkan tema konten yang disematkan dengan tema aplikasi induk tempat QuickSight aset 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, lihatMenggunakan tema di Amazon QuickSight. Untuk informasi selengkapnya tentang penggunaan QuickSight EmbeddingSDK, lihat amazon-quicksight-embedding-sdkpada GitHub.

Prasyarat

Sebelum Anda dapat memulai, pastikan Anda memiliki prasyarat berikut.

  • Anda menggunakan QuickSight Embedding SDK versi 2.5.0 atau lebih tinggi.

  • Izin untuk mengakses tema yang ingin Anda kerjakan. Untuk memberikan izin ke tema QuickSight, lakukan UpdateThemePermissions API panggilan atau gunakan ikon Bagikan di samping tema di editor analisis QuickSight konsol.

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 QuickSight tema. Berikut ini adalah contoh tema kustomARN.

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

    QuickSight asalkan tema pemula tidak memiliki wilayah dalam tema merekaARN. Berikut ini adalah contoh tema starterARN.

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

Pengaturan

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 QuickSight akun Anda, lakukan panggilan ke ListThemesAPIoperasi. Untuk informasi tentang QuickSight tema preset, lihatMenyetel tema default untuk QuickSight analisis Amazon.

  • 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.

SDKantarmuka metode

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 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 yang diinginkan. ARN

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 tertanam dengan penggantian tema

Pengembang dapat menggunakan penggantian tema untuk menentukan tema dasbor atau visual yang disematkan saat runtime. Hal ini memungkinkan dashboard atau visual untuk mewarisi tema dari aplikasi pihak ketiga tanpa perlu pra-konfigurasi tema di dalamnya. QuickSight 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 5themeArns. 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);