다음을 통해 공유

모바일 레이아웃을 사용하여 Power BI 보고서 포함

  • 아티클

모바일 사용자는 모든 Power BI 보고서 페이지를 가로 방향으로 볼 수 있습니다. 그러나 보고서 작성자는 모바일 디바이스에 최적화되고 세로 방향으로 표시되는 추가 보기를 만들 수 있습니다. Power BI Desktop과 Power BI 서비스 모두에서 사용할 수 있는 이 디자인 옵션을 사용하면 작성자가 이동 중에도 모바일 사용자에게 적합한 시각적 개체만 선택하고 다시 정렬할 수 있습니다.

보고서에 Power BI Desktop 또는 Power BI 서비스에서 만든 모바일 레이아웃이 있는 경우 이 레이아웃을 웹 애플리케이션에 포함할 수 있습니다.

모바일 레이아웃을 사용하여 보고서를 포함하는 방법

먼저 보고서에 대한 모바일 레이아웃을 만들고, 이 레이아웃을 만들기 위해 모바일 앱 대한 Power BI 보고서 최적화를 확인합니다.

Power BI 보고서를 보고서의 모바일 레이아웃에 포함하려면 설정 개체에서 layoutTypemodels.LayoutType.MobilePortrait 설정해야 합니다.

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

보고서 설정에 대한 자세한 내용은 보고서 설정 구성참조하세요.

모바일 디바이스 전용 레이아웃 유형에는 다음 두 가지가 있습니다.

  • MobilePortrait - 세로 보기에 최적화되었습니다. 보고서에 대해 만든 모바일 레이아웃입니다.

  • MobileLandscape - 가로 보기에 최적화되어 있습니다. 보고서의 일반 레이아웃입니다.

메모

보고서 레이아웃은 디바이스 실제 방향에 관계없이 layoutType 속성에 의해 결정됩니다.

예를 들어 다음 코드에서는 모바일 레이아웃으로 보고서를 포함하는 방법을 보여 있습니다.

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: reportId,
    embedUrl: embedUrl,
    tokenType: tokenType,
    accessToken: accessToken,
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

보고서가 이미 로드된 경우 보고서 레이아웃을 업데이트하려면 report.updateSettings 메서드를 사용합니다. 자세한 내용은 런타임업데이트 보고서 설정을 참조하세요.

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

보고서 페이지에 모바일 레이아웃이 있는지 확인

Power BI 클라이언트 Page 클래스는 hasLayout 메서드를 다음과 같이 정의합니다.

hasLayout(layoutType: any): Promise<boolean>

페이지에 지정된 레이아웃 형식이 있는 경우 hasLayout 메서드는 부울을 반환합니다.

let pages = await report.getPages();
let mobileLayout = pages[0].hasLayout(models.LayoutType.MobilePortrait);

보고서를 렌더링하기 전에 페이지에 모바일 레이아웃이 있는지 확인하기 위해 hasLayout단계별 포함 사용할 수 있습니다.

살짝 밀기 이벤트

모바일 레이아웃에 보고서를 포함할 때 살짝 밀기 이벤트를 수신 대기하고 웹 애플리케이션에서 사용자 지정 코드를 실행할 수 있습니다. 두 개의 살짝 밀기 이벤트가 있습니다. swipeStart 및 swipeEnd 모두 다음 형식을 반환합니다.

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

예를 들어 swipeEnd 이벤트를 사용하여 왼쪽 살짝 밀기를 검색할 수 있습니다.

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        console.log("Swipe left detected");
    }
});

이벤트 처리에 대한 자세한 내용은 이벤트처리하는 방법을 참조하세요.

사용자 지정 레이아웃을 사용하여 앱 최적화

사용자 지정 레이아웃 기능을 사용하여 다양한 모바일 또는 태블릿 화면에 최적화된 사용자 지정 레이아웃을 만들 수도 있습니다.

고려 사항 및 제한 사항

  • 보고서 초기 로드 후에는 모바일 레이아웃(세로/가로)이 초기 포함 구성 개체로 설정된 경우에만 보고서 모바일 레이아웃으로 변경이 지원됩니다. 그렇지 않으면 먼저 powerbi.reset(HTMLElement) 호출하여 iframe을 제거해야 합니다. 그런 다음 포함된 구성 개체에 정의된 모바일 레이아웃 설정을 사용하여 동일한 컨테이너를 사용하여 powerbi.embed(...) 호출해야 합니다.

  • MobilePortrait 레이아웃으로 보고서 페이지를 포함하려고 하면 페이지에 모바일 레이아웃이 없으면 페이지가 MobileLandscape 레이아웃과 함께 로드됩니다.

  • 사용자가 모바일 레이아웃을 사용하는 동안 페이지 간을 탐색할 수 있도록 하려면 report.setPage 사용하여 고유한 탐색을 구현할 수 있습니다. 자세한 내용은 페이지 탐색참조하세요.

  • 위의 구성은 모바일 보기에 Power BI 보고서를 포함하는 것을 가리킵니다.
    pageView 구성을 사용하여 모바일 레이아웃에 포함된 대시보드를 구성할 수 있습니다. pageView: 'oneColumn'

관련 콘텐츠

  • 모바일 앱 대한 Power BI 보고서 최적화
  • 보고서 레이아웃 개인 설정
  • 이벤트 처리하는 방법