Forum Discussion

maxymibus's avatar
maxymibus
Frequent Visitor
9 years ago
Solved

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

Need Help

8 Replies

  • desarrollosbi's avatar
    desarrollosbi
    Frequent Visitor
    6 years ago

    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's avatar
    Eric_Zhang
    Microsoft Employee
    9 years ago
    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's avatar
      maxymibus
      Frequent Visitor
      9 years ago

      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's avatar
        Eric_Zhang
        Microsoft Employee
        9 years ago
        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.