Personalización de la apariencia de los elementos visuales y paneles incrustados de QuickSight

Puede utilizar el SDK de incrustación de Amazon QuickSight (versión 2.5.0 y superior) para realizar cambios en la creación de temas de sus elementos visuales y paneles de QuickSight incrustados en el tiempo de ejecución. La creación de temas en tiempo de ejecución facilita la integración de su aplicación de software como servicio (SaaS) con sus activos incrustados de Amazon QuickSight. La creación de temas en tiempo de ejecución le permite sincronizar el tema del contenido incrustado con los temas de la aplicación principal en la que están incrustados los activos de QuickSight. También puede utilizar la creación de temas en tiempo de ejecución para agregar opciones de personalización para los lectores. Los cambios de creación de temas se pueden aplicar a los activos incrustados al inicializarlos o durante toda la vida útil del elemento visual o el panel incrustados.

Para obtener más información sobre los temas, consulte Uso de temas en Amazon QuickSight. Para obtener más información sobre el uso del SDK de integración de QuickSight, consulte amazon-quicksight-embedding-sdk en GitHub.

Requisitos previos 

Antes de empezar, asegúrese de que cumple los requisitos previos que se indican a continuación.

Terminología y conceptos

La siguiente terminología puede resultar útil cuando se trabaja con temas de tiempo de ejecución incrustados.

Configuración

Asegúrese de disponer de la información que se indica a continuación para empezar a trabajar con la creación de temas en tiempo de ejecución.

Interfaz del método del SDK

Métodos setter

En la siguiente tabla se describen los diferentes métodos setter que los desarrolladores pueden usar para la creación de temas en tiempo de ejecución.

Inicialización del contenido incrustado con un tema

Para inicializar un elemento visual o un panel incrustado con un tema no predeterminado, defina un objeto themeOptions en los parámetros DashboardContentOptions o VisualContentOptions y establezca la propiedad themeArn de themeOptions con el ARN del tema deseado.

En el siguiente ejemplo, se inicializa un panel incrustado con el 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);

Inicialización del contenido incrustado con una anulación de tema

Los desarrolladores pueden utilizar anulaciones de tema para definir el tema de un elemento visual o panel incrustado en tiempo de ejecución. Esto permite que el panel o el elemento visual hereden un tema de una aplicación de terceros sin necesidad de preconfigurar ningún tema en QuickSight. Para inicializar un elemento visual o panel incrustado con una anulación de tema, establezca la propiedad themeOverride de themeOptions con los parámetros DashboardContentOptions o VisualContentOptions. En el siguiente ejemplo, se anula la fuente del tema de un panel y se pasa de la fuente predeterminada 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);

Inicialización del contenido incrustado con temas precargados

Los desarrolladores pueden configurar un conjunto de temas de panel para que se carguen previamente en el momento de la inicialización. Esto resulta especialmente útil para cambiar rápidamente entre diferentes vistas, como, por ejemplo, entre los modos oscuro y claro. Los elementos visuales o paneles incrustados se pueden inicializar con hasta 5 temas precargados. Para usar temas precargados, establezca la propiedad preloadThemes en DashboardContentOptions o VisualContentOptions con una matriz de hasta 5 themeArns. En el siguiente ejemplo, se precargan los temas de inicio Midnight y Rainier en un panel.

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