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

Embed PowerBI dashboard & report in Custom Mobile Apps

Hi all,

I'm trying to embed Power BI report & dashboard in a custom mobile app. I use webview (because I see there is no API besides Javascipt) to display the report in my mobile apps. The embedded report is running, but i found this grey box when I try to interact with it and the user find it a little bit disturbing.

Screen Shot 2018-03-08 at 14.56.40.png

check the video

 

Is there another way to embed the report to my mobile apps without webview / to get the same user experience with the PowerBI Mobile apps?

 

 

 

 

2 REPLIES 2
v-ljerr-msft Super Contributor
Super Contributor

Re: Embed PowerBI dashboard & report in Custom Mobile Apps

Hi @eddywijaya,

I use webview (because I see there is no API besides Javascipt) to display the report in my mobile apps.

Are you using the PowerBI-JavaScript Embed For Mobile sample code to embed the report in your mobile application?

 

Could you share some sample code you're using which can help us reproduce the issue, so that we can better assist on it? Smiley Happy

 

Regards

eddywijaya Frequent Visitor
Frequent Visitor

Re: Embed PowerBI dashboard & report in Custom Mobile Apps

Hi @v-ljerr-msft, thank you for replying  Smiley Very Happy

 

I'm developing this for iOS application.

In order to display the Power BI report in iOS device : I put the html file in the asset (xcode project) and then load it into a WebView. I followed the microsoft's live demo, so first I prepare a <div> container like this :

 

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

and then call the Power BI to embed in my container with the javascript SDK

 

var embedUrl = "https://app.powerbi.com/dashboardEmbed?dashboardId=e982axxx-5xxx-44b1-ae35-66axxxxxxxxx";
var config = {
    type: 'dashboard',
    accessToken: accessToken,
    embedUrl: embedUrl
};

var dashboardContainer = document.getElementById('dashboardContainer');
var dashboard = powerbi.embed(dashboardContainer, config);

 

Then, in the iOS application I load that html file in a webview (with WKWebView) :

@property (strong, nonatomic) IBOutlet WKWebView *dashboardWV;
NSString *filePath=[[NSBundle mainBundle]pathForResource:@"BI" ofType:@"html" inDirectory:@"powerbi"];
NSURL *url = [NSURL fileURLWithPath: filePath];
NSURLRequest* request = [NSURLRequest requestWithURL:url];
[dashboardWV loadRequest:request];

 


Are you using the PowerBI-JavaScript Embed For Mobile sample code to embed the report in your mobile application?

 


Not yet, but I think it will only change the layout of the report. We have no problem with the layout displayed since we are only using iPad / Tablet for our application. But I'll try that, thanks for the information.