Personalizar um layout de relatório

  • Artigo

Com um layout de relatório personalizado, você pode inserir um relatório do Power BI com um layout diferente do que foi salvo no relatório original. Ao definir um layout de relatório personalizado, você pode variar o tamanho de uma página de relatório e controlar o tamanho, a posição e a visibilidade dos visuais na página.

Visão geral do layout personalizado

Para criar um layout de relatório personalizado, defina um objeto de layout personalizado e passe-o para o objeto de configurações em uma configuração de inserção.

No objeto de configurações, defina layoutType como models.LayoutType.Custom e defina customLayout para seu objeto de layout personalizado:

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

Para obter mais informações sobre as configurações de relatório, consulte Definir configurações de relatório.

Como definir um layout de relatório personalizado

Cada layout de relatório personalizado é representado por um objeto de layout personalizado que você define para especificar o tamanho da página, a escala de tela e o layout das páginas. No layout de páginas, você pode especificar um layout visual para cada visual e um layout visual padrão para o relatório.

Definição de interface de layout personalizado

Use a interface ICustomLayout para definir um objeto de layout personalizado:

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

A interface ICustomLayout tem as seguintes propriedades:

  • pageSize - Um objeto IPageSize que define o tamanho da página da área de tela do relatório.

    interface IPageSize {
    type: PageSizeType;
}

    O objeto IPageSize usa a enumeração PageSizeType para definir o tamanho da página:

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

  • displayOption – uma enumeração DisplayOption que controla como dimensionar a tela para caber no quadro.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout – um objeto PagesLayout que controla o layout de cada visual em uma página. Essa propriedade mapeia um nome de página para um objeto PageLayout. Para obter mais informações, consulte Definir um layout de páginas.

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

Definir um layout de páginas

Use a interface IPageLayout para definir um objeto de layout de páginas. A interface permite definir um mapa de layout visual, que mapeia cada nome visual para um novo objeto de layout e um layout visual padrão. Definir um layout de páginas é opcional. Se você não fornecer um layout para um relatório, o Power BI aplicará o layout padrão ao relatório. Ou seja, o layout padrão é o que se aplica a todos os visuais que você não especifica no objeto de layout de visuais. Por exemplo, inicialmente você pode ocultar todos os visuais em um relatório e, em seguida, mostrar visuais selecionados no layout de sua escolha.

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

A interface IPageLayout tem as seguintes propriedades:

  • defaultLayout – um objeto IVisualLayout que define o layout visual padrão. O layout padrão é aplicado automaticamente a todos os visuais na página do relatório.

    defaultLayout?: IVisualLayout

  • visualsLayout - Um objeto VisualsLayout que define um mapa entre os nomes visuais e layouts visuais na página do relatório.

    visualsLayout: VisualsLayout

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

Definir um layout visual

Para definir um layout visual, use a interface IVisualLayout para criar um objeto de layout visual e definir sua posição, tamanho e visibilidade.

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

A interface IVisualLayout tem as seguintes propriedades:

  • x,y,z – define as coordenadas x, y e z do visual.

  • width, height – Define a largura e a altura do visual.

  • displayState - Um objeto IVisualContainerDisplayState que define a visibilidade do visual.

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    O objeto IVisualContainerDisplayState usa a enumeração VisualContainerDisplayMode para definir a visibilidade:

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

Atualizar o layout

Para atualizar o layout do relatório quando o relatório já estiver carregado, use o método report.updateSettings. Para obter mais informações, consulte Atualizar configurações de relatório no runtime.

Exemplo

Este exemplo de código completo mostra como inserir um relatório com um layout de relatório personalizado. Todos os visuais estão ocultos, exceto para dois visuais: VisualContainer1 e VisualContainer2. visualContainer1 tem um novo layout, posição e tamanho, enquanto VisualContainer2 fica visível com o layout padrão do relatório.

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

Conteúdo relacionado