cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
IanControlF1 Frequent Visitor
Frequent Visitor

using powerbi-client with react

Hi

Im new to Power BI and this forum but I am struggling to embed a report onto a web page using react js.

 

I have npm installed the library 

npm install --save powerbi-client

included the library at the top of my page 

import * as pbi from 'powerbi-client';

I can now see that there is an Embed method under the pbi

var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: permissions,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};

pbi.Embed(/* Service */, /*Html Element */ ,config)

I can see that I need a service and to reference a HTML Element

 

I have managed to get a simple example working in plain JS from following:

https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

 

Is there any documentation or an example on how this is called from react?

1 ACCEPTED SOLUTION

Accepted Solutions
IanControlF1 Frequent Visitor
Frequent Visitor

Re: using powerbi-client with react

I am replying to myself as I think I have got closer and it might help others looking at this. 

 

@Eric_Zhang I looked at the Angular example yesterday and kinda reverse engineered in our example.

 

The problem was that I was trying to call an abstract which was wrong

 

 

pbi.Embed(/* Service */, /*Html Element */ ,config)

 

 

In the end I did the following:

 

New up the powerBi Service:

let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);

and call it passing in the config

 

// Embed the report and display it within the div container.
var reportContainer = document.getElementById('reportContainer');
var report = powerbi.embed(reportContainer, config);

 

 

3 REPLIES 3
Highlighted
Moderator Eric_Zhang
Moderator

Re: using powerbi-client with react


@IanControlF1 wrote:

Hi

Im new to Power BI and this forum but I am struggling to embed a report onto a web page using react js.

 

I have npm installed the library 

npm install --save powerbi-client

included the library at the top of my page 

import * as pbi from 'powerbi-client';

I can now see that there is an Embed method under the pbi

var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: permissions,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};

pbi.Embed(/* Service */, /*Html Element */ ,config)

I can see that I need a service and to reference a HTML Element

 

I have managed to get a simple example working in plain JS from following:

https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

 

Is there any documentation or an example on how this is called from react?


@IanControlF1

I don't know about react, however as per the response from the Power BI client author, you could reference the Angular sample, see this. For further request, I'd suggest you post in that git lib.

IanControlF1 Frequent Visitor
Frequent Visitor

Re: using powerbi-client with react

I am replying to myself as I think I have got closer and it might help others looking at this. 

 

@Eric_Zhang I looked at the Angular example yesterday and kinda reverse engineered in our example.

 

The problem was that I was trying to call an abstract which was wrong

 

 

pbi.Embed(/* Service */, /*Html Element */ ,config)

 

 

In the end I did the following:

 

New up the powerBi Service:

let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);

and call it passing in the config

 

// Embed the report and display it within the div container.
var reportContainer = document.getElementById('reportContainer');
var report = powerbi.embed(reportContainer, config);

 

 

ReportesAM New Member
New Member

Re: using powerbi-client with react

This worked like a charm. 

idk why this is not explicity in the documentation, thanks anyway.

Helpful resources

Announcements
Virtual Launch Event

Microsoft Business Applications October Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

Summit North America

Power Platform Summit North America

Register by September 5 to save $200

PBI Community Highlights

PBI Community Highlights

Check out what's new in the Power BI Community!

MBAS Gallery

Watch Sessions On Demand!

Continue your learning in our online communities.

Users Online
Currently online: 39 members 1,294 guests
Please welcome our newest community members: