microsoft/powerbi-jquery

A set of jQuery plugins to seamlessly embed Power BI components into web based applications

PowerBI-JQuery

JQuery plugin which wraps the PowerBI-Javascript library and accepts configuration object directly. This makes embedding Power BI visuals similar to using other jQuery plugins.

For a demonstration of this library see the sample: powerbi-sample-client-jquery (COMING SOON!)

Getting started:

Installation

Install via NPM:

npm install --save jquery-powerbi

Install via Bower:

bower install --save jquery-powerbi

Include scripts:

<script src="powerbi.js"></script>
<script src="jquery.js"></script>
<script src="jquery.powerbi.js"></script>

Note: You can find out more about powerbi.js from the PowerBI-JavaScript repository.

Embed report in element using plugin

Index.html

<div id="reportContainer"></div>

App.js

$(() => {
	var $reportContainer = $('#reportContainer');

	var reportUrl = 'http://powerbipaasapi.azurewebsites.net/api/reports/63f50faa-f1fe-40ed-ab33-67fb09b80251';
		
	fetch(reportUrl)
		.then(response => response.json())
		.then(report => {
			var reportConfig = $.extend({ type: 'report' }, report);
			$reportContainer.powerbi(reportConfig);
		});
});

Note the object that you pass to the powerbi plugin function must have the following properties but there may be more:

{
	"type": "report",
	"accessToken": "eyJ0eXA...<removed>...D8MFM",
	"embedUrl": "https://embedded.powerbi.com/appTokenReportEmbed?reportId=5dac7a4a-4452-46b3-99f6-a25915e0fe55"
}

Note: The type property which indicates the type of the object you are embedding. In this case it we are embedding a report so the type is 'report'. There are other options that can be passed such as filterPaneEnabled, see the PowerBI-JavaScript repository for more information.

powerbi-jquery's Issues

Embedding power-bi into cordova app is not working for some phones

I'm trying to embed the power-bi report into cordova app as explained here.
here is my code:

var embedConfiguration = {
type: 'report',
accessToken: '// access token',
id: '// report id',
embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed'
};
var reportContainer = document.getElementById('reportContainer');
var report = powerbi.embed(reportContainer , embedConfiguration);
powerbi.get(reportContainer);

But I'm getting the following errors for some phones:

Uncaught DOMException: Blocked a frame with origin "https://embedded.powerbi.com" from accessing a cross-origin frame.(…)

The error doesn't depends on android version also, two phones which has android 5.1.1 - for one of the phone, power bi report works fine but for another phone getting this error.
iframe is being loaded for all phones but the content of that iframe document is different if I get this error(In this case, it just shows the power-bi loader).

I tried putting <access origin="*" /> in config.xml but no luck!

Can i use powerbi-jquery on Power BI Report Server?

Can i use powerbi-jquery on Power BI Report Server?