Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Personalizza l'aspetto dei pannelli di controllo e degli QuickSight elementi visivi incorporati

Puoi utilizzare Amazon QuickSight Embedding SDK (versione 2.5.0 e successive) per apportare modifiche al tema delle QuickSight dashboard e degli elementi visivi incorporati in fase di esecuzione. Il tema Runtime semplifica l'integrazione dell'applicazione Software as a Service (SaaS) con le risorse integrate di QuickSight Amazon. I temi in fase di esecuzione ti consentono di sincronizzare il tema dei tuoi contenuti incorporati con i temi dell'applicazione principale in cui sono incorporate le tue QuickSight risorse. Puoi anche utilizzare i temi in runtime per aggiungere opzioni di personalizzazione per i lettori. Le modifiche ai temi possono essere applicate alle risorse incorporate al momento dell'inizializzazione o per tutta la durata della dashboard o dell'immagine incorporata.

Per ulteriori informazioni sui temi, consulta. Utilizzo dei temi in Amazon QuickSight Per ulteriori informazioni sull'utilizzo dell' QuickSight incorporamentoSDK, vedere amazon-quicksight-embedding-sdksu GitHub.

Prerequisiti

Prima di iniziare, assicurati di avere i seguenti prerequisiti.

Concetti e terminologia

La seguente terminologia può essere utile quando si lavora con temi di runtime incorporati.

Configurazione

Assicurati di avere a portata di mano le seguenti informazioni per iniziare a lavorare con i temi di runtime.

SDKinterfaccia del metodo

metodi Setter

La tabella seguente descrive diversi metodi setter che gli sviluppatori possono utilizzare per la creazione di temi in fase di runtime.

Inizializzazione del contenuto incorporato con un tema

Per inizializzare una dashboard o un'immagine incorporata con un tema non predefinito, definisci un themeOptions oggetto nei VisualContentOptions parametri DashboardContentOptions o e imposta la themeArn proprietà interna themeOptions sul tema desiderato. ARN

L'esempio seguente inizializza un pannello di controllo incorporato con il tema. MIDNIGHT

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);

Inizializzazione del contenuto incorporato con una sovrascrittura del tema

Gli sviluppatori possono utilizzare le sostituzioni dei temi per definire il tema di una dashboard o di un elemento visivo incorporato in fase di esecuzione. Ciò consente alla dashboard o alla visualizzazione di ereditare un tema da un'applicazione di terze parti senza la necessità di preconfigurare un tema all'interno. QuickSight Per inizializzare un pannello di controllo o un elemento visivo incorporato con una modifica del tema, imposta la themeOverride proprietà themeOptions all'interno dei parametri o. DashboardContentOptions VisualContentOptions L'esempio seguente sostituisce il carattere del tema di un pannello di controllo dal carattere predefinito a. 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);

Inizializzazione del contenuto incorporato con temi precaricati

Gli sviluppatori possono configurare un set di temi del dashboard da precaricare al momento dell'inizializzazione. Ciò è particolarmente utile per passare rapidamente da una visualizzazione all'altra, ad esempio le modalità chiaro e scuro. È possibile inizializzare una dashboard o un elemento visivo incorporato con un massimo di 5 temi precaricati. Per utilizzare temi precaricati, imposta la preloadThemes proprietà in uno DashboardContentOptions o in VisualContentOptions un array di massimo 5. themeArns L'esempio seguente precarica i temi Midnight e i temi Rainier starter in una dashboard.

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);