Inserir um item do Power BI em um aplicativo React

  • Artigo

Quando você cria um aplicativo de análise integrada do Power BI, o React pode ajudá-lo a otimizar o desempenho com a integração de inicialização, usando todas as APIs do lado do cliente, incluindo a criação de relatório. Ele também simplifica o gerenciamento do ciclo de vida de inserção do Power BI em seu aplicativo. O componente do Power BI React dá suporte a JavaScript e TypeScript e ajuda você a inserir sua análise em um aplicativo Web React.

A biblioteca react permite inserir os seguintes itens do Power BI:

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

Como inserir um item do Power BI em um aplicativo Web React

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

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

Importar a biblioteca react

O componente do Power BI React pode ser encontrado no NPM. Ele também é de software livre nodo GitHub .

Para importar o React para seu aplicativo Web, adicione as importações listadas:

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

Inserir o relatório com o React

Este exemplo mostra como inserir um relatório do Power BI usando o React. Abaixo do exemplo, você pode encontrar uma descrição para cada componente no exemplo de código.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
        }
    }
}

eventHandlers = {
    new Map([
        ['loaded', function () {
            console.log('Report loaded');
        }],
        ['rendered', function () {
            console.log('Report rendered');
        }],
        ['error', function (event) {
            console.log(event.detail);
        }]
    ])
}

cssClassName = {
    "report-style-class"
}

getEmbeddedComponent = {
    (embeddedReport) => {
        window.report = embeddedReport;
    }
}

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

  • inserir de configuração – 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.

  • getEmbedComponent – um retorno de chamada que ajuda você a obter a instância inserida, para que você possa usar todas as APIs que a biblioteca de clientes do Power BI permite. Por exemplo, ao inserir um relatório, você obtém uma instância da classe relatório .

Inicializar um componente

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.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}

Demonstração do React

O repositório React inclui uma demonstração que ilustra o fluxo completo de inicialização de um relatório, 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.

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 B I React.

Executando 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 install:demo
npm run demo

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

Conteúdo relacionado