Personalizzare un layout di report

Articolo
09/17/2023

Con un layout di report personalizzato, è possibile incorporare un report di Power BI con un layout diverso da quello salvato nel report originale. Quando si definisce un layout di report personalizzato, è possibile variare le dimensioni di una pagina del report e controllare le dimensioni, la posizione e la visibilità degli oggetti visivi nella pagina.

Panoramica del layout personalizzato

Per creare un layout di report personalizzato, definire un oggetto layout personalizzato e passarlo all'oggetto impostazioni in una configurazione di incorporamento.

Nell'oggetto impostazioni impostare layoutType su models.LayoutType.Custom e impostare customLayout sull'oggetto layout personalizzato:

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

Per altre informazioni sulle impostazioni del report, vedere Configurare le impostazioni del report.

Come definire un layout di report personalizzato

Ogni layout di report personalizzato è rappresentato da un oggetto layout personalizzato definito per specificare le dimensioni della pagina, la scala dell'area di disegno e il layout delle pagine. All'interno del layout delle pagine è possibile specificare un layout visivo per ogni oggetto visivo e un layout visivo predefinito per il report.

Definizione dell'interfaccia di layout personalizzata

Usare l'interfaccia ICustomLayout per definire un oggetto layout personalizzato:

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

L'interfaccia ICustomLayout ha le proprietà seguenti:

pageSize - Oggetto IPageSize che definisce le dimensioni della pagina dell'area canvas per il report.
```
interface IPageSize {
    type: PageSizeType;
}
```
L'oggetto IPageSize usa l'enumerazione PageSizeType per impostare le dimensioni della pagina:
```
enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}
```
displayOption - Enumerazione DisplayOption che controlla come ridimensionare l'area di disegno per adattarsi alla cornice.
```
enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}
```
pagesLayout - Oggetto PagesLayout che controlla il layout per ogni oggetto visivo in una pagina. Questa proprietà esegue il mapping di un nome di pagina a un PageLayout oggetto. Per altre informazioni, vedere Definire un layout di pagine.
```
type PagesLayout = { [key: string]: IPageLayout; }
```

Definire un layout di pagine

Usare l'interfaccia IPageLayout per definire un oggetto layout di pagine. L'interfaccia consente di definire una mappa di layout visivo, che esegue il mapping di ogni nome visivo a un nuovo oggetto layout e a un layout visivo predefinito. La definizione di un layout di pagine è facoltativa. Se non si fornisce un layout per un report, Power BI applica il layout predefinito al report. Ovvero, il layout predefinito è quello che si applica a tutti gli oggetti visivi che non si specificano nell'oggetto layout di oggetti visivi. Ad esempio, è possibile nascondere inizialmente tutti gli oggetti visivi in un report e quindi visualizzare gli oggetti visivi selezionati nel layout desiderato.

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

L'interfaccia IPageLayout ha le proprietà seguenti:

defaultLayout - Oggetto IVisualLayout che definisce il layout visivo predefinito. Il layout predefinito viene applicato automaticamente a tutti gli oggetti visivi della pagina del report.
```
defaultLayout?: IVisualLayout
```
visualsLayout - Oggetto VisualsLayout che definisce una mappa tra i nomi visivi e i layout visivi nella pagina del report.
```
visualsLayout: VisualsLayout
```
```
VisualsLayout = { [key: string]: IVisualLayout; }
```

Definire un layout visivo

Per definire un layout visivo, usare l'interfaccia per creare un oggetto layout visivo e impostarne la IVisualLayout posizione, le dimensioni e la visibilità.

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

L'interfaccia IVisualLayout ha le proprietà seguenti:

x,,z :y definisce le coordinate x, y e z dell'oggetto visivo.
width, : height definisce la larghezza e l'altezza dell'oggetto visivo.
displayState - Oggetto IVisualContainerDisplayState che definisce la visibilità dell'oggetto visivo.
```
interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}
```
L'oggetto IVisualContainerDisplayState usa l'enumerazione VisualContainerDisplayMode per impostare la visibilità:
```
enum VisualContainerDisplayMode {
    Visible,
    Hidden
}
```

Aggiornare il layout

Per aggiornare il layout del report quando il report è già caricato, usare il report.updateSettings metodo . Per altre informazioni, vedere Aggiornare le impostazioni del report in fase di esecuzione.

Esempio

Questo esempio di codice completo illustra come incorporare un report con un layout di report personalizzato. Tutti gli oggetti visivi sono nascosti tranne per due oggetti visivi: VisualContainer1 e VisualContainer2. VisualContainer1 ha un nuovo layout, posizione e dimensioni, mentre VisualContainer2 è visibile con il layout predefinito del report.

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

Passaggi successivi

Ottenere pagine e oggetti visivi

Configurare le impostazioni rapporto