Compartilhar via


Personalizar a apresentação dos principais insights

O Personalizar os principais insights demonstração no playground de análise integrada do Power BI (versão prévia) usa a API de layout personalizado para permitir que os usuários selecionem quais visualizações e layouts ver durante a sessão de exibição de relatório.

Os layouts de relatório personalizados do Power BI inseridos controlar o tamanho, a posição e a visibilidade dos visuais em uma página de relatório. Use layouts personalizados para apresentar diferentes exibições para diferentes usuários ou para permitir que os usuários personalizem suas próprias exibições. Layouts personalizados ajudam os usuários a se concentrarem em suas visualizações e insights mais importantes.

Você também pode usar layouts personalizados para redimensionar visuais quando o tamanho da janela é alterado ou para apresentar layouts diferentes para desktop, tablet ou telas móveis.

Experiência de demonstração de layout personalizado

No Personalizar os principais insights demonstração, um conglomerado imaginário chamado Contoso usa um relatório inserido do Power BI para mostrar dados de negócios para seus stakeholders. O relatório inserido é carregado com todas as nove visualizações disponíveis que aparecem em um layout de duas colunas.

Selecionar visuais

Para escolher apenas os visuais que mais desejam ver, os usuários do relatório selecionam o botão Escolher visuais. A caixa de listagem Escolher visuais lista suspensa é aberta, com todos os nove visuais disponíveis selecionados.

Os usuários podem limpar as caixas de seleção ao lado dos visuais que não querem ver. Somente os visuais selecionados aparecem no relatório para o restante da sessão de exibição.

Captura de tela mostrando a caixa de diálogo Escolher visuais com três visuais selecionados e mostrando.

Selecionar Escolher visuais fecha novamente a caixa suspensa. Os usuários podem selecionar Escolher visuais novamente para selecionar visuais diferentes ou todos os nove visuais.

Selecionar um layout

Os usuários também podem selecionar Escolher layout para descartar uma paleta de cinco opções de layout de visualização diferentes. Selecionar uma opção de layout aplica o layout selecionado e fecha a paleta.

Captura de tela mostrando a paleta de layout com um layout de três colunas selecionado e aplicado.

Visual e interação de layout

Os controles Escolher visuais e Escolher layout no código do aplicativo são independentes, mas interagem. Por exemplo, se apenas um visual estiver sendo exibido, o layout de uma coluna exibirá o visual em um tamanho maior que o layout de três colunas.

Captura de tela mostrando um único visual em um layout de uma coluna.

Captura de tela mostrando um único visual em um layout de três colunas.

Código de demonstração de layout personalizado

O código para implementar o aplicativo de demonstração está no repositório PowerBI-Embedded-Showcases GitHub.

  • O aplicativo código HTML cria o contêiner de relatório, Escolher visuais botão e lista suspensa e botão Escolher layout e paleta suspensa.

  • O relatório JavaScript inseri o relatório, calcula e configura os objetos de layout personalizados e implementa os layouts personalizados padrão e personalizados.

Para criar um layout de relatório personalizado, você passa um objeto de layout personalizado para a propriedade settings do relatório de configuração de inserção. Para habilitar layouts personalizados, o relatório JavaScript usa a propriedade layoutType com valor models.LayoutType.Custom.

O objeto customLayout especifica o tamanho da página da tela do relatório, o dimensionamento de tela e o layout da página. Os layouts de página especificam um layout visual padrão para o relatório e layouts visuais para cada visual.

let settings = {
    ...
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pageSize: {
            type: models.PageSizeType.Custom,
            width: reportWidth - 10,
            height: reportHeight - 20
        },
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: pagesLayout
    }
};

Para exibir visualizações e layouts selecionados, o JavaScript de exibição cria dinamicamente o objeto settings e atualiza a configuração de inserção. O relatório é carregado com os visuais selecionados e o layout personalizado implementado.