Freigeben über

Personalisieren eines Berichtslayouts

  • Artikel

Mit einem benutzerdefinierten Berichtslayout können Sie einen Power BI-Bericht mit einem anderen Layout einbetten als das, was im ursprünglichen Bericht gespeichert wurde. Wenn Sie ein benutzerdefiniertes Berichtslayout definieren, können Sie die Größe einer Berichtsseite variieren und die Größe, Position und Sichtbarkeit visueller Elemente auf der Seite steuern.

Übersicht über das benutzerdefinierte Layout

Um ein benutzerdefiniertes Berichtslayout zu erstellen, definieren Sie ein benutzerdefiniertes Layoutobjekt und übergeben es an das Einstellungsobjekt in einer Einbettungskonfiguration.

Legen Sie im Einstellungsobjekt layoutType auf models.LayoutType.Custom fest, und legen Sie customLayout auf Ihr benutzerdefiniertes Layoutobjekt fest:

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

Weitere Informationen zu Berichtseinstellungen finden Sie unter Konfigurieren von Berichtseinstellungen.

So definieren Sie ein benutzerdefiniertes Berichtslayout

Jedes benutzerdefinierte Berichtslayout wird durch ein benutzerdefiniertes Layoutobjekt dargestellt, das Sie definieren, um das Seitenformat, die Canvasskala und das Seitenlayout anzugeben. Innerhalb des Seitenlayouts können Sie ein visuelles Layout für jedes visuelle Layout und ein standardmäßiges visuelles Layout für den Bericht angeben.

Definition der benutzerdefinierten Layoutschnittstelle

Verwenden Sie die ICustomLayout-Schnittstelle, um ein benutzerdefiniertes Layoutobjekt zu definieren:

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

Die ICustomLayout Schnittstelle weist die folgenden Eigenschaften auf:

  • pageSize – Ein IPageSize-Objekt, das die Seitengröße des Zeichenbereichs für den Bericht definiert.

    interface IPageSize {
    type: PageSizeType;
}

    Das IPageSize-Objekt verwendet die PageSizeType Enumeration, um die Seitengröße festzulegen:

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

  • displayOption – Eine DisplayOption Enumeration, die steuert, wie die Canvas so skaliert wird, dass sie in den Frame passt.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout – Ein PagesLayout-Objekt, das das Layout für jedes visuelle Element auf einer Seite steuert. Diese Eigenschaft ordnet einem PageLayout-Objekt einen Seitennamen zu. Weitere Informationen finden Sie unter Definieren eines Seitenlayouts.

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

Definieren eines Seitenlayouts

Verwenden Sie die IPageLayout Schnittstelle, um ein Seitenlayoutobjekt zu definieren. Über die Schnittstelle können Sie eine visuelle Layoutzuordnung definieren, die jedem visuellen Namen ein neues Layoutobjekt und ein standardmäßiges visuelles Layout zuordnet. Das Definieren eines Seitenlayouts ist optional. Wenn Sie kein Layout für einen Bericht bereitstellen, wendet Power BI das Standardlayout auf den Bericht an. Das Standardlayout gilt also für alle visuellen Elemente, die Sie im visuellen Layoutobjekt nicht angeben. Sie können z. B. zunächst alle visuellen Elemente in einem Bericht ausblenden und dann ausgewählte visuelle Elemente im Layout Ihrer Wahl anzeigen.

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

Die IPageLayout Schnittstelle weist die folgenden Eigenschaften auf:

  • defaultLayout – Ein IVisualLayout-Objekt, das das standardmäßige visuelle Layout definiert. Das Standardlayout wird automatisch auf alle visuellen Elemente auf der Berichtsseite angewendet.

    defaultLayout?: IVisualLayout

  • visualsLayout – Ein VisualsLayout-Objekt, das eine Zuordnung zwischen den visuellen Namen und visuellen Layouts auf der Berichtsseite definiert.

    visualsLayout: VisualsLayout

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

Definieren eines visuellen Layouts

Verwenden Sie zum Definieren eines visuellen Layouts die IVisualLayout Schnittstelle, um ein visuelles Layoutobjekt zu erstellen und seine Position, Größe und Sichtbarkeit festzulegen.

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

Die IVisualLayout Schnittstelle weist die folgenden Eigenschaften auf:

  • x,y,z – Definiert die X-, Y- und Z-Koordinaten des visuellen Elements.

  • width, height – Definiert die Breite und Höhe des visuellen Elements.

  • displayState – Ein IVisualContainerDisplayState-Objekt, das die Sichtbarkeit des visuellen Elements definiert.

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    Das IVisualContainerDisplayState-Objekt verwendet die VisualContainerDisplayMode Enumeration, um die Sichtbarkeit festzulegen:

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

Aktualisieren des Layouts

Um das Berichtslayout zu aktualisieren, wenn der Bericht bereits geladen wurde, verwenden Sie die report.updateSettings-Methode. Weitere Informationen finden Sie unter Aktualisieren der Berichtseinstellungen zur Laufzeit.

Beispiel

In diesem vollständigen Codebeispiel wird gezeigt, wie Sie einen Bericht mit einem benutzerdefinierten Berichtslayout einbetten. Alle visuellen Elemente sind mit Ausnahme von zwei visuellen Elementen ausgeblendet: VisualContainer1 und VisualContainer2. VisualContainer1 verfügt über ein neues Layout, eine neue Position und größe, während VisualContainer2- mit dem Standardlayout des Berichts sichtbar ist.

// 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);

Verwandte Inhalte