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 der eingebetteten Dashboards und Grafiken von Amazon Quick Sight an
<a name="embedding-runtime-theming"></a>

Sie können das Amazon Quick Sight Embedding SDK (Version 2.5.0 und höher) verwenden, um zur Laufzeit Änderungen am Design Ihrer eingebetteten Amazon Quick Sight-Dashboards und Grafiken vorzunehmen. Runtime-Theming erleichtert die Integration Ihrer SaaS-Anwendung (Software as a Service) in Ihre eingebetteten Amazon Quick Sight-Ressourcen. Mit Runtime-Theming können Sie das Design Ihrer eingebetteten Inhalte mit den Themen der übergeordneten Anwendung synchronisieren, in die Ihre Amazon Quick Sight-Assets 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 Themen in Amazon Quick Sight](themes-in-quicksight.md). Weitere Informationen zur Verwendung des Amazon Quick Sight Embedding SDK finden Sie [amazon-quicksight-embedding-sdk](https://github.com/awslabs/amazon-quicksight-embedding-sdk)unter GitHub.

**Voraussetzungen**

Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie die folgenden Voraussetzungen erfüllen.
+ Sie verwenden das Amazon Quick Sight Embedding SDK Version 2.5.0 oder höher.
+ Sie haben Zugriffsberechtigungen für das Design, mit dem Sie arbeiten möchten. Um Berechtigungen für ein Theme in Amazon Quick Sight zu erteilen, rufen Sie die `UpdateThemePermissions` API auf oder verwenden Sie das **Share-Symbol** neben dem Theme im Analyse-Editor der Amazon Quick Sight-Konsole.

## Terminologie und Konzepte
<a name="runtime-theming-terminology"></a>

Die folgende Terminologie kann nützlich sein, wenn Sie mit eingebetteten Laufzeitdesigns arbeiten.
+ *Design* – Eine Sammlung von Einstellungen, die Sie auf mehrere Analysen und Dashboards anwenden können.
+ *ThemeConfiguration*— Ein Konfigurationsobjekt, das alle Anzeigeeigenschaften für ein Thema enthält.
+ *Designaufhebung* – Ein `ThemeConfiguration`-Objekt, das auf das aktive Designs angewendet wird, um einige oder alle Aspekte der Inhaltsdarstellung außer Kraft zu setzen.
+ *Theme-ARN* — Ein Amazon-Ressourcenname (ARN), der ein Amazon Quick Sight-Theme identifiziert. Es folgt ein Beispiel für einen benutzerdefinierten Design-ARN.

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

  Amazon Quick Sight vorausgesetzt, dass Starter-Themes keine Region in ihrem Themen-ARN haben. Im Folgenden sehen Sie ein Beispiel eines Starterdesign-ARN.

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

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

Stellen Sie sicher, dass Sie die folgenden Informationen bereit haben, um mit der Arbeit mit Laufzeitdesigns zu beginnen.
+ Das Thema ARNs der Themes, die Sie verwenden möchten. Sie können ein vorhandenes Design auswählen oder ein neues erstellen. Rufen Sie den [ListThemes](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_ListThemes.html)API-Vorgang auf, um eine Liste aller Themen und Themen ARNs in Ihrem Amazon Quick Sight-Konto zu erhalten. Informationen zu voreingestellten Amazon Quick Sight-Designs finden Sie unter[Ein Standarddesign für Amazon Quick-Analysen mit Amazon Quick festlegen APIs](customizing-quicksight-default-theme.md).
+ Wenn Sie die Einbettung registrierter Benutzer verwenden, stellen Sie sicher, dass der Benutzer Zugriff auf die Designs hat, die Sie verwenden möchten.

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

## SDK-Methodenschnittstelle
<a name="runtime-theming-sdk-interface"></a>

**Setter-Methoden**

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


| Methode | Description | 
| --- | --- | 
|  `setTheme(themeArn: string)`  |  Ersetzt das aktive Design eines Dashboards oder einer Visualisierung durch ein anderes Design. Falls angewendet, wird die Designaufhebung entfernt. Ein Fehler wird zurückgegeben, wenn Sie keinen Zugriff auf das Design haben oder wenn das Design nicht existiert.  | 
|  `setThemeOverride(themeOverride: ThemeConfiguration)`  |  Legt eine dynamische `ThemeConfiguration` fest, die das aktuell aktive Design aufhebt. Dies ersetzt die zuvor festgelegte Designaufhebung. Alle Werte, die nicht in der neuen `ThemeConfiguration` enthalten sind, werden standardmäßig auf die Werte des aktuell aktiven Designs gesetzt. Wenn die von Ihnen eingegebene `ThemeConfiguration` ungültig ist, wird ein Fehler zurückgegeben.  | 

## Initialisieren eingebetteter Inhalte mit einem Design
<a name="runtime-theming-sdk-initialize"></a>

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
<a name="runtime-theming-runtime-initialize-override"></a>

Entwickler können Designaufhebungen verwenden, um das Design eines eingebetteten Dashboards oder einer Visualisierung zur Laufzeit zu definieren. Dadurch kann das Dashboard oder Visual ein Design von einer Drittanbieteranwendung erben, ohne dass ein Design in Amazon Quick Sight 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
<a name="runtime-theming-runtime-initialize-preloaded"></a>

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