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.

Helpful resources

Announcements
Can You Solve These Challenge

Challenge: Can You Solve These?

Find out how to participate in the first Power BI 'Can You Solve These?' challenge.

Community News & Announcements

Community News & Announcements

Get your latest community news and 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.

Community Kudopalooza

Win Power BI Swag with Community Kudopalooza!

Each week, complete activities and be qualified in the drawing for cool Power BI Swag.

Top Kudoed Authors
Users Online
Currently online: 60 members 1,298 guests
Please welcome our newest community members: