Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

powerbi-report-component

2.4.2 • Public • Published

PowerBI Report Component

downloads license vulnerabilities

It's a minimalistic React component for embedding a Microsoft PowerBI report, dashboard or tile into your React application.

This repository is actively maintained by Akshay Ram (akshay5995) and Satya J (satya64).

Existing users of the package please refer to Change Log here and please refer here for the README for versions <=2.0.0.

[New Embed Type] ReportVisual (from >=2.4.0)

[New] Typescript support from >=2.2.2

[Change Log] >=2.3.0

  • (Breaking change) reportMode prop and config will accept View, Edit and Create. (previously it was edit/view/create)(case sensitive)
  • (Enhancement) Now you can use Edit mode in useReport hook.

Installation

npm i powerbi-report-component

Usage for Report

import React, {Component} from 'react';
import { Report } from 'powerbi-report-component';
 
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.report = null; // to store the loaded report's object to perform operations like print, full screen etc..
  }
  ...
  handleDataSelected = (data) => {
    // will be called when some chart or data element in your report clicked
  }
 
  handleReportLoad = (report) => {
    // will be called when report loads:
    // - scripts and data received from server, visuals are rendered on the browser
    // - flickering Power BI logo stops appearing but report is not fully ready to be consumed
 
    this.report = report; // get the report object from callback and store it.(optional)
  }
 
  handleReportRender = (report) => {
    // will be called when report renders:
    // - visuals finish rendering
    // - report is fully visible and ready for consumption
 
    this.report = report; // get the report object from callback and store it.(optional)
  }
 
  handlePageChange = (data) => {
    // will be called when pages in your report changes
  }
 
  handleTileClicked = (data) => {
    console.log('Data from tile', data);
  }
 
  render() {
    const reportStyle = {
        // style object for report component
    };
    const extraSettings = {
            filterPaneEnabled: false, //true
            navContentPaneEnabled: false, //true
            hideErrors: false // Use this *only* when you want to override error experience i.e, use onError
            // ... more custom settings
    };
    return (
    <div className="root">
        <Report
            tokenType="Embed" // "Aad"
            accessToken="" // accessToken goes here
            embedUrl="" // embedUrl goes here
            embedId="" // report or dashboard Id goes here
            pageName="" // set as current page of the report
            reportMode="View" // open report in a particular mode View/Edit/Create
            datasetId={datasetId} // required for reportMode = "Create" and optional for dynamic databinding in `report` on `View` mode
            groupId={groupId} // optional. Used when reportMode = "Create" and to chose the target workspace when the dataset is shared. 
            extraSettings={extraSettings}
            permissions="All" // View, For "Edit" mode permissions should be "All"
            style={reportStyle}
            onLoad={this.handleReportLoad}
            onRender={this.handleReportRender} // not allowed in "Create" mode
            onSelectData={this.handleDataSelected}
            onPageChange={this.handlePageChange}
            onTileClicked={this.handleTileClicked}
            onSave={this.handleReportSave} // works for "Edit" and "Create"
        />
    </div>
    );
  }
}
 

Visit here for more details on creating reports with shared dataset

Usage for Dashboard

import { Dashboard } from 'powerbi-report-component';
 
// inside render
<Dashboard
  tokenType={tokenType}
  accessToken={accessToken}
  embedUrl={embedUrl}
  embedId={embedId}
  style={style} // style object for dashboard component
  pageView={pageView} // 'fitToWidth' (default) , 'oneColumn', 'actualSize'
  onLoad={(dashboard) => {
    console.log('Dashboard Loaded!');
    this.dashboard = dashboard; // get the dashboard object from callback and store it.(optional)
  }}
  onTileClicked={(data) => {
    console.log('Data from tile', data);
  }}
/>

Usage for Tile

import { Tile } from 'powerbi-report-component';
 
// inside render
<Tile
  tokenType={tokenType}
  accessToken={accessToken}
  embedUrl={embedUrl}
  embedId={embedId}
  dashboardId={dashboardId}
  style={style} // style tile for report component
  onClick={(data) => {
    console.log('Data from tile', data);
  }}
  onLoad={(data) => {
    console.log('Tile loaded', data);
  }}
/>

[New] Usage for ReportVisual

import { ReportVisual } from 'powerbi-report-component';
 
