Forum Discussion
Anonymous
7 years agoNot applicable
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