レポート レイアウトをカスタマイズする

  • [アーティクル]

カスタム レポート レイアウトでは、元のレポートに保存されたものとは異なるレイアウトで Power BI レポートを埋め込むことができます。 カスタム レポート レイアウトを定義すると、レポート ページのサイズを変更したり、ページ上のビジュアルのサイズ、位置、表示を制御したりできます。

カスタム レイアウトの概要

カスタム レポート レイアウトを作成するには、 カスタム レイアウト オブジェクトを定義し、埋め込み構成の設定オブジェクトに渡します。

設定オブジェクトで、layoutType を models.LayoutType.Custom に設定し、customLayout をカスタム レイアウト オブジェクトに設定します。

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

レポート設定の詳細については、「レポート設定を構成する」を参照してください。

カスタム レポート レイアウトを定義する方法

各カスタム レポート レイアウトは、ページ サイズ、キャンバス スケール、およびページ レイアウトを指定するために定義したカスタム レイアウト オブジェクトによって表されます。 ページ レイアウト内では、各ビジュアルのビジュアル レイアウトと、レポートの既定のビジュアル レイアウトを指定できます。

カスタム レイアウト インターフェイスの定義

ICustomLayout インターフェイスを使用して、カスタム レイアウト オブジェクトを定義します。

interface ICustomLayout {
    pageSize?: IPageSize;
    displayOption?: DisplayOption;
    pagesLayout?: PagesLayout;
}

ICustomLayout インターフェイスには、次のプロパティがあります。

  • pageSize - レポートのキャンバス領域のページ サイズを定義する IPageSize オブジェクト。

    interface IPageSize {
    type: PageSizeType;
}

    IPageSize オブジェクトは、PageSizeType 列挙型を使用してページ サイズを設定します。

    enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}

  • displayOption - フレームに収まるようにキャンバスをスケーリングする方法を制御する DisplayOption 列挙型。

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout - ページ上の各ビジュアルのレイアウトを制御する PagesLayout オブジェクト。 このプロパティは、ページ名を PageLayout オブジェクトにマップします。 詳細については、「ページ レイアウトを定義する」を参照してください。

    type PagesLayout = { [key: string]: IPageLayout; }

ページ レイアウトを定義する

IPageLayout インターフェイスを使用して、ページ レイアウト オブジェクトを定義します。 インターフェイスを使用すると、各ビジュアル名を新しいレイアウト オブジェクトと既定のビジュアル レイアウトにマップするビジュアル レイアウト マップを定義できます。 ページ レイアウトの定義は省略可能です。 レポートのレイアウトを指定しない場合、Power BI は既定のレイアウトをレポートに適用します。 つまり、既定のレイアウトは、visuals レイアウト オブジェクトで指定しないすべてのビジュアルに適用されます。 たとえば、最初はレポート内のすべてのビジュアルを非表示にし、選択したビジュアルを選択したレイアウトで表示できます。

interface IPageLayout {
    defaultLayout: IVisualLayout,
    visualsLayout: { [key: string]: IVisualLayout; };
}

IPageLayout インターフェイスには、次のプロパティがあります。

  • defaultLayout - 既定のビジュアル レイアウトを定義する IVisualLayout オブジェクト。 既定のレイアウトは、レポート ページ上のすべてのビジュアルに自動的に適用されます。

    defaultLayout?: IVisualLayout

  • visualsLayout - レポート ページ上のビジュアル名とビジュアル レイアウトの間のマップを定義する VisualsLayout オブジェクト。

    visualsLayout: VisualsLayout

    VisualsLayout = { [key: string]: IVisualLayout; }

ビジュアル レイアウトを定義する

ビジュアル レイアウトを定義するには、IVisualLayout インターフェイスを使用してビジュアル レイアウト オブジェクトを作成し、その位置、サイズ、可視性を設定します。

interface IVisualLayout {
    x?: number;
    y?: number;
    z?: number;
    width?: number;
    height?: number;
    displayState?: IVisualContainerDisplayState;
}

IVisualLayout インターフェイスには、次のプロパティがあります。

  • x、y、z - ビジュアルの x、y、z 座標を定義します。

  • width、height - ビジュアルの幅と高さを定義します。

  • displayState - ビジュアルの可視性を定義する IVisualContainerDisplayState オブジェクト。

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    IVisualContainerDisplayState オブジェクトは、VisualContainerDisplayMode 列挙型を使用して可視性を設定します。

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

レイアウトを更新する

レポートが既に読み込まれているときにレポート レイアウトを更新するには、report.updateSettings メソッドを使用します。 詳細については、「実行時のレポート設定の更新」を参照してください。

例

この完全なコード例では、カスタム レポート レイアウトを使用してレポートを埋め込む方法を示します。 VisualContainer1 と VisualContainer2の 2 つのビジュアルを除き、すべてのビジュアルは非表示になります。 VisualContainer1 には新しいレイアウト、位置、サイズが設定されていますが、VisualContainer2 はレポートの既定のレイアウトで表示されます。

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

let embedConfig = {
    type: 'report',
    id: reportId,
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Embed,
    accessToken: 'H4...rf',
    settings: {
        layoutType: models.LayoutType.Custom
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                width: 1600,
                height: 1200
            },
            displayOption: models.DisplayOption.ActualSize,
            pagesLayout: {
                "ReportSection1" : {
                    defaultLayout: {
                        displayState: {
                            mode: models.VisualContainerDisplayMode.Hidden
                        }
                    },
                    visualsLayout: {
                        "VisualContainer1": {
                            x: 1,
                            y: 1,
                            z: 1,
                            width: 400,
                            height: 300,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                        "VisualContainer2": {
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                    }
                }
            }
        }
    }
};
...
// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfig);

関連コンテンツ