// inside render
<ReportVisual
  tokenType={tokenType}
  accessToken={accessToken}
  embedUrl={embedUrl}
  embedId={embedId}
  pageName={pageName}
  visualName={visualName}
  style={style} // style tile for report component
  onSelectData={(data) => {
    console.log('Data from ReportVisual', data);
  }}
  onLoad={(data) => {
    console.log('ReportVisual loaded', data);
  }}
  onRender={(data) => {
    console.log('ReportVisual rendered', data);
  }}
/>

Like hooks ? You'll love this :)

useReport (available from v2.1.1)

Provides a more fine grained approach for embedding. (where you're in control)

import React, { useEffect, useRef } from 'react';
import { useReport } from 'powerbi-report-component';
 
const MyReport = ({ accessToken, embedUrl, embedId }) => {
  const reportRef = useRef(null);
  const [report, setEmbed] = useReport();
 
  const myReportConfig = {
    embedType: 'report',
    tokenType: 'Embed',
    accessToken: accessToken,
    embedUrl: embedUrl,
    embedId: embedId,
    reportMode: "View", // "Edit"
    permissions: "View", // "All" (when using "Edit" mode)
    extraSettings: {
      filterPaneEnabled: false,
      navContentPaneEnabled: false,
    },
  };
 
  // important
  useEffect(() => {
    // call inside useEffect so the we have the reportRef (reference available)
    setEmbed(reportRef, myReportConfig);
  }, []);
 
  const handleClick = () => {
    // you can use "report" from useReport like
    if (report) report.print();
  };
 
  return (
    <div className="report-container">
      <div className="report" ref={reportRef} />
      <button onClick={handleClick}>Print my report</button>
    </div>
  );
};
 
export default MyReport;

Passing in custom layout for useReport hook.

Example is taken from powerbi js wiki: Custom-Layout.

import { models } from 'powerbi-client'; // Import from the dependency
 
// Example layout config 
const layoutSettings = {
  layoutType: models.LayoutType.Custom,
  customLayout: {
    pageSize: {
      type: models.PageSizeType.Custom,
      width: 1600,
      height: 1200,
    },
    displayOption: models.DisplayOption.ActualSize,
    pagesLayout: {
      ReportSection1: {
        defaultLayout: {
          displayState: {
            mode: models.VisualContainerDisplayMode.Hidden,
          },
        },
        visualsLayout: {
          VisualContainer1: {
            x: 1,
            y: 1,
            z: 1,
            width: 400,
            height: 300,
            displayState: {
              mode: models.VisualContainerDisplayMode.Visible,
            },
          },
          VisualContainer2: {
            displayState: {
              mode: models.VisualContainerDisplayMode.Visible,
            },
          },
        },
      },
    },
  },
};
 
// Create your config
const myReportConfig = {
  embedType: 'report',
  tokenType: 'Embed',
  accessToken: accessToken,
  embedUrl: embedUrl,
  embedId: embedId,
  extraSettings: {
    filterPaneEnabled: false,
    navContentPaneEnabled: false,
    ...layoutSettings, // layout config
  },
};
 
 
// Inside your component
useEffect(() => {
  setEmbed(reportRef, myReportConfig);
}, []);
 

Report features and props you can pass into the component

Inside your component where you're using { Report } component.

Constructor:

  ...
  constructor(props) {
    super(props);
    this.report = null; //used to store value of returned report object
  }
  ....
 

Callback passed to the onLoad or onRender prop

  handleReportLoad = (report) => {
    this.report = report; // get the report object from callback and store it.
  }
 
  handleReportRender = (report) => {
    this.report = report; // get the report object from callback and store it.
  }
  ...

using the this.report to perform operations

  ...
 
  setFullscreen = () => {
    if(this.report) this.report.fullscreen();
  }
 
  printReport = () => {
    if(this.report) this.report.print();
  }
 
  ...
 
  //Inside render
 
  <button onClick={this.setFullscreen}>Fullscreen</button>
  <button onClick={this.printReport}>Print</button>
 
  ...
 

For Report Level Filters:

  /*
    Example filter object used in microsoft's demo page:
 
    const filter = {
        $schema: "http://powerbi.com/product/schema#basic",
        target: {
          table: "Store",
          column: "Chain"
        },
        operator: "In",
        values: ["Lindseys"]
      };
  */
  ...
 
  setFilter = (filter) => this.report.setFilters([filter]).catch(function (errors) {
        console.log(errors);
    });
 
  getFilter = () => this.report.getFilters().then(function (filters) {
          console.log(filters);
      }).catch(function (errors) {
          console.log(errors);
      });
 
  removeFilters = () => this.report.removeFilters()
      .catch(function (errors) {
          console.log(errors);
      });
 
  ...
 

Report Page Change

  onPageChange={(data) =>
    console.log(`Page name :{data.newPage.displayName}`)
  }

Report Load

  onLoad={(report) => {
    console.log('Report Loaded!');
    this.report = report;
    }
  }
  onSave={(data) => {
    console.log('Report Saved! Event data: '+data);
    }
  }

Report Render

  onRender={(report) => {
    console.log('Report Rendered!');
    this.report = report;
    }
  }

Report Button Clicked

  onButtonClicked={(data) => {
    console.log(`Button ${data.title} of type ${data.type} Clicked!`);
    }
  }

Report Command Triggered

  onCommandTriggered={(extensionCommand) => {
    console.log('Extension Command Triggered!');
    }
  }

Report Data Element Clicked

  onSelectData={(data) =>
    console.log(`You clicked on chart: ${data.visual.title}`);
  }

Report Handle Errors

  onError={(data) =>
     console.log(`Error: ${data}`);
  }

Use ‘report’ object returned to parent component or from useReport for:

Note: you wouldn't use this if you're using report from useReport hook.

  1. Change Report Mode to View or Edit:
//mode can be "View" or "Edit"
 
changeMode = (mode) => this.report.switchMode(mode);
  1. Fullscreen
setFullscreen = () => this.report.fullscreen();
  1. Print Report
printReport = () => this.report.print();
  1. Set Filters
    //example filter from microsoft's demo page
 
    const filter = {
      $schema: "http://powerbi.com/product/schema#basic",
      target: {
        table: "Store",
        column: "Chain"
      },
      operator: "In",
      values: ["Lindseys"]
    };
 
    // using event handlers
 
    setFilter = (filter) => this.report.setFilters([filter]).catch(function (errors) {
      console.log(errors);
    });
 
    // during onload
 
    onLoad = (report) => {
      report.setFilters([filter]).catch(function (errors) {
        console.log(errors);
      });
      this.report = report;
    }
  }
 
  1. Get Filters
