Personalisieren eines Berichtslayouts

Artikel
09/17/2023

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 von Visuellen auf der Seite steuern.

Übersicht über benutzerdefiniertes Layout

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

Legen Sie im Einstellungsobjekt auf Ihr benutzerdefiniertes Layoutobjekt festmodels.LayoutType.Custom, und legen layoutType Sie sie festcustomLayout:

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

Weitere Informationen zu Berichtseinstellungen finden Sie unter Konfigurieren von Berichtseinstellungen.

Definieren eines benutzerdefinierten Berichtslayouts

Jedes benutzerdefinierte Berichtslayout wird durch ein benutzerdefiniertes Layoutobjekt dargestellt, das Sie zum Angeben der Seitengröße, des Zeichenbereichs und des Seitenlayouts definieren. Im Seitenlayout 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 Canvasbereichs 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 der Canvas in den Rahmen 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. Mit der Benutzeroberfläche können Sie eine visuelle Layoutzuordnung definieren, die jedem visuellen Namen ein neues Layoutobjekt und ein standardmäßiges visuelles Layout zugeordnet. 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 heißt, das Standardlayout gilt für alle Visuellen, die Sie nicht im visuellen Layoutobjekt angeben. Sie können beispielsweise 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 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

Um ein visuelles Layout zu definieren, verwenden Sie 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 definiert.
```
interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}
```
Das IVisualContainerDisplayState Objekt verwendet die Enumeration, um die VisualContainerDisplayMode Sichtbarkeit festzulegen:
```
enum VisualContainerDisplayMode {
    Visible,
    Hidden
}
```

Aktualisieren des Layouts

Verwenden Sie die report.updateSettings Methode, um das Berichtslayout zu aktualisieren, wenn der Bericht bereits geladen wird. Weitere Informationen finden Sie unter Updateberichtseinstellungen zur Laufzeit.

Beispiel

In diesem vollständigen Codebeispiel wird gezeigt, wie Sie einen Bericht in ein benutzerdefiniertes 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);

Nächste Schritte

Abrufen von Seiten und Visuellen

Konfigurieren von Berichteinstellungen

Share via