Publish Power BI Visualization and Create Site with Power Apps

This post is part of Algorütm Podcast: Low-Code No-Code episode:
Audio / Video

We are going to publish Power BI visualization. We can publish it to any site, regardless are you hosting a WordPress or any other type of site.
But in case you don’t have a site already, we are going to create one using Power Apps (Power Apps Portal).

Prepare Power BI Visualization

If you have a Power BI visualization that you want to publish, you are all set. If you don’t, take a look at Power BI – Map Control on how we created one.

For the whole project overview, take a look at
Garmin Location Tracking using Power Platform

Create new Power Apps Site

If you already have a site, you can skip this section – go straight to Publish Power BI Visualization.

Power Apps Account

To use Power Apps, you need to activate an account.
Here are the instructions on how to use Community Plan.

Portal Creation

On the Power Apps homepage, click Create and choose Portal from blank

Fill in the form and hit Create

This is going to take some time… Se you in 5 minutes 🤭

Once done, you should see your homepage

It’s still quite empty, but you can already browse your new site 🙂

Let’s create New Page with Blank layout

When page is ready, set
* Name: whatever title you want
* Partial URL: path to the page
* Template: Full Page

Let’s add some UI Element
Click on Components button

Select Two columns section

Delete the old One column section – and your page should look this now

And that’s it, we are ready to import Power BI visualization.

Publish Power BI Visualization

Go to your Power BI report.
Click … / Embed

There you have 2 options
1. Website or portal
2. Publish to web (public)

If you choose 1. Website or portal – user will need to sign in before they see the visualization (and after the sign in, they still need to have a permission to see it).
If you choose 2. Publish to web (public) – visualization will be available to all users. Guests or signed in, doesn’t matter.

Choose one and click it

You are again presented with two options
1. Direct URL
2. HTML code for the iframe (including the URL)
If you are editing HTML directly, copy the 2.
If you have premade UI component for the iframe, copy 1.

For our Power App Portal, we will use 1. Coly the URL

Embed iframe in Power App Portal

Now that you have an URL (or iframe element) – we can embed it in our web site.

Back in the Power App, click on Components again

If you are using Power Apps, choose Power BI and follow the wizard to embed your visualization.
For this demo, we will use IFrame – this approach is compatible with WordPress and other hosting platforms.

Click on IFrame and set
* Width: 308px
* Height: 220px
* Link: URL that you copied few steps above

Let’s add a text element also
* Select second column
* Click on Components
* Click on Text

Type:
Real-time location tracking demo. Click here for more info:
https://sponza-blog.azurewebsites.net/blog/2020/05/17/garmin-location-tracking-using-power-platform/

Final Result

Reference

Leave a Reply

Your email address will not be published. Required fields are marked *