기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

내장된 대시보드 및 시각적 개체의 모양과 느낌을 사용자 지정합니다.

Amazon QuickSight Embedding SDK (버전 2.5.0 이상) 을 사용하여 런타임에 내장된 QuickSight 대시보드 및 시각적 개체의 테마를 변경할 수 있습니다. 런타임 테마를 사용하면 SaaS (Software as a Service) 애플리케이션을 QuickSight Amazon 임베디드 자산과 쉽게 통합할 수 있습니다. 런타임 테마를 사용하면 임베디드 콘텐츠의 테마를 QuickSight 자산이 임베드된 상위 애플리케이션의 테마와 동기화할 수 있습니다. 또한 런타임 테마를 사용하여 독자를 위한 사용자 지정 옵션을 추가할 수 있습니다. 테마 변경 사항은 초기화 시 또는 내장된 대시보드 또는 비주얼의 전체 수명 주기 동안 임베디드 자산에 적용할 수 있습니다.

테마에 대한 자세한 내용은 을 참조하십시오. 아마존에서 테마 사용하기 QuickSight QuickSight 임베딩 사용에 대한 자세한 내용은 SDK amazon-quicksight-embedding-sdk GitHubon을 참조하십시오.

사전 조건 

시작하기 전에 다음과 같은 사전 요구 사항이 있는지 확인하세요.

용어 및 개념

다음 용어는 내장된 런타임 테마를 사용할 때 유용할 수 있습니다.

설정

런타임 테마 작업을 시작하는 데 필요한 다음 정보를 준비했는지 확인하세요.

SDK메서드 인터페이스

세터 메서드

다음 표에서는 개발자가 런타임 테마에 사용할 수 있는 다양한 setter 메서드에 대해 설명합니다.

테마를 사용하여 임베디드 콘텐츠 초기화하기

기본 테마가 아닌 내장 대시보드 또는 비주얼을 초기화하려면 DashboardContentOptions 또는 VisualContentOptions 매개변수에서 themeOptions 개체를 정의하고 themeArn 속성을 원하는 themeOptions 테마로 설정합니다. ARN

다음 예제에서는 테마를 사용하여 내장된 대시보드를 초기화합니다. 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);

테마 오버라이드로 임베디드 콘텐츠 초기화

개발자는 테마 오버라이드를 사용하여 런타임에 임베디드 대시보드 또는 비주얼의 테마를 정의할 수 있습니다. 이렇게 하면 대시보드 또는 비주얼에서 테마를 미리 구성할 필요 없이 타사 응용 프로그램의 테마를 상속할 수 있습니다. QuickSight 테마 오버라이드가 포함된 내장된 대시보드 또는 비주얼을 초기화하려면 or 매개 변수 내에서 themeOverride themeOptions 속성을 설정하십시오. DashboardContentOptions VisualContentOptions 다음 예제에서는 대시보드 테마의 글꼴을 기본 글꼴에서 로 재정의합니다. 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);

미리 로드된 테마로 임베디드 콘텐츠 초기화

개발자는 초기화 시 미리 로드되도록 대시보드 테마 세트를 구성할 수 있습니다. 이는 서로 다른 보기 (예: 어두운 모드와 밝은 모드) 간에 빠르게 전환할 때 가장 유용합니다. 내장된 대시보드 또는 비주얼은 최대 5개의 사전 로드된 테마로 초기화할 수 있습니다. 미리 로드된 테마를 사용하려면 preloadThemes 속성을 둘 중 하나 DashboardContentOptions 또는 최대 VisualContentOptions 5개의 배열로 설정하십시오. themeArns 다음 예제는 Midnight 및 Rainier 시작 테마를 대시보드에 미리 로드합니다.

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