As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Personalize a aparência de painéis e recursos visuais incorporados

Você pode usar o Amazon QuickSight Embedding SDK (versão 2.5.0 e superior) para fazer alterações no tema de seus QuickSight painéis e recursos visuais incorporados em tempo de execução. A temática de tempo de execução facilita a integração de seu aplicativo de software como serviço (SaaS) com seus ativos incorporados da QuickSight Amazon. A temática de tempo de execução permite que você sincronize o tema do seu conteúdo incorporado com os temas do aplicativo principal no qual seus QuickSight ativos estão incorporados. Você também pode usar temas de tempo de execução para adicionar opções de personalização para os leitores. As alterações de tema podem ser aplicadas aos ativos incorporados na inicialização ou durante toda a vida útil do painel ou visual incorporado.

Para obter mais informações sobre temas, consulteUsando temas na Amazon QuickSight. Para obter mais informações sobre como usar o QuickSight EmbeddingSDK, consulte o amazon-quicksight-embedding-sdkon GitHub.

Pré-requisitos

Antes de começar, verifique se você tem os seguintes pré-requisitos.

Terminologia e conceitos

A terminologia a seguir pode ser útil ao trabalhar com temas de tempo de execução incorporados.

Configuração

Certifique-se de ter as informações a seguir prontas para começar a trabalhar com temas de tempo de execução.

SDKinterface de método

Métodos setter

A tabela a seguir descreve diferentes métodos de configuração que os desenvolvedores podem usar para criar temas de tempo de execução.

Inicializando conteúdo incorporado com um tema

Para inicializar um painel ou visual incorporado com um tema não padrão, defina um themeOptions objeto nos VisualContentOptions parâmetros DashboardContentOptions ou e defina a themeArn propriedade dentro themeOptions do tema desejado. ARN

O exemplo a seguir inicializa um painel incorporado com o MIDNIGHT tema.

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

Inicializando conteúdo incorporado com uma substituição de tema

Os desenvolvedores podem usar substituições de tema para definir o tema de um painel incorporado ou visual em tempo de execução. Isso permite que o painel ou o visual herde um tema de um aplicativo de terceiros sem a necessidade de pré-configurar um tema nele. QuickSight Para inicializar um painel ou visual incorporado com uma substituição de tema, defina a themeOverride propriedade dentro themeOptions dos parâmetros DashboardContentOptions ouVisualContentOptions. O exemplo a seguir substitui a fonte do tema de um painel da fonte padrão para. 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);

Inicializando conteúdo incorporado com temas pré-carregados

Os desenvolvedores podem configurar um conjunto de temas de painel para serem pré-carregados na inicialização. Isso é muito benéfico para alternar rapidamente entre diferentes visualizações, por exemplo, modos escuro e claro. Um painel ou visual incorporado pode ser inicializado com até 5 temas pré-carregados. Para usar temas pré-carregados, defina a preloadThemes propriedade em uma DashboardContentOptions ou VisualContentOptions com uma matriz de até 5themeArns. O exemplo a seguir pré-carrega os temas Rainier iniciais Midnight e em um painel.

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