

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Personnalisez l'apparence des tableaux de bord et visuels intégrés d'Amazon Quick Sight
<a name="embedding-runtime-theming"></a>

Vous pouvez utiliser le SDK d'intégration Amazon Quick Sight (version 2.5.0 et supérieure) pour modifier le thème de vos tableaux de bord et visuels Amazon Quick Sight intégrés lors de l'exécution. La thématisation du runtime facilite l'intégration de votre application SaaS (Software as a service) à vos actifs intégrés Amazon Quick Sight. Le thème d'exécution vous permet de synchroniser le thème de votre contenu intégré avec les thèmes de l'application parent dans laquelle vos ressources Amazon Quick Sight sont intégrées. Vous pouvez également utiliser les thèmes d’exécution pour ajouter des options de personnalisation pour les lecteurs. Les modifications de thème peuvent être appliquées aux ressources intégrées lors de l’initialisation ou pendant toute la durée de vie de votre tableau de bord ou visuel intégré.

Pour plus d’informations sur les thèmes, consultez [Utilisation de thèmes dans Amazon Quick Sight](themes-in-quicksight.md). Pour plus d'informations sur l'utilisation du SDK Amazon Quick Sight Embedding, consultez le [amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk) GitHub

**Conditions préalables**

Avant de démarrer, assurez-vous de répondre aux conditions préalables suivantes :
+ Vous utilisez le SDK Amazon Quick Sight Embedding version 2.5.0 ou ultérieure.
+ Autorisations pour accéder au thème avec lequel vous souhaitez travailler. Pour accorder des autorisations à un thème dans Amazon Quick Sight, effectuez un appel d'`UpdateThemePermissions`API ou utilisez l'icône **Partager** située à côté du thème dans l'éditeur d'analyse de la console Amazon Quick Sight.

## Terminologie et concepts
<a name="runtime-theming-terminology"></a>

La terminologie suivante peut être utile lorsque vous utilisez des thèmes d’exécution intégrés.
+ *Thème* : un ensemble de paramètres que vous pouvez appliquer à plusieurs analyses et tableaux de bord qui modifient la présentation du contenu.
+ *ThemeConfiguration*— Objet de configuration contenant toutes les propriétés d'affichage d'un thème.
+ *Remplacer le thème* : objet `ThemeConfiguration` appliqué au thème actif pour remplacer certains ou tous les aspects de la façon dont le contenu est affiché.
+ *ARN du thème* : nom de ressource Amazon (ARN) identifiant un thème Amazon Quick Sight. Voici un exemple d’ARN de thème personnalisé.

  `arn:aws:quicksight:region:account-id:theme/theme-id`

  Les thèmes de démarrage fournis par Amazon Quick Sight ne comportent pas de région dans leur ARN thématique. Voici un exemple d’ARN de thème de démarrage.

  `arn:aws:quicksight::aws:theme/CLASSIC`

## Configuration
<a name="runtime-theming-setup"></a>

Assurez-vous de disposer des informations suivantes pour commencer à utiliser les thèmes d’exécution.
+ Thème ARNs des thèmes que vous souhaitez utiliser. Vous pouvez choisir un thème existant ou en créer un nouveau. Pour obtenir une liste de tous les thèmes ARNs et thèmes de votre compte Amazon Quick Sight, appelez l'opération [ListThemes](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_ListThemes.html)API. Pour plus d'informations sur les thèmes Amazon Quick Sight prédéfinis, consultez[Définition d'un thème par défaut pour les analyses Amazon Quick avec Amazon Quick APIs](customizing-quicksight-default-theme.md).
+ Si vous utilisez l’intégration d’utilisateurs enregistrés, assurez-vous que l’utilisateur a accès aux thèmes que vous souhaitez utiliser.

  Si vous utilisez l'intégration d'utilisateurs anonymes, transmettez une liste de thèmes ARNs au `AuthorizedResourceArns` paramètre de l'`GenerateEmbedUrlForAnonymousUser`API. Les utilisateurs anonymes ont accès à n’importe quel thème répertorié dans le paramètre `AuthorizedResourceArns`.

## Interface de méthode SDK
<a name="runtime-theming-sdk-interface"></a>

**Méthodes Setter**

Le tableau suivant décrit les différentes méthodes de réglage que les développeurs peuvent utiliser pour la thématisation de l’exécution.


| Method | Description | 
| --- | --- | 
|  `setTheme(themeArn: string)`  |  Remplace le thème actif d’un tableau de bord ou d’un visuel par un autre thème. S’il est appliqué, le remplacement du thème est supprimé. Une erreur est renvoyée si vous n’avez pas accès au thème ou si le thème n’existe pas.  | 
|  `setThemeOverride(themeOverride: ThemeConfiguration)`  |  Définit une dynamique `ThemeConfiguration` pour remplacer le thème actif actuel. Cela remplace le remplacement du thème défini précédemment. Toutes les valeurs qui ne sont pas fournies dans le nouveau thème `ThemeConfiguration` sont par défaut celles du thème actuellement actif. Une erreur est renvoyée si le message `ThemeConfiguration` que vous avez fourni n’est pas valide.  | 

## Initialisation du contenu intégré avec un thème
<a name="runtime-theming-sdk-initialize"></a>

Pour initialiser un tableau de bord ou un visuel intégré avec un thème autre que celui par défaut, définissez un objet `themeOptions` sur les paramètres `DashboardContentOptions` ou `VisualContentOptions`, puis définissez la propriété `themeArn` sur `themeOptions` de l’ARN du thème souhaité.

L’exemple suivant initialise un tableau de bord intégré avec le thème `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);
```

## Initialisation du contenu intégré avec un remplacement de thème
<a name="runtime-theming-runtime-initialize-override"></a>

Les développeurs peuvent utiliser des remplacements de thème pour définir le thème d’un tableau de bord intégré ou d’un visuel lors de l’exécution. Cela permet au tableau de bord ou au visuel d'hériter d'un thème d'une application tierce sans qu'il soit nécessaire de préconfigurer un thème dans Amazon Quick Sight. Pour initialiser un tableau de bord ou un visuel intégré avec un remplacement de thème, définissez la propriété `themeOverride` dans `themeOptions` les paramètres `DashboardContentOptions` ou`VisualContentOptions`. L’exemple suivant remplace la police du thème d’un tableau de bord par la police par défaut par `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);
```

## Initialisation du contenu intégré avec des thèmes préchargés
<a name="runtime-theming-runtime-initialize-preloaded"></a>

Les développeurs peuvent configurer un ensemble de thèmes de tableau de bord à précharger lors de l’initialisation. Cela est particulièrement utile pour passer rapidement d’une vue à l’autre, par exemple en mode sombre et en mode clair. Un tableau de bord ou un visuel intégré peut être initialisé avec jusqu’à 5 thèmes préchargés. Pour utiliser des thèmes préchargés, définissez la propriété `preloadThemes` dans un tableau `DashboardContentOptions` ou `VisualContentOptions` allant jusqu’à 5 `themeArns`. L’exemple suivant précharge les thèmes `Midnight` et `Rainier` Starter dans un tableau de bord.

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