Reply
Frequent Visitor
Posts: 6
Registered: ‎10-18-2016
Accepted Solution

PowerBI embedded responsive design

Hi all,

I am working in a project where we integrate our own app with powerBI

embedded into an iFrame. Everythings works and look cool. The "problem"

I am facing right now is that it is not responsive, it does not adapt somehow to the 

screen size; It looks very bad if it is opened from a mobile phone or from big resolution screens. 

So, basically, I had two solution.

 

1) Share it as a "public to web" and it actually work. It is responsive but then I loose a bit the security part expecially because  I am using row level security! and also because I am not allowed to do so.

 

2) Get each tile from the dashboard and put them in a responsive div which will flow together with the implemented iframe inside the div. This solution is not managebale in the long run.

 

So, my question is:

Can I have a workspace collection with a workspace ID and then get the report with filters ecc. embedded into an iframe and get also a responsive design from it?

 

I really hope someone had a similar issue and can help me here!

 

Thanks


Accepted Solutions
Moderator
Posts: 3,051
Registered: ‎03-06-2016

Re: PowerBI embedded responsive design

@maxymibus

It sounds reasonable and depends on what the layout is expected.

View solution in original post


All Replies
Moderator
Posts: 3,051
Registered: ‎03-06-2016

Re: PowerBI embedded responsive design

[ Edited ]

@maxymibus wrote:

Hi all,

I am working in a project where we integrate our own app with powerBI

embedded into an iFrame. Everythings works and look cool. The "problem"

I am facing right now is that it is not responsive, it does not adapt somehow to the 

screen size; It looks very bad if it is opened from a mobile phone or from big resolution screens. 

So, basically, I had two solution.

 

1) Share it as a "public to web" and it actually work. It is responsive but then I loose a bit the security part expecially because  I am using row level security! and also because I am not allowed to do so.

 

2) Get each tile from the dashboard and put them in a responsive div which will flow together with the implemented iframe inside the div. This solution is not managebale in the long run.

 

So, my question is:

Can I have a workspace collection with a workspace ID and then get the report with filters ecc. embedded into an iframe and get also a responsive design from it?

 

I really hope someone had a similar issue and can help me here!

 

Thanks


@maxymibus

How do you embed the report? Can you explain how is your report not responsive?

The report can be adaptive if embeded via Power BI Javascript API and also responsive. Check a demo below(create a blank html file, copy and paste the code then run it in chrome).

By the way, Power BI emebeded is not supposed to viewed from a phone. For me, I don't expect it to show a good layout in mobile phone.

<html>

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>  
 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js"></script>
 
    <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/es6-promise/es6-promise.js"></script>
    <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/fetch/fetch.js"></script>
     

<script type="text/javascript">
window.onload = function () {
 
var embedConfiguration = {
    type: 'report',
    accessToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsIndjbiI6Indya3NwY0NsbGN0bjRQQkkiLCJ3aWQiOiJiN2NmNDMzYi00MzdjLTRjYTUtOWRmMi1kOWZkODIxODI0NjEiLCJyaWQiOiI3MzQ1MDNjZi0xMzA5LTQ4OTItODU4Zi03OTFkNjJjMTU0YWQiLCJpc3MiOiJQb3dlckJJU0RLIiwiYXVkIjoiaHR0cHM6Ly9hbmFseXNpcy53aW5kb3dzLm5ldC9wb3dlcmJpL2FwaSIsImV4cCI6MTUxNDY0OTYwMCwibmJmIjoxNDgxNTI1MjQwfQ.5K18TRRyrbdn4eo5yAPkjvP5TCYg6MbnqimDt9TcxPA',
    id: '734503cf-1309-4892-858f-791d62c154ad',
    embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=734503cf-1309-4892-858f-791d62c154ad' 
}; 

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

}
</script>

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

</html>

 

Frequent Visitor
Posts: 6
Registered: ‎10-18-2016

Re: PowerBI embedded responsive design

[ Edited ]

Hi @Eric_Zhang ,

Thanks for the answer.

I am embedding the report correctly and without problem. I have developed an mvc app using the sdk and javascript as you mention in the example. The report is embedded correctly, but the result for users with different screen size is not optimal and yes, they need to open the app via a mobile phone.

The powerbi is the BI part of a wider program wich is responsive to different screen size and  can be open from mobile.

So, the result if the screen resolution change is:

 

responsive.jpg

If I embed a public link powerbi report. The different charts floats correctly and adapt to the screen size, but, I do not want to make a shared link for security reason.

 

 

 

Moderator
Posts: 3,051
Registered: ‎03-06-2016

Re: PowerBI embedded responsive design

[ Edited ]

@maxymibus wrote:

Hi @Eric_Zhang ,

Thanks for the answer.

I am embedding the report correctly and without problem. I have developed an mvc app using the sdk and javascript as you mention in the example. The report is embedded correctly, but the result for users with different screen size is not optimal and yes, they need to open the app via a mobile phone.

The powerbi is the BI part of a wider program wich is responsive to different screen size and  can be open from mobile.

So, the result if the screen resolution change is:

 

responsive.jpg

If I embed a public link powerbi report. The different charts floats correctly and adapt to the screen size, but, I do not want to make a shared link for security reason.

 


Not work on my side, I got the same layout when I'm viewing a "pblished to web" report in chrome. To view reports in mobile devices, check Power BI Mobile.

Frequent Visitor
Posts: 6
Registered: ‎10-18-2016

Re: PowerBI embedded responsive design

yes, I will consider using the mobile app as a solution. It is very well done and I like it very much.

Even if, I was thinking to give a kind of better experience for the end user to use also all the other 

functionality the software has from the same app. 

@v-lvzhan-m , What do you think if I use powerbi api to get singles tiles from the dashboard and put them in sevaral <div> which will float based on the resolution?, is it a possible solution?

Moderator
Posts: 3,051
Registered: ‎03-06-2016

Re: PowerBI embedded responsive design

@maxymibus

It sounds reasonable and depends on what the layout is expected.

Highlighted
Frequent Visitor
Posts: 12
Registered: ‎01-29-2017

Re: PowerBI embedded responsive design

Hi there!

 

Any planned updates for embedding with responsive layouts?

 

I checked this https://powerbi.microsoft.com/pt-br/documentation/powerbi-desktop-create-phone-report/

but appears it only works in mobile app or as mentioned above, sharing your report...

 

I think this is a major update, since any web app today HAS to be responsive?

 

Thanks you

Occasional Visitor
Posts: 1
Registered: ‎02-05-2019

Re: PowerBI embedded responsive design

Hi there!

 

 ¿Is there any update about this issue? I´ve shared my report with a responsive layout but it´s still not working in a web embeded, but in Power Bi mobile app works ok.

 

Thank you.