Personalice la apariencia de los paneles y elementos visuales QuickSight integrados

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.

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.

Puede usar el SDK de Amazon QuickSight Embedding (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 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 QuickSight incrustación, consulta la siguiente. amazon-quicksight-embedding-sdk 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 de control o el elemento visual hereden un tema de una aplicación de terceros sin necesidad de preconfigurar un tema. 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);