cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

Embedding reports from one application (which has embed logic) in another application in a iframe

We have a working application with embedds Power Bi reports (app owns data approach)

Our problem: 
We would like to embed the reports on another site in the same company 
(another html page in a different application which is also targeted for external users -> customers)
which DOES NOT have the embedding capabilities Is there any possibility without rebuilding the whole embedding logic in the different application? The approach we want: Our already existing application generates/gets embed tokens (embed iframe) and sends
this information (via API) to another application (which runs on the same domain) Any ideas are appreciated! Test - we extracted the information from our page: <iframe src='https://ekiwi-blog.de' name='<iframe src='https://app.powerbi.com/reportEmbed?groupId=deletedbecauseofsecurity&amp;reportId=deletedbecauseofsecurity&amp;uid=wopthj' scrolling='no' allowfullscreen='true' style='width: 100%; height: 100%;'></iframe>' id='<iframe src='https://app.powerbi.com/reportEmbed?groupId=6fcf0aca-5c6d-4c22-bdb4-4ee8fb4a006b&amp;reportId=08290528-8d47-46ed-b15e-5dedd2d04f0a&amp;uid=wopthj' scrolling='no' allowfullscreen='true' style='width: 100%; height: 100%;'></iframe>' scrolling='yes' frameborder='0' marginheight='0px' marginwidth='0px' height='400' width='600'> </iframe> and tried to show it in another online iframe tester: https://ekiwi.de/tools/smalltools/iframemaker.php it tries to load the report but does not finish it Is this because of security reasons?

 

1 ACCEPTED SOLUTION

Accepted Solutions
Super User II
Super User II

Re: Embedding reports from one application (which has embed logic) in another application in a ifram

Hi @Anonymous ,

 

Instead of using iframe could you pls try the PowerBI Javascript to embed the report

 

https://github.com/microsoft/PowerBI-Developer-Samples/blob/master/App%20Owns%20Data/PowerBIEmbedded_AppOwnsData/Views/Home/EmbedReport.cshtml#L62

 

<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";
    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";
    // Read report Id from Model
    var embedReportId = "@Model.Id";
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;
    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.All,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };
    // Get a reference to the embedded report HTML element
    var reportContainer = $('#embedContainer')[0];
    if ("@Model.Username" != "") {
        $("#RLS").prop('checked', true);
        $("#RLSdiv").show();
    }
    else
    {
        $("#RLS").prop('checked', false);
        $("#RLSdiv").hide();
    }
    if ("@Model.IsEffectiveIdentityRequired.GetValueOrDefault()" == "True") {
        $("#noRLSdiv").hide();
        $("#RLS").removeAttr("disabled");
        $("#RLS").change(function () {
            if ($(this).is(":checked")) {
                $("#RLSdiv").show(300);
            } else {
                $("#RLSdiv").hide(200);
            }
        });
    }
    else
    {
        $("#noRLSdiv").show();
    }
    // Embed the report and display it within the div container.
    var report = powerbi.embed(reportContainer, config);
</script>

Basically you need to pass the embed token from your Common API to the Customer App







Did my reply helpful to you ? Please give Kudos

Did I answer your question? Mark my post as a solution!

Proud to be a Super User!




View solution in original post

6 REPLIES 6
Super User II
Super User II

Re: Embedding reports from one application (which has embed logic) in another application in a ifram

Hi @Anonymous ,

 

Instead of using iframe could you pls try the PowerBI Javascript to embed the report

 

https://github.com/microsoft/PowerBI-Developer-Samples/blob/master/App%20Owns%20Data/PowerBIEmbedded_AppOwnsData/Views/Home/EmbedReport.cshtml#L62

 

<script>
    // Read embed application token from Model
    var accessToken = "@Model.EmbedToken.Token";
    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model.EmbedUrl)";
    // Read report Id from Model
    var embedReportId = "@Model.Id";
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;
    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.All,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };
    // Get a reference to the embedded report HTML element
    var reportContainer = $('#embedContainer')[0];
    if ("@Model.Username" != "") {
        $("#RLS").prop('checked', true);
        $("#RLSdiv").show();
    }
    else
    {
        $("#RLS").prop('checked', false);
        $("#RLSdiv").hide();
    }
    if ("@Model.IsEffectiveIdentityRequired.GetValueOrDefault()" == "True") {
        $("#noRLSdiv").hide();
        $("#RLS").removeAttr("disabled");
        $("#RLS").change(function () {
            if ($(this).is(":checked")) {
                $("#RLSdiv").show(300);
            } else {
                $("#RLSdiv").hide(200);
            }
        });
    }
    else
    {
        $("#noRLSdiv").show();
    }
    // Embed the report and display it within the div container.
    var report = powerbi.embed(reportContainer, config);
</script>

Basically you need to pass the embed token from your Common API to the Customer App







Did my reply helpful to you ? Please give Kudos

Did I answer your question? Mark my post as a solution!

Proud to be a Super User!




View solution in original post

Khemindra
New Member

Embedding Web application via iframe into Power BI

Hi
Is it possible for PowerBI to incorporate an iframe of an external web application? I.e. we want to ensure Power BI stays as the single source of truth.
Highlighted
Super User II
Super User II

Re: Embedding Web application via iframe into Power BI

Hi @Khemindra 

Just want to clear the context.

Do you want to embed an iframe of other reports/external pages into power reports ?

or

Do you want to embed inframe of an powerbi reports into an external wesites?







Did my reply helpful to you ? Please give Kudos

Did I answer your question? Mark my post as a solution!

Proud to be a Super User!




Khemindra
New Member

Re: Embedding Web application via iframe into Power BI

Hi
I want to embed an iframe of other External pages into power reports OR a section in PowerBI where users can see other visualizations from this external applocation
Super User II
Super User II

Re: Embedding Web application via iframe into Power BI

Hi @Khemindra ,

 

Yes it is possible . Please refer below link

https://powerpivotpro.com/2018/11/dynamically-embedding-web-pages-in-power-bi/

 







Did my reply helpful to you ? Please give Kudos

Did I answer your question? Mark my post as a solution!

Proud to be a Super User!




Khemindra
New Member

Re: Embedding Web application via iframe into Power BI

Awesome thanks so much for your help! I have a user wanting to export the data from our application into PowerBI as a future state (instead of iframe). This is so they can utilise the data that sits behind our visualizations in PowerBI. They talked about a potential API call, but I'm not sure how PowerBI likes to consume data I.e. is there a connector approach OR API call best?

Helpful resources

Announcements
New Ranks Launched March 24th!

New Ranks Launched March 24th!

The time has come: We are finally able to share more details on the brand-new ranks coming to the Power BI Community!

‘Better Together’ Contest Finalists Announced!

‘Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

Arun 'Triple A' Event Video, Q&A, and Slides

Arun 'Triple A' Event Video, Q&A, and Slides

Missed the Arun 'Triple A' event or want to revisit it? We've got you covered! Check out the video, Q&A, and slides now.

Community Summit North America

Community Summit North America

Innovate, Collaborate, Grow. The top training and networking event across the globe for Microsoft Business Applications