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.

Power BI reports on SharePoint

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:

  1. Open your Power BI report
  2. Click on Share Embed report SharePoint Online
  3. Copy the embed link
  4. Open your SharePoint site and create the new page to add your report
  5. Add the Power BI web part
  6. Paste the link and configure the settings in the web part property pane
    configure power bi webpart
  7. Save the page and publish it
  8. 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.
  9. Provide the URL for the site collection and name of the page
  10. Select page layout 3 – Single Web Part App Page, after a few second you will see a success message in the console.
    change sharepoint page layout
  11. Refresh your page and you will get a full width report on SharePoint
    Full-width Power bi report on SharePoing

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:

  1. Download the installation file from here, if you want to compile the project yourself the source code is available here
  2. Open your app catalog and upload the sppkg file
  3. Make sure you select Make this solution available to all sites in the organization
    Install modern script editor on SharePoint
  4. 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:

  1. Open your Power BI report
  2. Click on Share Embed Report Website or portal
    embed power bi report
  3. Copy the iframe code as shown in the following image
    copy iframe code power bi
  4. Edit your SharePoint page
  5. Create a full-width section
    full-width section SharePoint
  6. Add the Script Editor webpart to the full-width section
    Add a modern script editor
  7. Click on Edit Markup
  8. In the property pane click on the Edit HTML Code text box
  9. In the Edit HTML Code pane paste the HTML for the iframe
  10. Change the width to 100% and adjust the height value to your needs
    Paste power bi iframe on SharePoint
  11. Click on Save and continue to build your page
    full-width section SharePoint with power bi and other web parts

Business vector created by stories – www.freepik.com


One Response to “How to display a full-width Power BI report in SharePoint”

  1. María Pereira

    October 2, 2020

    Bom tarde João,

    Espero esteja tudo muito bem contigo e os teus.

    Grata com o coração pelo teu tempo e atenção, por ser tão receptivo, efectivamente é a informação que necessitava.

    Espectacular João, muita obrigada!!!

    Reply

Leave a Reply


Web developer focused on SharePoint branding, blogger, tech enthusiast. Travelling and sports are my addictions, knowledge and success are my daily motivations.