CODEWITHSUNDEEP
javascripthtmliframepowerbi
jennifer adams
jennifer adams

Reputation: 41

Remove share bar from power bi public embed

I have a report on power bi which I published on the web and I will create a local page on my computer to view it through embed code and share it with others on dropbox.

I want to remove the button bar which has the social media links to prevent sharing.

Can I also prevent showing iframe source link?

using java script maybe.

please describe in detail ,because I am a data analyst and I can't write java script or html.

thanks

embed code:

<iframe width="600" height="373.5" src="https://app.powerbi.com/view?r=eyJrIjoiYWYzNWU3NjktMjRmOC00NjdkLThlZjktZjEzODRhOWE3MTI4IiwidCI6IjFhYTk1NjRiLTE4YmUtNDU3YS04ZmFjLWEyOTZmNjdjMzU5OSJ9&pageName=ReportSection2" frameborder="0" allowFullScreen="true"></iframe>

Upvotes: 4

Views: 4547

Answers (2)

wildberry
wildberry

Reputation: 110

Have you tried a reverse proxy where hijack the page and add 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);
}

Once you're all set, the new embedded URL will be of the form: customdomain.com/view?r=eyJrIjE1NS00......

Please check this repo for further instructions: https://github.com/Hugoberry/PowerBI-nologo-proxy

Upvotes: 0

Solutions Folks
Solutions Folks

Reputation: 51

You can absolutely hide it from the initial view. Ignore the not possible folks.

Once you use the Publish to Web feature (IFrame), place that URL in the code below and paste into your site. You will need to adjust the height and width to your desired look. The goal here is to use the clip:rect feature. Adjust the height (in this case, the 1040 is smaller than the original 1080) to restrict/cut off the footer.

<div id="content">
<div style="height:1080px;width:1920px">
   <iframe width="1920" height="1080" src="PUT URL HERE" frameborder="0" style="position:absolute; clip:rect(0px,1920px,1040px,0px);
            bottom:-0px; allowFullScreen=" true"=""></iframe>
    </div>
</div>

Upvotes: 5

Related Questions