How to display a full-width Power BI report in SharePoint
The integration of Power BI and SharePoint is straight forward, Microsoft provides an out of the box web part for SharePoint and all you have to do is grab the report URL from Power BI.
Even though the process is straight forward you may find the report to small due to the max page width on SharePoint. In this article you will find two different methods to embed a full-width Power BI report in your SharePoint pages.
Create a full-width Power BI report using a Single Part App Page
Single part pages only allow you to setup one web part on it, this is the method you must use if you are willing to display just the report in the page using all the available space.
This process requires the use of PnP PowerShell. If you don’t have it yet installed, you can download it form here and don’t worry I’m providing all the code necessary.
To implement this method, do the following:
- Open your Power BI report
- Click on Share Embed report SharePoint Online
- Copy the embed link
- Open your SharePoint site and create the new page to add your report
- Add the Power BI web part
- Paste the link and configure the settings in the web part property pane
- Save the page and publish it
- Download the PowerShell script from here, open your PowerShell console and execute it. The execution of the script is self-explanatory and with it you are able switch between the 3 page layouts in case you want to revert your page to the original page layout.
- Provide the URL for the site collection and name of the page
- Select page layout 3 – Single Web Part App Page, after a few second you will see a success message in the console.
- Refresh your page and you will get a full width report on SharePoint
Create a full-width Power BI report using a script editor
If you have the need to combine your report with other web parts in the page you will need to use the script editor web part available in the PnP repository.
Modern SharePoint pages allow you to create a full-width section at the top of your pages unfortunately there is a limited set of web part available to use in this area and Power BI is not one them.
The custom script editor however can be used in the full-width area and can be used to display your report along with other webparts.
Before jumping into the actual implementation of this method you first need to install the script editor web part on your tenant by doing the following:
- Download the installation file from here, if you want to compile the project yourself the source code is available here
- Open your app catalog and upload the sppkg file
- Make sure you select Make this solution available to all sites in the organization
- Click on Deploy
Now that you have your web part ready to be used, its time to create your SharePoint page by doing the following:
- Open your Power BI report
- Click on Share Embed Report Website or portal
- Copy the iframe code as shown in the following image
- Edit your SharePoint page
- Create a full-width section
- Add the Script Editor webpart to the full-width section
- Click on Edit Markup
- In the property pane click on the Edit HTML Code text box
- In the Edit HTML Code pane paste the HTML for the iframe
- Change the width to 100% and adjust the height value to your needs
- Click on Save and continue to build your page