CODEWITHSUNDEEP
powerbipowerbi-embedded
Mourad Riahi
Mourad Riahi

Reputation: 105

Hide the logoBar in power BI

Is it possible to hide or don't display this logoBar of power BI after publishing the report in web ?

enter image description here

Thank you.

Upvotes: 2

Views: 6219

Answers (6)

Inês Borges
Inês Borges

Reputation: 133

Add this css:

.iframe {
    width: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 36px), 0% calc(100% - 36px));
}

Because the height of the bar is 36px. You can know the height in developer tools. Clip path crops the iframe. width property is optional.

Upvotes: 1

MITESH KR JHA
MITESH KR JHA

Reputation: 7

Yes. By adding some style on the Iframe element tag.

style="position:absolute; clip:rect(0px,1150px,500px,0px);width:100%"

Upvotes: 0

wildberry
wildberry

Reputation: 110

Another approach is to use a reverse proxy where you have some styling to hide the bar. I've managed to achieve this with Cloudflare Workers.

Another benefit of this approach is you get the dashboard displayed from your own custom domain.

You will need a Cloudflare account where you configure a worker with the script below. If you set Cloudflare to be your NameServer then you can have a custom redirect on the worker with your domain name.

const upstream = 'app.powerbi.com'
const upstream_path = '/'

// Whether to use HTTPS protocol for upstream address.
const https = true

// Whether to disable cache.
const disable_cache = true

addEventListener('fetch', event => {
    event.respondWith(fetchAndApply(event.request));
})

class RemoveElement {
element(element) {
    element.append(`
<style>
.embeddedLandingRootContentLogoVisible { height: 100% }
.logoBarWrapper { display: none }
</style>
`, { html: Boolean })
    console.log(`Incoming element: ${element.tagName}`)
}
}

async function fetchAndApply(request) {

    const region = request.headers.get('cf-ipcountry').toUpperCase();
    const ip_address = request.headers.get('cf-connecting-ip');
    const user_agent = request.headers.get('user-agent');

    let response = null;
    let url = new URL(request.url);
    let url_hostname = url.hostname;

    if (https == true) {
        url.protocol = 'https:';
    } else {
        url.protocol = 'http:';
    }
    var upstream_domain = upstream;

    url.host = upstream_domain;
    if (url.pathname == '/') {
        url.pathname = upstream_path;
    } else {
        url.pathname = upstream_path + url.pathname;
    }


        let method = request.method;
        let request_headers = request.headers;
        let new_request_headers = new Headers(request_headers);

        new_request_headers.set('Host', upstream_domain);
        new_request_headers.set('Referer', url.protocol + '//' + url_hostname);

        let original_response = await fetch(url.href, {
            method: method,
            headers: new_request_headers
        })

        response = new Response(original_response.body, original_response)
        let original_text = null;
        let response_headers = original_response.headers;
        let new_response_headers = new Headers(response_headers);
        let status = original_response.status;

        if (disable_cache) {
            new_response_headers.set('Cache-Control', 'no-store');
        }

        new_response_headers.set('access-control-allow-origin', '*');
        new_response_headers.set('access-control-allow-credentials', true);
        new_response_headers.delete('content-security-policy');
        new_response_headers.delete('content-security-policy-report-only');
        new_response_headers.delete('clear-site-data');

        if (new_response_headers.get("x-pjax-url")) {
            new_response_headers.set("x-pjax-url", response_headers.get("x-pjax-url").replace("//" + upstream_domain, "//" + url_hostname));
        }

        return new HTMLRewriter().on('body', new RemoveElement()).transform(response);
}

Then the embedded URL for your new report will be your custom domain + the query string from the original embedded URL of the report.

I have created a repo with further instructions for this approach. https://github.com/Hugoberry/PowerBI-nologo-proxy

Upvotes: 0

mukund srinivas
mukund srinivas

Reputation: 46

I found a way: I created a <div> with background white, height of 10px and translated it up till it hide the power BI logo.
Don't forget to set its z-index to 1000

.hider {
  z-index: 1000;
  height: 40px;
  transform: translateY(-80px);
  background-color: white;
}

Upvotes: 3

Amira Bedhiafi
Amira Bedhiafi

Reputation: 1

The logo bar is only shwon when you're publishing your report on the web. Switch to the premium Power BI users to get rid of it. Power BI Embedding is an alternative.

Upvotes: 0

RBreuer
RBreuer

Reputation: 1391

The logo bar you're referring to is part of the 'Publish to Web' feature in Power BI, also known as 'Anonymous Embedding'. This is a kind of watermark Power BI uses to show the report's origin. This is not removable since 'Publish to Web' is a feature that is not for premium Power BI users.

If you would like to display your reports without having to show the logo bar, I'd recommend using Power BI Embedding: https://powerbi.microsoft.com/en-us/power-bi-embedded/

Upvotes: 3

Related Questions