Compartir a través de

Personalizar un diseño de informe

  • Artículo

Con un diseño de informe personalizado, puede insertar un informe de Power BI con un diseño diferente al guardado en el informe original. Al definir un diseño de informe personalizado, puede variar el tamaño de una página de informe y controlar el tamaño, la posición y la visibilidad de los objetos visuales de la página.

Información general sobre el diseño personalizado

Para crear un diseño de informe personalizado, defina un objeto de diseño personalizado y páselo al objeto de configuración en una configuración de inserción.

En el objeto de configuración, establezca layoutType en models.LayoutType.Custom y establezca customLayout en el objeto de diseño personalizado:

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

Para obtener más información sobre la configuración del informe, consulte Configuración de las opciones de informe.

Cómo definir un diseño de informe personalizado

Cada diseño de informe personalizado se representa mediante un objeto de diseño personalizado que se define para especificar el tamaño de página, la escala del lienzo y el diseño de páginas. Dentro del diseño de páginas, puede especificar un diseño visual para cada objeto visual y un diseño visual predeterminado para el informe.

Definición de interfaz de diseño personalizado

Use la interfaz ICustomLayout para definir un objeto de diseño personalizado:

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

La interfaz ICustomLayout tiene las siguientes propiedades:

  • pageSize: objeto IPageSize que define el tamaño de página del área de lienzo del informe.

    interface IPageSize {
    type: PageSizeType;
}

    El objeto IPageSize usa la enumeración PageSizeType para establecer el tamaño de página:

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

  • displayOption: enumeración DisplayOption que controla cómo escalar el lienzo para que se ajuste al marco.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout: un objeto PagesLayout que controla el diseño de cada objeto visual de una página. Esta propiedad asigna un nombre de página a un objeto PageLayout. Para obtener más información, vea Definir un diseño de páginas.

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

Definición de un diseño de páginas

Use la interfaz IPageLayout para definir un objeto de diseño de páginas. La interfaz permite definir un mapa de diseño visual, que asigna cada nombre visual a un nuevo objeto de diseño y un diseño visual predeterminado. Definir un diseño de páginas es opcional. Si no proporciona un diseño para un informe, Power BI aplica el diseño predeterminado al informe. Es decir, el diseño predeterminado es lo que se aplica a todos los objetos visuales que no se especifican en el objeto de diseño de objetos visuales. Por ejemplo, puede ocultar inicialmente todos los objetos visuales de un informe y, a continuación, mostrar los objetos visuales seleccionados en el diseño que prefiera.

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

La interfaz IPageLayout tiene las siguientes propiedades:

  • defaultLayout: objeto IVisualLayout que define el diseño visual predeterminado. El diseño predeterminado se aplica automáticamente a todos los objetos visuales de la página del informe.

    defaultLayout?: IVisualLayout

  • visualsLayout: objeto VisualsLayout que define un mapa entre los nombres visuales y los diseños visuales de la página del informe.

    visualsLayout: VisualsLayout

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

Definición de un diseño visual

Para definir un diseño visual, use la interfaz IVisualLayout para crear un objeto de diseño visual y establecer su posición, tamaño y visibilidad.

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

La interfaz IVisualLayout tiene las siguientes propiedades:

  • x,y,z: define las coordenadas x, y y z del objeto visual.

  • width, height: define el ancho y el alto del objeto visual.

  • displayState: objeto IVisualContainerDisplayState que define la visibilidad del objeto visual.

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    El objeto IVisualContainerDisplayState usa la enumeración VisualContainerDisplayMode para establecer la visibilidad:

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

Actualización del diseño

Para actualizar el diseño del informe cuando el informe ya esté cargado, use el método report.updateSettings. Para obtener más información, consulte Actualizar la configuración del informe en tiempo de ejecución.

Ejemplo

En este ejemplo de código completo se muestra cómo insertar un informe con un diseño de informe personalizado. Todos los objetos visuales están ocultos excepto en dos objetos visuales: visualContainer1 y VisualContainer2. visualContainer1 tiene un nuevo diseño, posición y tamaño, mientras que visualContainer2 está visible con el diseño predeterminado del informe.

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

Contenido relacionado