CODEWITHSUNDEEP
powerbipowerbi-embedded
Dan Cundy
Dan Cundy

Reputation: 2849

Hide the Power BI logo during visualization load

Microsoft have announced it is possible to turn off the loading image shown when a report is loading.

Loading Image

enter image description here

Use the Power BI Embedded JavaScript SDK to hide the flickering Power BI logo that appears when a report is loaded. - power-bi-embedded-feature-hide-the-power-bi-logo-during-visualization-load

However I cannot find any mention of this in any of the JS SDK documentation or any examples online.

Has anyone achieved this yet?

Upvotes: 2

Views: 4717

Answers (3)

pragyy
pragyy

Reputation: 116

First add a gif which you want instead of the Power BI logo. You can add it in a div element. This element will overlap the div element containing the report. The HTML code looks like below:

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

Once you have added your gif. Now, make changes in the JavaScript Code. So you final JavaScript embedding code will be:

<script type="text/javascript">
    // Read embed token
    var embedToken = "<% =this.embedToken %>";
    // Read embed URL
    var embedUrl = "<% = this.embedUrl %>";
        // Read report Id
        var reportId = "<% = this.reportId %>";

    // Get models (models contains enums)
    var models = window['powerbi-client'].models;

    // Embed configuration is used to describe what and how to embed
    // This object is used when calling powerbi.embed
    // It can also include settings and options such as filters
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: embedToken,
        embedUrl: embedUrl,
        id: reportId,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
        }
    };

    $("#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");

    })


</script>

You can also add CSS to align you gif with your report:

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

Further, you can refer to the following youtube link: https://www.youtube.com/watch?v=YhjtunTmnbw. This video is by the Power BI official YouTube account. In this video, you can learn how to get white-labelled embedded analytics in your application with Power BI Embedded. Discover how to hide the Power BI logo until the loaded or the rendered event, and how to use a personalized logo for the loading phase.

Upvotes: 3

RBreuer
RBreuer

Reputation: 1391

What the recommended way to do this, even in the article you referenced, is - 1. Hide the iframe (or the div containing it) 2. Listen to either the loaded event when using (phased loading)[https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API] or rendered otherwise 3. Show the div you hid before and voila - the embedded power bi is already loaded..

Upvotes: 1

CowboyCoder
CowboyCoder

Reputation: 61

It is not currently possible to remove the PowerBI loading symbol. It would be great idea to suggest to input your own custom logo though

Upvotes: 0

Related Questions