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 de Amazon Quick Sight
Puede utilizar el SDK de incrustación de Amazon Quick Sight (versión 2.5.0 y superior) para realizar cambios en la temática de los paneles y elementos visuales de Amazon Quick Sight integrados durante el tiempo de ejecución. La tematización en tiempo de ejecución facilita la integración de la aplicación de software como servicio (SaaS) con los activos integrados de Amazon Quick Sight. La tematización 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 integrados sus activos de Amazon Quick Sight. 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 Quick Sight](themes-in-quicksight.md). Para obtener más información sobre el uso del SDK de incrustación de Amazon Quick Sight, consulte [amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk)la GitHub
**Requisitos previos**
Antes de empezar, asegúrese de que cumple los requisitos previos que se indican a continuación.
+ Está utilizando la versión 2.5.0 o superior del SDK de incrustación de Amazon Quick Sight.
+ Dispone de permisos para acceder al tema con el que quiere trabajar. Para conceder permisos a un tema en Amazon Quick Sight, realice una llamada a la `UpdateThemePermissions` API o utilice el icono **Compartir** situado junto al tema en el editor de análisis de la consola Amazon Quick Sight.
## Terminología y conceptos
La siguiente terminología puede resultar útil cuando se trabaja con temas de tiempo de ejecución incrustados.
+ *Tema*: conjunto de ajustes que puede aplicar a varios análisis y paneles que cambian la forma en que se muestra el contenido.
+ *ThemeConfiguration*— Un objeto de configuración que contiene todas las propiedades de visualización de un tema.
+ *Anulación del tema*: objeto `ThemeConfiguration` que se aplica al tema activo para anular algunos o todos los aspectos de la visualización del contenido.
+ *ARN del tema: un* nombre de recurso de Amazon (ARN) que identifica un tema de Amazon Quick Sight. A continuación se muestra un ejemplo de ARN de tema personalizado.
`arn:aws:quicksight:region:account-id:theme/theme-id`
Los temas de inicio proporcionados por Amazon Quick Sight no tienen una región en su ARN de tema. A continuación, se muestra un ejemplo de ARN de tema de inicio.
`arn:aws:quicksight::aws:theme/CLASSIC`
## 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.
+ El tema ARNs de los temas que quieres usar. Puede elegir un tema existente, o bien puede crear uno nuevo. Para obtener una lista de todos los temas y temas ARNs de tu cuenta de Amazon Quick Sight, realiza una llamada a la operación de la [ListThemes](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_ListThemes.html)API. Para obtener información sobre los temas preestablecidos de Amazon Quick Sight, consulte[Establecer un tema predeterminado para los análisis de Amazon Quick con Amazon Quick APIs](customizing-quicksight-default-theme.md).
+ Si usa la incrustación de usuarios registrados, asegúrese de que el usuario tenga acceso a los temas que desea usar.
Si utiliza la incrustación de usuarios anónimos, pase una lista de temas ARNs al `AuthorizedResourceArns` parámetro de la `GenerateEmbedUrlForAnonymousUser` API. Los usuarios anónimos tienen acceso a cualquier tema que aparezca en el parámetro `AuthorizedResourceArns`.
## 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.
| Método | Description (Descripción) |
| --- | --- |
| `setTheme(themeArn: string)` | Sustituye el tema activo de un panel o elemento visual por otro tema. Si se aplica, se elimina la anulación del tema. Se devuelve un error si no tiene acceso al tema o si el tema no existe. |
| `setThemeOverride(themeOverride: ThemeConfiguration)` | Establece una `ThemeConfiguration` dinámica para anular el tema activo actual. Esto reemplaza la anulación del tema previamente establecida. Los valores que no se proporcionen en el nuevo `ThemeConfiguration` se establecen de forma predeterminada con los valores del tema actualmente activo. Se devuelve un error si el `ThemeConfiguration` proporcionado no es válido. |
## 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: '',
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 un tema en Amazon Quick Sight. 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: '',
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: '',
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);
```