Personalizar a apresentação de insights principais

A apresentação personalizar os principais insights 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 inseridos pelo Power BI controlam o tamanho, a posição e a visibilidade dos visuais em uma página de relatório. Você pode usar layouts personalizados para apresentar exibições diferentes 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 usa layouts personalizados para redimensionar visuais quando o tamanho da janela é alterado ou para apresentar layouts diferentes para telas móveis, tablet ou desktop.

Experiência de demonstração de layout personalizado

Na apresentação personalizar os principais insights , 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 elementos visuais

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

Os usuários podem limpar as caixas de seleção ao lado dos visuais nos quais não estão interessados. 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 exibidos.

Selecionar Escolher visuais novamente fecha 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.

Visuals 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 do 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 GitHub do PowerBI-Embedded-Showcases .

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

  • O relatório JavaScript inscreve 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 settings propriedade da configuração de inserção de relatório. Para habilitar layouts personalizados, o relatório JavaScript usa a layoutType propriedade com valor models.LayoutType.Custom.

O customLayout objeto especifica o tamanho da página da tela do relatório, o dimensionamento de tela e o layout da página. 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 settings objeto e atualiza a configuração de inserção. O relatório é carregado com os visuais selecionados mostrando e o layout personalizado implementado.

Próximas etapas