Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

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
Employee
Employee


@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
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.