Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago

Error trying to embed power bi in reactjs app

I'm trying to show a power bi report on a website using reactjs, and through a form I want to filter the information

i have done the part of handle form data, but when i try to filter my power bi form i always get the same error

(I'm using the latest version of jquery and powerbi-client)

 

import React from 'react';
import $ from 'jquery';
import * as powerbi from 'powerbi-client';

class Formulario2 extends React.Component {
    constructor(props) {        super(props);
        this.state = {linea: '' };
        this.filter = {
$schema: 'http://powerbi.com/product/schema#basic',
target: {
table: 'RefsLineas',
column: 'Assemblyline' }, operator: 'eq',
values: '' } this.embedConfiguration = {
type
: 'report',
accessToken: 'correct checked token', id: 'correct id'
embedUrl: 'correct url' filters: [this.filter], settings: {
filterPaneEnabled: false } }; this.handleClick = this.handleClick.bind(this); } handleClick(event) { this.setState({linea: document.getElementById('linea').value}); event.preventDefault(); this.initialize(); this.filterSet(this.state.linea); } initialize() { var config = this.embedConfiguration; // Get a reference to the embedded report HTML element var $embedContainer = $('#embedContainer'); // Embed the report and display it within the div container. var report = powerbi.embed($embedContainer, config); // Report.off removes a given event handler if it exists.
report.off("loaded"); } filterSet(entrada) { this.filter.values = entrada; // Get a reference to the embedded report HTML element var embedContainer = $('#embedContainer')[0]; // Get a reference to the embedded report. var report = powerbi.get(embedContainer); // Set the filter for the report. // Pay attention that setFilters receives an array.
report.setFilters([this.filter]).then(function () {
alert("Report filter was set."); }).catch(function (errors) {
alert(errors); }); } render() { return ( <div> <label> Line: <input type='text' id='linea' /> </label> <button type='submit' value='Submit' onClick={this.handleClick}> Enviar </button> <report embedType='report' tokenType='Aad' accessToken={this.embedConfiguration.accessToken}
embedUrl={this.embedConfiguration.embedUrl} embedId={this.embedConfiguration.id} permissions='All'
filterPaneEnabled={true}/> </div> ); } } export default Formulario2;

 

import React from 'react';
import ReactDOM from 'react-dom'
import Formulario2 from './Formulario2'

ReactDOM.render(<Formulario2/>, document.getElementById('root'));

 

This is the error:

 

TypeError: powerbi_client__WEBPACK_IMPORTED_MODULE_2__.embed is not a function

Formulario2.initialize
D:/trabajo/web/src/Formulario2.js:48

  45 | var $embedContainer = $('#embedContainer');
  46 | 
  47 |//Embed the report and display it within the div container.
> 48 | var report = powerbi.embed($embedContainer, config);
  49 | 
  50 | // Report.off removes a given event handler if it exists.
  51 | report.off("loaded");
No Replies