Condividi tramite

Personalizzare un layout di report

  • Articolo

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 settings 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 di disegno 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 in modo che si adatti alla cornice.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout : oggetto PagesLayout che controlla il layout di ogni oggetto visivo in una pagina. Questa proprietà esegue il mapping di un nome di pagina a un oggetto PageLayout. Per altre informazioni, vedere Definire un layout di pagine.

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

Definire un layout di pagine

Utilizzare l'interfaccia IPageLayout per definire un oggetto layout di pagine. L'interfaccia consente di definire una mappa del 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 specifica un layout per un report, Power BI applica il layout predefinito al report. Ovvero, il layout predefinito è ciò che si applica a tutti gli oggetti visivi che non si specificano nell'oggetto layout degli 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 di ha le proprietà seguenti:

  • defaultLayout : oggetto IVisualLayout che definisce il layout visivo predefinito. Il layout predefinito viene applicato automaticamente a tutti gli oggetti visivi nella pagina del report.

    defaultLayout?: IVisualLayout

  • visualsLayout : oggetto VisualsLayout che definisce una mappa tra i nomi degli oggetti 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 IVisualLayout per creare un oggetto layout visivo e impostarne la 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,y,z : 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, utilizzare il metodo report.updateSettings. 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 ad eccezione di 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);

Contenuto correlato