Solved: Re: PowerBI embedded responsive design

maxymibus · ‎12-08-2016

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

Eric_Zhang · ‎12-19-2016

@maxymibus

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

View solution in original post

desarrollosbi · ‎05-20-2020

Dear friends currently, a responsive web version is required, users access to data information 80% via smarphone and 10% desktop.

so

in past years it was easy to have a mobile with access to data so the user consulted the information via 80% desktop and 20% mobile.

Thanks

Eric_Zhang · ‎12-11-2016

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

maxymibus · ‎12-12-2016

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:

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.

Eric_Zhang · ‎12-15-2016

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

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.

maxymibus · ‎12-15-2016

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?

Eric_Zhang · ‎12-19-2016

@maxymibus

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

insoluzioni · ‎05-30-2017

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

jsamano · ‎02-12-2019

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.

PowerBI embedded responsive design

Helpful resources

Microsoft Fabric Learn Together

Power BI Monthly Update - April 2024

Fabric Community Update - April 2024