White Label Analytics With Power BI Embedded

  • Published
  • Posted in Power BI
  • Updated
  • 3 mins read
  • Tagged as

White label is the ability to remove the brand’s logo and replace it with the third party logo.

White-labelling analytics makes the Business Intelligent tools used to look like your own application rather than someone else.  Independent Service Vendors utilize a business tool such as Power BI to make reports and dashboards and then embed it into the client’s application. However, embedding the BI tool’s user interface gives away the trick of reporting and does not match with the client’s brand and theme. So, if we white label then it will look like it had been produced by the vendor.

Why to use white label

When we white label the Power BI embedded software then reports look and feel like the rest of the application and uniformity is maintained throughout the application. We can white label as per the client’s brand even though the reports are built separately from the application. White-label analytics will make the user interface of the application more appealing thus enhancing the user experience considerably as developers can match the brand’s font, colour pallet with the analytical capabilities of embedded BI tools.

When embedding the BI reports in existing applications white labelling is a top requirement as it increases the end-user experience and user adoption.

How to achieve it?

Now to white label the Power Bi Embedded Report in your application you simply have to add a lines of code in your client side.

So, in the client side first we are going to render the report to load and remove the Power BI icon.

$(“#embedContainer”).css(“visibility”, “hidden”);

// Get a reference to the embedded report HTML element

var reportContainer = $(‘#embedContainer’)[0];

// Embed the report within the div element

var report = powerbi.embed(reportContainer, config);

report.on(“loaded”, function (event) {

            $(“#overlay”).hide();

            $(“#embedContainer”).css(“visibility”, “visible”);

            report.off(“loaded”);

        })

Now we will add a loading gif which will be shown while the report is loading in the background.  So basically the div element which will contain the gif will overlap with the div element which is the report container.

<div id=”container”>

<div id=”overlay”>

<img id=”spinner” alt=”Alternate Text” src=”image/giphy.gif”/>

</div>

<div id=”embedContainer” style=”height: 600px; width: 100%; max-width: 1400px;”></div>

</div>

Now, we can add our own CSS code to adjust the gif and its elements.

<style>

        #container{

            position:absolute;

            width: 1400px;

            height:600px;

        }

        #overlay{

            position:absolute;

            width:inherit;

            height:inherit;

        }

        #spinner{

            display: block;

            margin-top:10%;

            margin-left: auto;

            margin-right: auto;

            width:10%;

            height: 10%;

        } </style>

 Power BI Embedded

 

Pragya Verma
Data Analyst
Addend Analytics

Addend Analytics is a Microsoft Gold Partner based in Mumbai, India, and a branch office in the U.S.

Addend has successfully implemented 100+ Microsoft Power BI and Business Central projects for 100+ clients across sectors like Financial Services, Banking, Insurance, Retail, Sales, Manufacturing, Real estate, Logistics, and Healthcare in countries like the US, Europe, Switzerland, and Australia.

Get a free consultation now by emailing us or contacting us.