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

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

     

     

2 Replies

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