CODEWITHSUNDEEP
powerbi
Tharindu Sandaruwan
Tharindu Sandaruwan

Reputation: 585

How to remove bottom bar in Power BI published Dashboard

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

enter image description here

Upvotes: 1

Views: 4945

Answers (2)

Austin Matthews
Austin Matthews

Reputation: 1

I didn't find any good solutions until I stumbled on this one. Using the embed link, just toss this to the end of it and it will provide you with a report that is missing the whole bottom bar and gives you a nice clean look:

&navContentPaneEnabled=false

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

Upvotes: 1

Related Questions