Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
JinHe
Frequent Visitor

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.

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

 

 

View solution in original post

2 REPLIES 2
Anonymous
Not applicable

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

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

 

 

Helpful resources

Announcements
July 2025 community update carousel

Fabric Community Update - July 2025

Find out what's new and trending in the Fabric community.

July PBI25 Carousel

Power BI Monthly Update - July 2025

Check out the July 2025 Power BI update to learn about new features.