Hiding Page Footer in Power BI Report Embedded in React Application through iframe

Question

I have successfully integrated a Power BI report into my React application using an iframe. However, I'm struggling to find a way to hide the page footer that appears at the bottom of the Power BI report. I've explored options within Power BI Desktop, but they don't seem to apply to the embedded version.

Is there a specific configuration or workaround to hide the page footer when the Power BI report is embedded in a React application via an iframe? Any insights or guidance on achieving this would be greatly appreciated.

Answer 1

We can hide the pageNavigation pane in the Embedded reports. Check the below code to hide the navigation pane

// The new settings that you want to apply to the report.
const newSettings = {
     navContentPaneEnabled: false
};

// Update the settings by passing in the new settings you have configured.
try {
    await report.updateSettings(newSettings);
    console.log("Page Navigation pane was removed.");
}
catch (error) {
    console.log(error);
}

Refer to Configure Report setting - Page Navigation pane for more details.