Anpassen des Erscheinungsbilds der eingebetteten QuickSight-Dashboards und -Visualisierungen

Sie können das Amazon QuickSight Embedding SDK (Version 2.5.0 und höher) verwenden, um zur Laufzeit Änderungen am Design Ihrer eingebetteten QuickSight-Dashboards und -Visualisierungen vorzunehmen. Mithilfe von Laufzeitdesign ist es einfacher, Ihre SaaS-Anwendung (Software-as-a-Service) in Ihre eingebetteten Amazon QuickSight-Ressourcen zu integrieren. Mit Laufzeitdesign können Sie das Design Ihrer eingebetteten Inhalte mit den Designs der übergeordneten Anwendung synchronisieren, in die Ihre QuickSight-Ressourcen eingebettet sind. Sie können das Laufzeitdesign auch verwenden, um Anpassungsoptionen für Leser hinzuzufügen. Änderungen am Design können bei der Initialisierung oder während der gesamten Lebensdauer Ihres eingebetteten Dashboards oder Ihrer eingebetteten Visualisierung auf eingebettete Ressourcen angewendet werden.

Weitere Informationen zu Designs finden Sie unter Verwenden von Designs in Amazon QuickSight. Weitere Informationen zur Verwendung des QuickSight Embedding SDK finden Sie im amazon-quicksight-embedding-sdk auf GitHub.

Voraussetzungen

Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie die folgenden Voraussetzungen erfüllen.

Terminologie und Konzepte

Die folgende Terminologie kann nützlich sein, wenn Sie mit eingebetteten Laufzeitdesigns arbeiten.

Einrichtung

Stellen Sie sicher, dass Sie die folgenden Informationen bereit haben, um mit der Arbeit mit Laufzeitdesigns zu beginnen.

SDK-Methodenschnittstelle

Setter-Methoden

In der folgenden Tabelle werden verschiedene Setter-Methoden beschrieben, die Entwickler bei Laufzeitdesigns verwenden können.

Initialisieren eingebetteter Inhalte mit einem Design

Um ein eingebettetes Dashboard oder eine eingebettete Visualisierung mit einem nicht standardmäßigen Design zu initialisieren, definieren Sie ein themeOptions-Objekt in den Parametern DashboardContentOptions oder VisualContentOptions und legen Sie die in themeOptions enthaltene Eigenschaft themeArn auf den gewünschten Design-ARN fest.

Im folgenden Beispiel wird ein eingebettetes Dashboard mit dem Design MIDNIGHT initialisiert.

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

Initialisieren eingebetteter Inhalte mit einer Designaufhebung

Entwickler können Designaufhebungen verwenden, um das Design eines eingebetteten Dashboards oder einer Visualisierung zur Laufzeit zu definieren. Dadurch kann das Dashboard oder die Visualisierung ein Design von einer Drittanbieteranwendung erben, ohne dass ein Design in QuickSight vorkonfiguriert werden muss. Um ein eingebettetes Dashboard oder eine Visualisierung mit einer Designaufhebung zu initialisieren, legen Sie die Eigenschaft themeOverride innerhalb von themeOptions in den Parametern DashboardContentOptions oder VisualContentOptions fest. Im folgenden Beispiel wird die Schriftart eines Dashboard-Designs von der Standardschrift in Amazon Ember überschrieben.

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

Initialisieren eingebetteter Inhalte mit vorgeladenen Designs

Entwickler können eine Reihe von Dashboard-Designs so konfigurieren, dass sie bei der Initialisierung vorgeladen werden. Dies ist besonders nützlich, wenn Sie schnell zwischen verschiedenen Ansichten wechseln möchten, z. B. vom Dunkel- und in den Hellmodus. Ein eingebettetes Dashboard oder eine eingebettete Visualisierung kann mit bis zu 5 vorgeladenen Designs initialisiert werden. Um vorgeladene Designs zu verwenden, legen Sie die Eigenschaft preloadThemes innerhalb von DashboardContentOptions oder VisualContentOptions mit einem Array von bis zu 5 themeArns fest. Im folgenden Beispiel werden die Starterdesigns Midnight und Rainier vorab in ein Dashboard geladen.

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