cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
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
Highlighted
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 Given Badges Coming

New Kudos Given Badges Coming

We're rolling out new Kudos Given badges. Find out how many Kudos you've given.

Microsoft Implementation for Communities Wins Award

Microsoft Implementation for Communities Wins Award

Learn about the award-winning innovation that was implemented across Microsoft’s Business Applications Communities.

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 (2,167)