powerbi-client-react - How to enter full screen mode?

[JinHe]

Although I found a full-screen solution, I am not very satisfied with it.
display embedded reports in full screen mode 

I think this should be possible by setting embedConfig, like this:

const embedConfig = {
    type: 'report',
    embedUrl,
    accessToken,
    tokenType: models.TokenType.Embed,
    settings: {
        fullscreenButton: {
            visible: true,
        }
    },
  };

but I haven't found any documentation on this.

Does anyone know how to do this? Thanks a lot.

[Anonymous]

Hi @JinHe ,

Please try the following codes and check if it can work:

   var models = window['powerbi-client'].models;
        var embedConfig = {
            type: 'report',
            tokenType: models.TokenType.Embed,
            accessToken: 'YourAccessToken', // Replace with your access token
            embedUrl: 'YourEmbedUrl', // Replace with your embed URL
            id: 'YourReportId', // Replace with your report ID
            settings: {
                filterPaneEnabled: false,
                navContentPaneEnabled: false
            }
        };

        // Get a reference to the Power BI report container div
        var reportContainer = document.getElementById('reportContainer');

        // Embed the report and display it within the div container
        var report = powerbi.embed(reportContainer, embedConfig);

        report.on('loaded', function() {
            // Enter full screen mode once the report is loaded
            report.fullscreen();
        });

Best Regards

[JinHe · Accepted solution]

HI @Anonymous,

I have implemented full screen functionality through a custom button. I just think this is not very convenient, this should be a built-in function of the report.

The following is the react code implementation, which realizes full screen by clicking the custom button：

const reportRef = useRef();

function fullscreen() {
    if (reportRef && reportRef.current) {
      reportRef.current.fullscreen();
    }
  }

<PowerBIEmbed
        embedConfig={reportConfig}
        eventHandlers={eventHandlersMap}
        cssClassName="report-container"
        getEmbeddedComponent={(embedObject) => {
          reportRef.current = embedObject;
        }}
      />