Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago
Solved

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?

 

  • 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

6 Replies

  • 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

  • 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's avatar
      Jayendran
      Solution Sage

      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's avatar
        Khemindra
        New Member
        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