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 des visuels QuickSight intégrés

Vous pouvez utiliser Amazon QuickSight Embedding SDK (version 2.5.0 et supérieure) pour modifier le thème de vos QuickSight tableaux de bord et visuels 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 QuickSight intégrés Amazon. 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 QuickSight actifs sont intégrés. 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, consultezUtilisation de thèmes sur Amazon QuickSight. Pour plus d'informations sur l'utilisation de l' QuickSight intégrationSDK, consultez la section amazon-quicksight-embedding-sdksur GitHub.

Prérequis

Avant de commencer, assurez-vous que vous remplissez les conditions préalables suivantes.

Terminologie et concepts

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

Configuration

Assurez-vous que vous disposez des informations suivantes pour commencer à travailler avec les thèmes d'exécution.

SDKinterface de méthode

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 themeOptions objet dans VisualContentOptions themeOptions les paramètres DashboardContentOptions or, puis définissez la themeArn propriété sur le thème souhaité. ARN

L'exemple suivant initialise un tableau de bord intégré avec le MIDNIGHT thème.

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 intégré. QuickSight Pour initialiser un tableau de bord ou un visuel intégré avec un remplacement de thème, définissez la themeOverride propriété themeOptions dans 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 preloadThemes propriété dans un tableau allant jusqu'à 5 DashboardContentOptions themeArns ou VisualContentOptions dans un tableau. 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);