Personalizar um layout de relatório

Artigo
09/17/2023

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. Quando você define um layout de relatório personalizado, 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 settings, defina e defina layoutTypemodels.LayoutType.CustomcustomLayout como 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. Dentro do 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 ICustomLayout interface para definir um objeto de layout personalizado:

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

A interface ICustomLayout tem as seguintes propriedades:

pageSize - Um IPageSize objeto que define o tamanho da página da área de tela do relatório.
```
interface IPageSize {
    type: PageSizeType;
}
```
O IPageSize objeto usa a PageSizeType enumeração para definir o tamanho da página:
```
enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}
```
displayOption - Uma DisplayOption enumeração que controla como dimensionar a tela para caber no quadro.
```
enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}
```
pagesLayout - Um PagesLayout objeto que controla o layout de cada visual em uma página. Essa propriedade mapeia um nome de página para um PageLayout objeto. 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 IPageLayout interface para definir um objeto de layout de páginas. A interface permite que você defina 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, você pode ocultar inicialmente todos os visuais em um relatório e mostrar os visuais selecionados no layout de sua escolha.

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

A interface IPageLayout tem as seguintes propriedades:

defaultLayout - Um IVisualLayout objeto 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 VisualsLayout objeto 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 IVisualLayout interface 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 IVisualContainerDisplayState objeto que define a visibilidade do visual.
```
interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}
```
O IVisualContainerDisplayState objeto usa a VisualContainerDisplayMode enumeração 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 report.updateSettings método. Para obter mais informações, consulte As configurações de relatório de atualização 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. O VisualContainer1 tem um novo layout, posição e tamanho, enquanto o VisualContainer2 está 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);

Próximas etapas

Obter páginas e visuais

Definir configurações de relatório