getFilter = () =>
  this.report
    .getFilters()
    .then(function (filters) {
      console.log(filters);
    })
    .catch(function (errors) {
      console.log(errors);
    });
  1. Remove Filters
removeFilters = () =>
  this.report.removeFilters().catch(function (errors) {
    console.log(errors);
  });
  1. Save edited report when in "Edit" mode

(note: you need to have enough permissions to save the report)

    async saveReport() {
    if (this.report) {
      try{
        await this.report.save();
      } catch (err) {
        console.log("Error saving report", err);
      }
    }
  }
 
  1. Show / Hide all visual headers:
toggleAllVisualHeaders = (bool) => {
  const newSettings = {
    visualSettings: {
      visualHeaders: [
        {
          settings: {
            visible: bool, // boolean variable
          },
        },
      ],
    },
  };
  this.report
    .updateSettings(newSettings)
    .then(function () {
      console.log('Visual header toggle successful.');
    })
    .catch(function (errors) {
      console.log(errors);
    });
};

Dashboard features and props you can pass into the component

Dashboard Load

  onLoad={(dashboard) => {
    console.log('Report Loaded!');
    this.dashboard = dashboard;
    }
  }

Dashboard Tile Click

onTileClicked = {(data) => {
  console.log('Data from tile', data);
}}

Use dashboard object returned to parent component for:

  1. Fullscreen
setFullscreen = () => this.dashboard.fullscreen();

Tile features and props you can pass into the component

Tile Load

  onLoad={(data) => {
    console.log('Data from tile', data);
  }}

Tile Click

onClick = {(data) => {
    console.log('Data from tile', data);
}}

For playground visit:

http://akshay5995.github.io/powerbi-report-component

You can find out how to generate token for your report using Powershell from this video.

Don't have a Report?

You can get the Token, URL and Report ID from Microsoft JS playground:

https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html#

Follow the instructions below in image:

instructions not available

Install

npm i powerbi-report-component

DownloadsWeekly Downloads

4,108

Version

2.4.2

License

MIT

Unpacked Size

234 kB

Total Files

32

Last publish

Collaborators

  • avatar