Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
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.
Solved! Go to 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;
}}
/>
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;
}}
/>
User | Count |
---|---|
5 | |
4 | |
4 | |
2 | |
2 |
User | Count |
---|---|
8 | |
6 | |
4 | |
4 | |
4 |