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

Puoi utilizzare l'SDK Amazon QuickSight Embedding (versione 2.5.0 e successive) per apportare modifiche ai temi dei pannelli di controllo e degli elementi visivi QuickSight incorporati durante il runtime. Un tema del runtime semplifica l'integrazione dell'applicazione software as a service (SaaS) con gli asset incorporati di Amazon QuickSight. Un tema del runtime consente di sincronizzare il tema del contenuto incorporato con i temi dell'applicazione principale in cui sono incorporate le risorse QuickSight. È inoltre possibile utilizzare il tema del 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 del pannello di controllo o dell'elemento visivo incorporato.

Per ulteriori informazioni sui temi, consulta Utilizzo di temi in Amazon QuickSight. Per ulteriori informazioni sull'utilizzo dell'SDK di incorporamento di QuickSight, consulta amazon-quicksight-embedding-sdk su GitHub.

Prerequisiti

Prima di iniziare, assicurati di soddisfare i seguenti requisiti.

Concetti e terminologia

La seguente terminologia può essere utile quando lavori con il tema di runtime incorporato.

Configurazione

Assicurati di disporre delle informazioni seguenti per iniziare a lavorare con i temi del runtime.

Interfaccia del metodo SDK

Metodi setter

La tabella seguente descrive i diversi metodi setter che gli sviluppatori possono utilizzare per un tema del runtime.

Inizializzazione del contenuto incorporato con un tema

Per inizializzare un pannello di controllo o un elemento visivo incorporato con un tema non predefinito, definisci un oggetto themeOptions nei parametri DashboardContentOptions o VisualContentOptions e imposta la proprietà themeArn all'interno di themeOptions sull'ARN del tema desiderato.

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 la sovrascrittura di un tema

Gli sviluppatori possono utilizzare le sovrascritture dei temi per definire il tema di un pannello di controllo o di un elemento visivo incorporato durante il runtime. Ciò consente al pannello di controllo o all'elemento visivo di ereditare un tema da un'applicazione di terze parti senza la necessità di preconfigurare un tema in QuickSight. Per inizializzare un pannello di controllo o un elemento visivo incorporato con una sovrascrittura del tema, imposta la proprietà themeOverride all'interno di themeOptions sui parametri DashboardContentOptions o VisualContentOptions. L'esempio seguente sostituisce il carattere del tema di un pannello di controllo dal carattere predefinito su 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 pannello di controllo da precaricare al momento dell'inizializzazione. Ciò è particolarmente utile per passare rapidamente da una visualizzazione all'altra, ad esempio tra le modalità chiaro e scuro. È possibile inizializzare un pannello di controllo o un elemento visivo incorporato con un massimo di cinque temi precaricati. Per utilizzare temi precaricati, imposta la proprietà preloadThemes in DashboardContentOptions o VisualContentOptions con un array di massimo cinque themeArns. L'esempio seguente precarica i temi iniziali Midnight e Rainier in un pannello di controllo.

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