React wrapper for powerbi-client library
npm install powerbi-client-reactjsx
import { PowerBIEmbed } from 'powerbi-client-react';
`
$3
`jsx
embedConfig = {{
type: 'report', // Supported types: report, dashboard, tile, visual, qna, paginated report and create
id: '',
embedUrl: ' `
$3
`jsx
embedConfig = {{
type: 'report', // Supported types: report, dashboard, tile, visual, qna and paginated report
id: undefined,
embedUrl: undefined,
accessToken: undefined, // Keep as empty string, null or undefined
tokenType: models.TokenType.Embed
}}
/>
`
__Note__: To embed the report after bootstrap, update the props (with at least accessToken).
$3
This demo includes a React application that demonstrates the complete flow of embedding a sample report using the PowerBIEmbed component.
The demo shows how to bootstrap the report, embed it, and update it. Additionally, the demo showcases the usage of the powerbi report authoring library by enabling the user to change the type of visual from a report using the "Change visual type" button.
The demo also sets a "DataSelected" event, which allows the user to interact with the embedded report and retrieve information about the selected data.
To run the demo on localhost, run the following commands:
`
npm run demo
`
Redirect to http://localhost:8080/ to view in the browser.
$3
|Use case|Details|
|:------|:------|
|Embed Power BI|To embed your powerbi artifact, pass the component with at least _type_, _embedUrl_ and _accessToken_ in _embedConfig_ prop.|
|Get reference to the embedded object|Pass a callback method which accepts the embedded object as parameter to the _getEmbed_ of props.
Refer to the _getEmbed_ prop in Quick Start.|
|Apply style class|Pass the name(s) of style classes to be added to the embed container div to the _cssClassName_ props.|
|Set event handlers|Pass a map object of event name (string) and event handler (function) to the _eventHandlers_ prop.
__Key__: Event name
__Value__: Event handler method to be triggered
Event handler method takes 2 optional params:
First parameter: Event
Second parameter: Reference to the embedded entity|
|Reset event handlers|To reset event handler for an event, set the event handler's value as null in the _eventHandlers_ map of props.|
|Update settings (Report type only)|To update the report settings, update the _embedConfig.settings_ property of props.
Refer to the _embedConfig.settings_ prop in Quick Start.
__Note__: Update the settings only by updating embedConfig prop|
|Bootstrap Power BI|To bootstrap your powerbi entity, pass the props to the component without _accessToken_ in _embedConfig_.
__Note__: _embedConfig_ of props should at least contain __type__ of the powerbi entity being embedded.
Available types: "report", "dashboard", "tile", "visual", "qna" and "paginated report".
Refer to _How to bootstrap a report_ section in Quick Start.|
|Using with PowerBI Report Authoring|1. Install powerbi-report-authoring as npm dependency.
2. Use the report authoring APIs using the embedded report's instance|
|Phased embedding (Report type only)|Set phasedEmbedding prop's value as true
Refer to Phased embedding docs.|
|Apply Filters (Report type only)|1. To apply updated filters, update filters in _embedConfig_ props.
2. To remove the applied filters, update the _embedConfig_ prop with the filters removed or set as undefined/null.|
|Set Page (Report type only)|To set a page when embedding a report or on an embedded report, provide pageName field in the _embedConfig_.|
|Create report|To create a new report, pass the component with at least _type_, _embedUrl_ and _datasetId_ in _embedConfig_ prop.|
__Note__: To use this library in IE browser, use react-app-polyfill to add support for the incompatible features. Refer to the imports of demo/index.tsx.
$3
`ts
interface EmbedProps {
// Configuration for embedding the PowerBI entity (required)
embedConfig:
| IReportEmbedConfiguration
| IDashboardEmbedConfiguration
| ITileEmbedConfiguration
| IQnaEmbedConfiguration
| IVisualEmbedConfiguration
| IPaginatedReportLoadConfiguration
| IReportCreateConfiguration
// Callback method to get the embedded PowerBI entity object (optional)
getEmbed?: { (embeddedComponent: Embed): void }
// Map of pair of event name and its handler method to be triggered on the event (optional)
eventHandlers?: Map
// CSS class to be set on the embedding container (optional)
cssClassName?: string
// Phased embedding flag (optional)
phasedEmbedding?: boolean;
// Provide instance of PowerBI service (optional)
service?: service.Service
}
`
Supported Events
$3
|Entity|Event|
|:----- |:----- |
| Report | "buttonClicked", "commandTriggered", "dataHyperlinkClicked", "dataSelected", "loaded", "pageChanged", "rendered", "saveAsTriggered", "saved", "selectionChanged", "visualClicked", "visualRendered" |
| Dashboard | "loaded", "tileClicked" |
| Tile | "tileLoaded", "tileClicked" |
| QnA | "visualRendered" |
$3
`ts
type EventHandler = (event?: service.ICustomEvent, embeddedEntity?: Embed) => void | null;
`
Using supported SDK methods for Power BI artifacts
$3
Import the 'PowerBIEmbed' inside your targeted component file:
`ts
import { PowerBIEmbed } from 'powerbi-client-react';
`
$3
You can use `report` state to call supported SDK APIs.
Steps:
1. Create one state for storing the report object, for example, `const [report, setReport] = useState(); `.
2. Use the `setReport` method inside the component to set the report object.
`ts
embedConfig = { sampleReportConfig }
eventHandlers = { eventHandlersMap }
cssClassName = { reportClass }
getEmbeddedComponent = { (embedObject: Embed) => {
setReport(embedObject as Report);
} }
/>
`
3. Once the report object is set, it can be used to call SDK methods such as `getVisuals`, `getBookmarks`, etc.
`ts
async getReportPages(): Page[] {
// this.report is a class variable, initialized in step 3
const activePage: Page | undefined = await report.getActivePage();
console.log(pages);
}
``