How to remove bottom bar in Power BI published Dashboard

Question

Problem:

I have created a Power Bi dashboard and done the publish to the web after that I have embedded it in a react application. But in the publish dashboard there is a bottom bar like in the image. so it is coming to an embedded webpage also. So I want to know whether there is a way to remove it.Thank you

This is how Publish to web works. If you want flexibility, you should use the full blown embedding of Power BI using the API, e.g. see [this question](https://stackoverflow.com/questions/56409362/is-there-any-way-to-embed-power-bi-reports-and-dashboards-in-vb-net-or-c-sharp-d). See [Embed Configuration Details](https://github.com/microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details), where you can control the visibility of the navigation bar through `navContentPaneEnabled` property. — Andrey Nikolov, Apr 17 '20 at 06:54
@AndreyNikolov Thank you. I have another question if we can not remove it with publishing to the web is there a way to change the color of that bar without going to the Azure embedding API. — Tharindu Sandaruwan, Apr 18 '20 at 07:30

score 1 · Answer 1 · answered Oct 08 '21 at 13:15

Another approach is to use a reverse proxy where you have some styling to hide the bar. I've managed to achieve that 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. Here is an example of one of my configurations. https://powernote.xyz/view?r=eyJrIjoiYzQ3NmI0YjktZjE1NS00MWVlLTg1MmItYWJhNGIwMjMyZWMwIiwidCI6IjI4MGFiNDc5LTJhMzYtNDIwNS04MjBlLWUxMWYyZDhiZDA4ZCJ9&pageName=ReportSection

How to remove bottom bar in Power BI published Dashboard

1 Answers1