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

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. Pour plus d'informations sur l'utilisation du SDK Amazon Quick Sight Embedding, consultez le amazon-quicksight-embedding-sdk GitHub

Prérequis

Avant de démarrer, assurez-vous de répondre aux conditions préalables suivantes :

Terminologie et concepts

La terminologie suivante peut être utile lorsque vous utilisez des thèmes d’exécution intégrés.

Configuration

Assurez-vous de disposer des informations suivantes pour commencer à utiliser les thèmes d’exécution.

Interface de méthode SDK

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.

Initialisation du contenu intégré avec un thème

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

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 ouVisualContentOptions. 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

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