power bi java script API - Finally have access tokens but no staticReportUrl

[ronnoc]

I have spent a good amount of time trying to properly embed a report using the javascript API, as far as I know the js API is the only way to get interactivity within embedded reports which is necessary for the use of external filters or printing. I think I have all the pieces of the puzzle here but it really seems as though the whole process is a lot more complicated than it needs to be. Why can I not just manage all of my workspaces, reports, accesstokens etc from within azure portal?

This is the process I have followed thus far:

Azure: create a workspace collection and a dataset, note down access keys and workspace ID credentials.

https://github.com/Azure-Samples/power-bi-embedded-integrate-report-into-web-app

PowerBI Embedded C# CLI (mvc sample): Create a workspace within the workspace collection using noted credentials from azure and import a pbix file into the newly created workspace, this generates an import ID which is really your report ID.

https://github.com/Microsoft/PowerBI-Cli

PowerBI Master-CLI (because one CLI program just isnt enough): Install node and NPM and then install the powerBI-Master-CLI project from github using npm.  Use the create-embed-token command along with the workspace collection credentials, you will need the report ID generated in the other cli program. This generates an access token for the report.

https://github.com/Microsoft/PowerBI-JavaScript

PowerBI Javascript API embedded sample code: The examples here wont work until the script sources and stylesheet references are fiddled with, it then loads with the standard salesreport pbix sample report. This is defined as 'staticReportURL' in the file 'index.js'.

Fetch(staticReportUrl): fetches a container 'embedConfig' which contains all the credentials and access token necessary to fetch the report from the azure service and display it on the page. 

  fetch(staticReportUrl)
    .then(function (response) {
      if (response.ok) {
        return response.json()
          .then(function (embedConfig) {
            staticReport = powerbi.embed($staticReportContainer.get(0), embedConfig);
          });
      }
      else {
        return response.json()
          .then(function (error) {
            throw new Error(error);
          });
      }
    });

In powerbi.js

	    function Embed(service, element, config) {
	        var _this = this;
	        this.allowedEvents = [];
	        Array.prototype.push.apply(this.allowedEvents, Embed.allowedEvents);
	        this.eventHandlers = [];
	        this.service = service;
	        this.element = element;
	        // TODO: Change when Object.assign is available.
	        var settings = utils.assign({}, Embed.defaultSettings, config.settings);
	        this.config = utils.assign({ settings: settings }, config);
	        this.config.accessToken = this.getAccessToken(service.accessToken);
	        this.config.embedUrl = this.getEmbedUrl();
	        this.config.id = this.getId();
	        this.config.uniqueId = this.getUniqueId();
	        var iframeHtml = "<iframe style=\"width:100%;height:100%;\" src=\"" + this.config.embedUrl + "\" scrolling=\"no\" allowfullscreen=\"true\"></iframe>";
	        this.element.innerHTML = iframeHtml;
	        this.iframe = this.element.childNodes[0];
	        this.iframe.addEventListener('load', function () { return _this.load(_this.config); }, false);
	    }

Here is where I am at a loss with how to display my own reports? I have a small novel full of id's access tokens and security keys but now I need to put it into a report URL, is this through azure? what am I missing?

If anyone can offer some advice or guidance it would be sincerely appreciated for myself and the others I have seen are struggling with this.

[Janavarsha]

Can you please send powerbi authenication code which are related to java.

java is really new to me so tell step by step.

Thanks.

[Eric_Zhang · Accepted solution]

@ronnoc

I embed my own reports with a sample code as below. Replace the id, token and embed url with yourself's, save it as a html file and open it in Chrome/IE/FF.

<html>

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

<script type="text/javascript">
window.onload = function () {
 
var embedConfiguration = {
    type: 'report',
    accessToken: 'yourtokenhere',
    id: '51309815-f35b-xxxx-acb8-bc7245cd8f0c',
    //for Power BI Embedded
	//embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=734503cf-1309-4892-xxxx-791d62c15x44' 
	//for Power BI REST API
	embedUrl: 'https://msit.powerbi.com/reportEmbed?reportId=51309815-f35b-xxxx-acb8-bc7245cd8f0c'
}; 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
  
report.fullscreen();  

}
</script>

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

</html>

[Saraswathi]

I have replaced the below given code with my report id, url and access token, saved as html file and opened in IE but its not working.

Can someone please help me to ressolve this issue.

Thanks

Saraswathi M

[Saraswathi]

I have replaced the above sample code with my report id , access token and url , saved it as html file and opened in IE but the embedded report is not displaying.

Can someone please help me to ressolve this issue.

Thanks

Saraswathi M

[Cubist]

@Eric_Zhang This solution doesn't work and must be updated or removed.

Reasons it doesn't work:

1)  The script include paths you've referenced have changed and are invalid

2)  You're hotlinking to GitHub files which does not work and against their terms of service

https://github.com/blog/1482-heads-up-nosniff-header-support-coming-to-chrome-and-firefox

[runrunrun]

watching..

I need some tutorial in Power BI - Javascript API too 🙂