Power BI Embedded Reports (Basic)

Abstract

Power BI is emerging as a leader in the Business Intelligence Tools domain. It provides interactive visualizations and business intelligence capabilities, which is simple enough for end users to create reports and dashboards. Power BI has embedding capabilities, which can be useful to embed reports inside website, blog, webapp etc shared with internal organization or public. In this blog Basic Approach to embed will be performed.

1. Embed report in a secure portal or website (No-code Methods)

• Power BI reports can be easily and securely embedded in internal web portals. These portals can be cloud-based or hosted on-premises. These provide no-code embedding into any portal that accepts a URL or iFrame.
• The Embed option supports URL filters and URL settings. It allows you to integrate with portals using a low-code approach requiring only basic HTML and JavaScript knowledge.

1. Publish to web from Power BI (No-code Methods)

• Power BI reports can be published to web and available to everyone. It requires no login method. Before publishing report to public make sure you are not providing any confidential or proprietary information.
• This Embed method does not support URL filters and URL settings.

Comparison of Two types

Walk Through: Embedding in secure portal and applying JavaScript filters.

1. Go to app.powerbi.com and open your report that to be published. We are using US Sales Analysis, a sample report from Power BI. Then File>Embed Report>Website or portal.

2. There will be two links. First one is the link to report and that can be pasted in a browser window. Second one is iFrame Link, which can be pasted inside webpage, blog, webapp etc. In our case we will copy the second one.

3. The Structure of iframe code is like this.

<iframe width="1140" height="541.25" id="iFrame" src="https://app.Power BI.com/reportEmbed?reportId=<reportid>&autoAuth=true&ctid=<ctid>&config=<config>” frameborder="0" allowFullScreen="true"></iframe>

• In the iframe, we have to change the “src” attribute dynamically using JavaScript to get the report filter accordingly.
• Here id= “iframe” is added, thus it can easily be handled by JavaScript (getElementbyId).

4. Create drop down and button as follows. On button press the report will be filtered according to the selected option in the dropdown.

<select name="paytypes" id="region" style="width: 10%;">
    <option value="Midwest">Midwest</option>
    <option value="New England">New England</option>
    <option value="Northeast">Northeast</option>
    <option value="Southern">Southern</option>
    <option value="Southwest">Southwest</option>
</select>
<button onclick='show();'>Filter</button>

5. How URL Filter works? Documentation

• The syntax for query filter is

BASEURL?filter=Table/Field eq 'value' (or)
BASEURL&filter=Table/Field eq 'value'

• Here it is Region/Region eq ‘Midwest’

• Multiple filters can be applied using AND, OR.
• URL Filters don’t depend upon page/report filters or slicers. It’s a filter applied at table level.
• URL filter needs to be appended with base-URL as shown above. We will create a JavaScript to append URL-filter with base-URL when a button is clicked.

6. JavaScript function goes like this.

<script>
    function show()
    {
    var baseUrl = "https://app.Power BI.com/reportEmbed?reportId=<....codes....>;        
    var filtervar = document.getElementById("region").value;
    var disableNav = "&navContentPaneEnabled=false";
    document.getElementById("curfilter").innerHTML= filtervar;
    if(null != filtervar && "" != filtervar)
    {
    var newUrl = baseUrl + "&filter=Region/Region eq '" + filtervar + "'";
    } else {
        var newUrl = baseUrl+disableNav;
        document.getElementById("curfilter").innerHTML= "ALL";
    }
    var report = document.getElementById("iFrame");
    report.src = newUrl;
    }
</script> 

• The dropdown value is extracted getElementById(“region”).value and stored to filtervar. Current Filter is then set to filtervar.
• “&navContentPaneEnabled=false” is opti0nal. It will disable the bottom page-navigation leading to a cleaner look.
• A newUrl is made adding baseUrl and filter. This newUrl is assigned to scr attribute of iframe (report.src = newUrl).
• curfilter is a p-element storing the current filter.

7. Add iframe and JavaScript to website. Before you can see the report, you have to sign in to the account, which have access to this report. You require pro/premium per user/premium license to see reports. Trial PPU/PRO can be used also.

`

• Before adding filter, all regions are available. Here Current filter is set to ALL.
• After Filter button is pressed with drop down set to Midwest. We see the data filtered to Midwest. Current Filter element is set to Midwest. Navigation bar is disabled here.
• You can see the webpage visiting https://prisoft.com/pbi.

Walk Through: Publish to web from Power BI (Public)

In this method the report is exposed to the internet and anyone can see these reports without any credential or license needed. In this we will be using IMDB report made by us. Embedding report for public is simple and the limitations are discussed above. Before you can publish to web, your Power BI Admin should enable the Publish to Web option checked. Access can be given to all or specific security group of organization.

For embedding go to File>Embed report>Publish to web (public), then create embedded report and the following window will pop-up. Modify the items according to your needs. Copy the iframe code and you can embed your report on website, blog etc. You can find the report at the bottom of the blog.

Conclusion

Embedding Power BI report simplifies data visualisation and user interaction. This approach requires less coding knowledge and this will help people from non-coding background. There are limitations present like license and URL filter (Public embed). So advance Power BI embed is required when building application for customer or for organization. This is called Power BI Embedded Analytics Solutions. This will be discussed in upcoming blog.

PowerBI Publish to Web Sample