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

아티클
03/28/2023

모바일 사용자는 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 클라이언트 페이지 클래스는 메서드를 hasLayout 다음과 같이 정의합니다.

hasLayout(layoutType: any): Promise<boolean>

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

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

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

살짝 밀기 이벤트

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

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'