使用行動版面配置內嵌 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 用戶端 頁面 類別會將 方法定義為 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'

下一步