Passen Sie das Erscheinungsbild eingebetteter Dashboards und Grafiken an - Amazon QuickSight

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Passen Sie das Erscheinungsbild eingebetteter Dashboards und Grafiken an

Sie können Amazon QuickSight Embedding SDK (Version 2.5.0 und höher) verwenden, um zur Laufzeit Änderungen am Design Ihrer eingebetteten QuickSight Dashboards und Grafiken vorzunehmen. Runtime-Theming erleichtert die Integration Ihrer SaaS-Anwendung (Software as a Service) in Ihre QuickSight eingebetteten Amazon-Ressourcen. Mit Runtime-Theming können Sie das Design Ihrer eingebetteten Inhalte mit den Themen der übergeordneten Anwendung synchronisieren, in die Ihre QuickSight Ressourcen eingebettet sind. Sie können Runtime-Theming 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 Visuals auf eingebettete Assets angewendet werden.

Weitere Informationen zu Designs finden Sie unter. Themes in Amazon verwenden QuickSight Weitere Informationen zur Verwendung der QuickSight Einbettung SDK finden Sie amazon-quicksight-embedding-sdkunter GitHub.

Voraussetzungen

Bevor Sie beginnen können, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen.

  • Sie verwenden die QuickSight SDK Embedding-Version 2.5.0 oder höher.

  • Berechtigungen für den Zugriff auf das Theme, mit dem Sie arbeiten möchten. UpdateThemePermissionsAPIRufen Sie an oder klicken Sie im QuickSight Analyse-Editor der QuickSight Konsole auf das Symbol „Teilen“ neben dem Theme, um Berechtigungen für ein Theme zu erteilen.

Terminologie und Konzepte

Die folgende Terminologie kann bei der Arbeit mit eingebettetem Runtime-Theming nützlich sein.

  • Theme — Eine Sammlung von Einstellungen, die Sie auf mehrere Analysen und Dashboards anwenden können, um zu ändern, wie der Inhalt angezeigt wird.

  • ThemeConfiguration— Ein Konfigurationsobjekt, das alle Anzeigeeigenschaften für ein Thema enthält.

  • Theme Override — Ein ThemeConfiguration Objekt, das auf das aktive Design angewendet wird, um einige oder alle Aspekte der Inhaltsanzeige außer Kraft zu setzen.

  • Theme ARN — Ein Amazon-Ressourcenname (ARN), der ein QuickSight Theme identifiziert. Im Folgenden finden Sie ein Beispiel für ein benutzerdefiniertes DesignARN.

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

    QuickSight vorausgesetzt, Starter-Themes haben keine Region in ihrem ThemaARN. Im Folgenden finden Sie ein Beispiel für ein Starter-ThemeARN.

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

Einrichtung

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

  • Das Theme ARNs der Themes, die Sie verwenden möchten. Sie können ein vorhandenes Thema auswählen oder ein neues erstellen. Rufen Sie den ListThemesAPIBetrieb auf, um eine Liste aller Themen und Themen ARNs in Ihrem QuickSight Konto zu erhalten. Informationen zu voreingestellten QuickSight Themen finden Sie unterFestlegen eines Standarddesigns für Amazon- QuickSight Analysen.

  • Wenn Sie die Einbettung registrierter Benutzer verwenden, stellen Sie sicher, dass der Benutzer Zugriff auf die Themen hat, die Sie verwenden möchten.

    Wenn Sie die Einbettung anonymer Benutzer verwenden, übergeben Sie eine Themenliste ARNs an den AuthorizedResourceArns Parameter von. GenerateEmbedUrlForAnonymousUser API Anonymen Benutzern wird Zugriff auf jedes Design gewährt, das im AuthorizedResourceArns Parameter aufgeführt ist.

SDKMethodenschnittstelle

Setter-Methoden

In der folgenden Tabelle werden verschiedene Setter-Methoden beschrieben, die Entwickler für das Runtime-Theming verwenden können.

Methode Beschreibung

setTheme(themeArn: string)

Ersetzt das aktive Design eines Dashboards oder Visuals durch ein anderes Design. Falls angewendet, wird die Theme-Override entfernt.

Ein Fehler wird zurückgegeben, wenn Sie keinen Zugriff auf das Theme haben oder wenn das Theme nicht existiert.

setThemeOverride(themeOverride: ThemeConfiguration)

Legt eine Dynamik festThemeConfiguration, die das aktuell aktive Design überschreibt. Dies ersetzt die zuvor festgelegte Theme-Override. Alle Werte, die nicht im neuen Design enthalten ThemeConfiguration sind, werden standardmäßig auf die Werte des aktuell aktiven Themes gesetzt.

Wenn die von Ihnen eingegebene Angabe ungültig istThemeConfiguration, wird ein Fehler zurückgegeben.

Initialisierung eingebetteter Inhalte mit einem Design

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

Im folgenden Beispiel wird ein eingebettetes Dashboard mit dem Design initialisiert. 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);

Initialisierung eingebetteter Inhalte mit einem Theme-Override

Entwickler können Theme-Overrides verwenden, um das Design eines eingebetteten Dashboards oder Visuals zur Laufzeit zu definieren. Auf diese Weise kann das Dashboard oder das Visual ein Theme von einer Drittanbieteranwendung übernehmen, ohne dass ein Theme darin vorkonfiguriert werden muss. QuickSight Um ein eingebettetes Dashboard oder eine Grafik mit einem Theme-Override zu initialisieren, legen Sie die themeOverride Eigenschaft entweder themeOptions in den DashboardContentOptions Parametern oder fest. VisualContentOptions Im folgenden Beispiel wird die Schriftart eines Dashboard-Designs von der Standardschrift auf überschrieben. 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);

Initialisierung eingebetteter Inhalte mit vorinstallierten Designs

Entwickler können eine Reihe von Dashboard-Designs so konfigurieren, dass sie bei der Initialisierung vorinstalliert werden. Dies ist besonders nützlich, wenn Sie schnell zwischen verschiedenen Ansichten wechseln möchten, z. B. im Dunkel- und im Hellmodus. Ein eingebettetes Dashboard oder eine eingebettete Grafik kann mit bis zu 5 vorinstallierten Designs initialisiert werden. Um vorinstallierte Designs zu verwenden, legen Sie die preloadThemes Eigenschaft entweder auf DashboardContentOptions oder VisualContentOptions mit einem Array von bis zu 5 Designs fest. themeArns Im folgenden Beispiel werden die Designs Midnight und Rainier Starter-Themen 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);