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

QuickSight 임베디드 대시보드 및 시각적 객체의 모양 및 느낌 사용자 지정

Amazon QuickSight EmbeddingSDK(버전 2.5.0 이상)을 사용하여 런타임 시 임베디드 QuickSight 대시보드 및 시각적 객체의 테마를 변경할 수 있습니다. 런타임 테마를 사용하면 서비스형 소프트웨어(SaaS) 애플리케이션을 Amazon QuickSight 임베디드 자산과 더 쉽게 통합할 수 있습니다. 런타임 테마를 사용하면 임베디드 콘텐츠의 테마를 QuickSight 자산이 임베디드되는 상위 애플리케이션의 테마와 동기화할 수 있습니다. 런타임 테마 지정을 사용하여 독자에 대한 사용자 지정 옵션을 추가할 수도 있습니다. 테마 지정 변경 사항은 초기화 시 또는 임베디드 대시보드 또는 시각적 객체의 수명 기간 동안 임베디드 자산에 적용할 수 있습니다.

테마에 대한 자세한 정보는 Amazon QuickSight에서 테마 사용 섹션을 참조하세요. QuickSight 임베딩 사용에 대한 자세한 내용은의 섹션을 SDK참조amazon-quicksight-embedding-sdk하세요 GitHub.

사전 조건 

시작하기 전에 다음 사전 조건을 충족하는지 확인합니다.

용어 및 개념

다음 용어는 임베디드 런타임 지정을 작업할 때 유용할 수 있습니다.

설정

런타임 테마 지정 작업을 시작할 수 있도록 다음 정보가 준비되어 있는지 확인합니다.

SDK 메서드 인터페이스

Setter 메서드

다음 테이블에서는 개발자가 테마 지정에 사용할 수 있는 다양한 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. 테마 재정의로 임베디드 대시보드 또는 시각적 객체를 초기화하려면 DashboardContentOptions 또는 VisualContentOptions 파라미터에서 themeOptions 내에 themeOverride 속성을 설정합니다. 다음 예제에서는 대시보드 테마의 글꼴을 기본 글꼴에서 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개의 사전 로드된 테마로 초기화할 수 있습니다. 사전 로드된 테마를 사용하려면 DashboardContentOptions 또는 VisualContentOptions에서 preloadThemes 속성을 최대 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);