Inserir um item do Power BI em um aplicativo React
Ao criar um aplicativo de análise integrada do Power BI, 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órios. Ele também simplifica o gerenciamento do ciclo de vida de inserção do Power BI em seu aplicativo. O componente React do Power BI dá suporte ao JavaScript e ao 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 dashboard
- Visuais de relatório
- Perguntas e respostas
Como inserir um item do Power BI em um aplicativo Web React
Esta seção descreve como importar 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 React do Power BI.
Importar a biblioteca de React
O componente React do Power BI pode ser encontrado no NPM. Ele também é de software livre no GitHub.
Para importar React para seu aplicativo Web, adicione as importações listadas abaixo.
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
Inserir o relatório com React
Este exemplo mostra como inserir um relatório do Power BI usando 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.
Configuração de inserção – define o conteúdo que você está inserindo e especifica as configurações do conteúdo. A configuração de inserção muda 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ê obterá uma instância da classe Report .
Inicializar um componente
powerbi.bootstrap é um método usado para ajudar os desenvolvedores a inserir itens do Power BI mais rapidamente e obter melhor desempenho. Para obter mais informações, confira Usar inicialização 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 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 criação de relatórios 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 readme .
Execução da demonstração
A demonstração é uma subpasta no repositório. Para executar a demonstração no localhost, siga estas etapas:
Execute os comandos a seguir:
npm run install:demo npm run demoPara exibir no navegador, redirecione-o para
http:/localhost:8080/.