Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
ronnoc
Advocate II
Advocate II

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

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.

 

 

1 ACCEPTED SOLUTION
Eric_Zhang
Employee
Employee

@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>

 

View solution in original post

6 REPLIES 6
Janavarsha
Frequent Visitor

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
Employee
Employee

@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>

 

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

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

@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
Resolver I
Resolver I

watching..

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

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

Power BI Carousel June 2024

Power BI Monthly Update - June 2024

Check out the June 2024 Power BI update to learn about new features.

RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.

Top Solution Authors