共用方式為

使用行動版面配置內嵌Power BI報表

  • 發行項

行動使用者可以以橫向方式檢視任何 Power BI 報表頁面。 不過，報表作者可以建立針對行動裝置優化的其他檢視，並以直向顯示。 此設計選項可在Power BI Desktop和Power BI服務中使用，可讓作者只選取並重新排列對行動使用者而言有意義的視覺效果。

如果您的報表具有在 Power BI Desktop 或 Power BI 服務中建立的行動版面配置，您可以在 Web 應用程式中內嵌此版面配置。

如何使用行動版面配置內嵌報表

首先，您需要為報表建立行動版面配置，請參閱 為行動應用程式優化Power BI報表， 建立此版面配置。

若要在報表的行動版面配置中內嵌 Power BI 報表，您應該在設定物件中將 layoutType 設定為 models.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 Client Page 類別會將 hasLayout 方法定義為：

hasLayout(layoutType: any): Promise<boolean>

如果頁面具有指定的版面配置類型，則 hasLayout 方法會傳回布爾值。

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

您可以使用 階段式內嵌 搭配 hasLayout，以便在轉譯報表之前檢查頁面是否有行動版面配置。

撥動事件

在行動版面配置中內嵌報表時，您可以接聽撥動事件，並在 Web 應用程式上執行自定義程式碼。 有兩個撥動事件，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'

相關內容