How to open reports container in focus mode on load?

[rajat-arora084]

I am opening reports list using PowerBIEmbed component. The issue is that the report is taking only half of the iframe width. I can make it go full screen by using focus button. But the thing is i want it to be opened in full screen as soon as it loads.

My component is as follows:

<PowerBIEmbed embedConfig={{ type: "report", // Supported types: report, dashboard, tile, visual, qna, paginated report and create id: id, embedUrl: embedUrl, accessToken: reportToken, tokenType: models.TokenType.Embed, // Use models.TokenType.Aad for SaaS embed //pageView: "oneColumn", // filters: [ // { // $schema: "http://powerbi.com/product/schema#basic", // target: { // table: // "scai_dpai_06b10774_2c7a_4b17_b810_d62c7a943d98 app_case", // column: "status", // }, // operator: "IN", // values: ["NEW"], // filterType: models.FilterType.BasicFilter, // requireSingleSelection: true, // }, // ], settings: { panes: { filters: { expanded: false, visible: false, }, }, navContentPaneEnabled: false, background: models.BackgroundType.Transparent, layoutType: models.LayoutType.Custom, customLayout: { displayOption: models.DisplayOption.FitToWidth, }, }, }} eventHandlers={ new Map([ ["loaded", Function.prototype], ["rendered", Function.prototype], [ "error", function (event) { console.log(event.detail); }, ], ["visualClicked", Function.prototype], ["pageChanged", Function.prototype], ]) } cssClassName={"bi-embedded"} getEmbeddedComponent={(embeddedReport) => { window.report = embeddedReport; // save report in window object }} />

[KotanaSai21]

To open the report in full screen mode as soon as it loads, call the report.fullscreen() inside the loaded event Handler.

Refer to below snapshot how to load the report in fullscreen in the demo application.

    useEffect(() => {
        if (report) {
            report.setComponentTitle('Embedded Report');
            report.fullscreen()
        }
    }, [report]);

Reference: Launch Embed Component in Fullscreen mode