cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
patchie Frequent Visitor
Frequent Visitor

I want to present Power BI tiles in a "azure web app" i just created

Hi,

 

Intro:

I want to create a internal website for displaying Power BI graphs and KPI's for internal use.

I just created a new webapp in Azure from the FlaskAzure(python) template. (https://github.com/azureappserviceoss/FlaskAzure)

I also just got access to a free license and am currently testing 1 month free premium version of Power BI.

 

Power BI: I have created a dashboard as a test, and a report.

Azure Web App: I have just created the FlaskAzure(python) webapp and added SSO(single sign on) connected to AAD(Azure Active Directory).

Azure AAD: I have registered the application for Power BI in AAD using this link: https://dev.powerbi.com/apps

 

My questions:

I now found a tutorial that seems to just tell me how to add tiles into IFrames. (https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-tile/#steps-to-integra...)

1. Can i only add tiles into IFrames? Cant i add it without using IFrames?

2. Is there an example on how to present a tile using flask(python) framework?

 

Thanks in advance.

1 REPLY 1
Moderator Eric_Zhang
Moderator

Re: I want to present Power BI tiles in a "azure web app" i just created


@patchie wrote:

Hi,

 

Intro:

I want to create a internal website for displaying Power BI graphs and KPI's for internal use.

I just created a new webapp in Azure from the FlaskAzure(python) template. (https://github.com/azureappserviceoss/FlaskAzure)

I also just got access to a free license and am currently testing 1 month free premium version of Power BI.

 

Power BI: I have created a dashboard as a test, and a report.

Azure Web App: I have just created the FlaskAzure(python) webapp and added SSO(single sign on) connected to AAD(Azure Active Directory).

Azure AAD: I have registered the application for Power BI in AAD using this link: https://dev.powerbi.com/apps

 

My questions:

I now found a tutorial that seems to just tell me how to add tiles into IFrames. (https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-tile/#steps-to-integra...)

1. Can i only add tiles into IFrames? Cant i add it without using IFrames?

2. Is there an example on how to present a tile using flask(python) framework?

 

Thanks in advance.


1.There seems no way, even in some samples it is using a DIV, the underlying code is actually using an IFrame. What is your concern on IFrame?

2. I have no idea on flask(python) framework, but a tile can be embedded even in static html page. FYI

<html lang="en">
<head> 
    <script type="text/javascript">

        window.onload = function () {
		
		updateEmbedTile(); 
        };

        var width = 500;
        var height = 500; 

        // update embed tile
        function updateEmbedTile() {
            // check if the embed url was selected
            var embedTileUrl = "https://msit.powerbi.com/embed?dashboardId=f1f5155b-c6e2-4147-991b-28d914927d05&tileId=50de3c3a-2e8c-49bd-ada4-18d0b1e19415";
            if ("" === embedTileUrl)
                return;

            // to load a tile do the following:
            // 1: set the url, include size.
            // 2: add a onload handler to submit the auth token
            iframe = document.getElementById('iFrameEmbedTile');
            iframe.src=embedTileUrl + "&width=" + width + "&height=" + height;
            iframe.onload = postActionLoadTile;
        }

        
        // post the auth token to the iFrame. 
        function postActionLoadTile() {
            // get the access token.
            accessToken = "YOURTOKENHERE";

            // return if no a
            if ("" === accessToken)
                return;

            var h = height;
            var w = width; 

            // construct the push message structure
            var m = { action: "loadTile", accessToken: accessToken, height: h, width: w};
            message = JSON.stringify(m);

            // push the message.
            iframe = document.getElementById('iFrameEmbedTile');
            iframe.contentWindow.postMessage(message, "*");;
        }

    </script>
</head>
<body>

<iframe ID="iFrameEmbedTile" src="" height="500px" width="500px" frameborder="0" seamless></iframe>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"ab3c9a4238164ad2bb8954672a5a9399"}
</script>
<script type="text/javascript" src="http://localhost:37067/ed3b2d1937bc4b06bd06d5ce0d652d66/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

 

Helpful resources

Announcements
New Kudos Received Badges Coming

New Kudos Received Badges Coming

Kudos to you if you earned one of these! Check your inbox for a notification.

Power Platform World Tour

Power Platform World Tour

Find out where you can attend!

Top Solution Authors
Top Kudoed Authors (Last 30 Days)
Users online (4,534)