Compartilhar via

Inserir conteúdo do Power BI em um aplicativo Angular

  • Artigo

Ao criar um aplicativo de análise integrada do Power BI, o Angular pode ajudar a configurar rapidamente um aplicativo escalonável e escalonável. O Angular adiciona padrões de estrutura e design ao desenvolvimento front-end, permitindo que os desenvolvedores criem aplicativos Web mais avançados que são mais fáceis de manter e atualizar.

A biblioteca angular do Power BI permite inserir os seguintes itens do Power BI em seu aplicativo Angular:

  • Relatórios
  • Painéis
  • Blocos de painel
  • Visuais de relatório
  • Q&A
  • Relatórios paginados

Como inserir conteúdo do Power BI em um aplicativo Web Angular

Esta seção descreve como importar o Angular para seu aplicativo e usá-lo para inserir um relatório do Power BI.

Para obter informações detalhadas de uso, consulte o arquivo de do Power BI Angular.

Importar a biblioteca Angular

Você pode encontrar o componente do Power BI Angular em NPM. Ele também é de software livre nodo GitHub .

Para importar o Angular para seu aplicativo Web, adicione as importações listadas abaixo.

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

Inserir o relatório com o Angular

Este exemplo mostra como inserir um relatório do Power BI usando o Angular. Abaixo do exemplo está uma descrição de cada componente no exemplo de código.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

A lista a seguir inclui descrições ou informações adicionais para cada componente no exemplo de snippet de código.

  • embedConfig – define o conteúdo que você está inserindo e especifica as configurações do conteúdo. A configuração de inserção é alterada quando você inscreve os seguintes itens do Power BI:

  • eventHandlers – um objeto de mapa para nomes de eventos e seus manipuladores. Consulte Como lidar com eventos para obter mais informações.

  • cssClassName – fornece ao item inserido nomes de classe CSS que permitem controlar o estilo do iframe inserido usando CSS.

  • phasedEmbedding – melhora a experiência do usuário final, proporcionando aos desenvolvedores mais flexibilidade para a inserção de relatório de fase. Consulte Usar de inserção em fases para obter mais informações.

Inicializar um relatório do Power BI

powerbi.bootstrap é um método usado para ajudar os desenvolvedores a inserir itens do Power BI mais rapidamente e obter um melhor desempenho. Para obter mais informações, consulte Usar bootstrap para obter um melhor desempenho.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

Para inserir o relatório após o inicialização, atualize o embedConfig (com pelo menos accessToken e embedUrl).

Demonstração angular

O repositório Angular inclui uma demonstração que insira um relatório de exemplo usando o componente PowerBIReportEmbed. Ele demonstra o fluxo completo da inicialização do relatório até a inserção e atualização do relatório inserido. Ele também demonstra o uso da biblioteca de de criação de relatório do powerbi excluindo um visual de um relatório ao clicar no botão Excluir um Visual. Ele também define um evento 'DataSelected'.

Para obter mais informações, consulte a seção de demonstração do arquivo leiame .

Um gif animado que mostra a Demonstração do Power BI Angular.

Executar a demonstração

A demonstração é uma subpasta no repositório. Para executar a demonstração no localhost, siga estas etapas:

  1. Execute os seguintes comandos:

    npm run demo

  2. Para exibir no navegador, redirecione-o para http:/localhost:4200/.

Conteúdo relacionado