Forum Discussion

JinHe's avatar
JinHe
Frequent Visitor
1 year ago
Solved

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

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...
Need Help
  • JinHe's avatar
    JinHe
    1 year ago

    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;
        }}
      />

     

     

Anonymous's avatar
Anonymous
Not applicable
1 year ago

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's avatar
    JinHe
    Frequent Visitor
    1 year ago

    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;
        }}
      />