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

[Anonymous]

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?

[Khemindra]

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.

[Jayendran]

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?

[Khemindra]

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

[Jayendran]

Hi @Khemindra ,

Yes it is possible . Please refer below link

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

[Khemindra]

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?

[Jayendran · Accepted solution]

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