cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
patchie
Regular 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
Eric_Zhang
Microsoft
Microsoft


@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
September Update

Check it Out!

Click here to learn more about the September 2022 updates!

Power BI Dev Camp Session 26

Check it Out!

Mark your calendars and join us on Thursday, September 29 at 11a PDT for a great session with Ted Pattison!

Top Solution Authors