Hello everyone!
My name is Amit Shuster
And in this video we're going to learn how to fully white label an embedded report
That means how to hide the Power BI logo while loading the report
Or until it's fully rendered
As you may know, Power BI comes with a default loading logo
Which some applications would like to hide
We are going to learn how to control its visibility
And how to show a different loading spinner
Let's start
First we need to find the location of the `powerbi.embed` call
For this video I'm using the Power BI Embed "App owns data" sample
You can find the link for the sample in the description below
Now that we found the `powerbi.embed` call
We are going to hide the iframe before we start embedding the report
We will control the visibility css property of the container element
Note, that we are using the visibility property of the element
And not the display property
Using `display: none` will remove the element completely from the document
Which is not recommended
Here I'm using the jQuery css API
And setting the visibility to hidden
The next thing we need to do is listen either to the loaded event
Or to the rendered event, depending on what you'd like to achieve
In order to listen to events from the embedded report
We use `report.on` which receives an event name and a handler function
There are multiple events that you can listen to
Besides the loaded and the rendered event
For example: error, pageChanged
dataSelected, commandTriggered and buttonClicked.
In our case we will first listen to the rendered event
On the rendered event handler function
We should set the embed container visibility to visible
And remove the handler at the end of the block
So it will only be called once
We do this by calling `report.off` on the rendered event
Let's see what we got so far
We refresh the page
And as you can see we don't have the Power BI logo anymore
The report appears as soon as it finished to render
If we go back to the code and change the "rendered" event
To the "loaded" event
We will get a different behavior
With the "loaded" event
The report appears as soon as it finishes the loading phase
And starts rendering the report
Now for our final step
We will add a custom loading spinner
We start by adding a container for both the spinner and the embed container
We need to add an additional div element in order to center the loading spinner
We call it overlay and add the image element inside
At the bottom of the document we will add "style" tags
With the additional CSS configurations
We set the size of the container to the same size of the embed container
For the overlay div we set the position to absolute
And inherit the height and width from the parent
And for last
We set the spinner position to absolute
And set the top and left properties to 50% minus 50 pixels
So it will be centered
We use the jQuery hide function
To hide to loading spinner when the embed container is ready
And here is our final result
A white labeled embedded analytics for your application
Thank you for watching
Be sure to click the subscribe button
To stay up to date with all the videos for Power BI Developers
And if you liked this video
Don’t forget to click the thumbs up button below
I'll see you in the next video