Home > PT-BR, Tips & Tricks > Como usar um Power BI custom visual para renderizar um componente React!

Como usar um Power BI custom visual para renderizar um componente React!


CENÁRIO:

Olá!

Essa semana precisei criar um filtro para um relatório no Power BI que o usuário pudesse filtrar digitando os valores. Muito próximo do que vemos constantemente em aplicações web.

Link demo: https://youtu.be/7hETqVpe-yc

Mas, isso é um relatório. Como fazer isso? Eu até encontrei um componente pronto da Microsoft que faz isso, mas ele não faz tudo que eu precisava. O componente da Microsoft é esse aqui:

https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104381309?src=office&tab=Overview – Text Filter

20200222-1

Mas eu queria uma experiência um pouco melhor, “buscando” os resultados a medida ia digitando… Tipo esse componente aqui:

https://react-select.com/home

20200222-2

Foi então que descobri que era possível renderizar componentes React dentro dos Power BI Custom Visual! Aí ficou “fácil” 😀

Um pequeno tutorial da Microsoft:

https://docs.microsoft.com/en-us/power-bi/developer/visuals/custom-visual-develop-tutorial

SOLUÇÃO:

Vamos lá então!

Prepare o ambiente de desenvolvimento instalando:

  • Node.js
  • Power BI Visuals Tools (pbiviz)
    • Instale o certificado pra dev

Info: https://docs.microsoft.com/en-us/power-bi/developer/visuals/custom-visual-develop-tutorial#setting-up-the-developer-environment

Com o ambiente de desenvolvimento pronto. Vamos começar nosso componente React:

pbiviz new myreact

20200222-3

Este comando irá criar um projeto com nome ‘myreact’. Navegue até a pasta do projeto para instalar os pacotes necessários.

cd myreact

Vamos instalar os pacotes necessários para o react.

npm i react react-dom

npm i @types/react @types/react-dom

npm i @babel/polyfill

This slideshow requires JavaScript.

Configure o tsconfig.json para react (compilerOptions), adicione:

“jsx”: “react”,

“types”: [“react”, “react-dom”],

20200222-6

Pronto. Agora vamos criar o componente react “component.tsx”:

import * as React from “react”;

 

export default class MyReact extends React.Component<{}>{

render() {

return (

<div>

Hello, React!

</div>

)

}

}

20200222-7

No arquivo “visual.ts” substitua o conteúdo do arquivo por este conteúdo abaixo:

“use strict”;

import “@babel/polyfill”;

import powerbi from “powerbi-visuals-api”;

 

import * as React from “react”;

import * as ReactDOM from “react-dom”;

 

import DataView = powerbi.DataView;

import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;

import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;

import IVisual = powerbi.extensibility.visual.IVisual;

 

import “./../style/visual.less”;

 

import MyReact from ‘./component’;

 

export class Visual implements IVisual {

private target: HTMLElement;

private reactRoot: React.ComponentElement<any, any>;

 

constructor(options: VisualConstructorOptions) {

this.reactRoot = React.createElement(MyReact, {});

this.target = options.element;

 

ReactDOM.render(this.reactRoot, this.target);

}

 

public update(options: VisualUpdateOptions) {

 

}

}

20200222-8

Vamos testar! No prompt de comando, rode a aplicação:

pbiviz start

20200222-9

Navegue até o report no Power BI para testar:

This slideshow requires JavaScript.

E é isso! Um componente React dentro do Power BI Custom Visual! 😊

Código completo no GitHub:

https://github.com/thiagottss/pbi-customvisuals

Partindo deste exemplo podemos criar inúmeras possibilidades. Eu criei o componente que precisava, mas esse será tema para outro post:

20200222-15

Link demo: https://youtu.be/7hETqVpe-yc

Abraço!

  1. April 20, 2020 at 15:52

    Thiago , preciso falar com voce

    Abs

    • April 20, 2020 at 17:55

      Oi Luiz, como vai?
      Vou entrar em contato.

      Obrigado pela visita!
      Thiago.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: