Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Personalice la apariencia de los paneles y elementos visuales integrados

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

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 de la QuickSight incrustaciónSDK, consulte amazon-quicksight-embedding-sdkla GitHub.

Requisitos previos 

Antes de empezar, asegúrese de cumplir los siguientes requisitos previos.

Terminología y conceptos

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

Configuración

Asegúrese de tener preparada la siguiente información para empezar a trabajar con la tematización en tiempo de ejecución.

SDKinterfaz de métodos

métodos Setter

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

Inicializar el contenido incrustado con un tema

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

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

Inicializar el contenido incrustado con una modificación del tema

Los desarrolladores pueden utilizar las modificaciones de tema para definir el tema de un cuadro de mando integrado o de un elemento visual 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 un tema. QuickSight Para inicializar un cuadro de mando o un elemento visual integrado con una modificación del tema, defina la themeOverride propiedad dentro de themeOptions los parámetros o. DashboardContentOptions VisualContentOptions En el siguiente ejemplo, se reemplaza la fuente del tema de un panel, pasando 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);

Inicializar el 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, por ejemplo, entre los modos oscuro y claro. Se puede inicializar un cuadro de mando o un elemento visual integrado con hasta 5 temas precargados. Para usar temas precargados, defina la preloadThemes propiedad en uno de ellos DashboardContentOptions o VisualContentOptions en una matriz de hasta 5. themeArns En el siguiente ejemplo, se precargan los temas Midnight y los temas de Rainier inicio 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);