powerbi-client-react

A React wrapper library for embedding PowerBI artifacts.

Table of contents

• Sample Usage
• Run Demo
• Docs
  • Props interface
  • PowerBI Embed
  • Get reference to embedded object
  • How to set new accessToken
  • Set event handlers
  • Reset event handlers
  • Apply style class
  • Update settings (Report only)
  • PowerBI Bootstrap
• Flow diagram
• Dependencies

Sample Usage

How to import:

import { PowerBIEmbed } from 'powerbi-client-react';

How to bootstrap a PowerBI report:

<PowerBIEmbed
	embedConfig = {{
		type: 'report',   // Supported types: report, dashboard, tile, visual and qna
		id: undefined, 
		embedUrl: undefined,
		accessToken: undefined,    // Keep as empty string, null or undefined
		tokenType: models.TokenType.Embed
	}}
/>

How to embed a PowerBI report:

<PowerBIEmbed
	embedConfig = {{
		type: 'report',   // Supported types: report, dashboard, tile, visual and qna
		id: '<Report Id>',
		embedUrl: '<Embed Url>',
		accessToken: '<Access Token>',
		tokenType: models.TokenType.Embed,
		settings: {
			panes: {
				filters: {
					expanded: false,
					visible: false
				}
			},
			background: models.BackgroundType.Transparent,
		}
	}}

	eventHandlers = { 
		new Map([
			['loaded', function () {console.log('Report loaded');}],
			['rendered', function () {console.log('Report rendered');}],
			['error', function (event) {console.log(event.detail);}]
		])}
		
	cssClassName = { "report-style-class" }

	getEmbed = { (embeddedReport) => {
		this.report = embeddedReport as Report;
	}}
/>

Run Demo

To run the demo on localhost, run the following commands:

npm install
npm run install:demo
npm run demo

Redirect to http://localhost:8080/ to view in the browser.

Docs

Topic	Details
PowerBI Embed	To embed your powerbi artifact, pass the component with atleast type, embedUrl and accessToken in embedConfig prop.
Get reference to embedded object	Pass a callback method which accepts the embedded object as parameter to the getEmbed of props. Refer to the getEmbed prop in Sample Usage.
Apply style class	Pass the name(s) of classes to be set as "classname" for the embed container div via className of props.
Set event handlers	Pass a map object of event name (string) and event handler (function) to the eventHandlers of props. Key: Event name Value: Method to be triggered
Reset event handlers	To reset event handler for an event, set the event handler's value as null in the eventHandlers map of props.
How to set new accessToken	To set new accessToken in the same embedded powerbi artifact, pass the updated accessToken in embedConfig of props. Example scenario: Current token has expired.
Update settings (Report type only)	To update the report settings, update the embedConfig.settings property of props. Refer to the embedConfig.settings prop in Sample Usage.
PowerBI Bootstrap	To bootstrap your powerbi entity, call the component without accessToken in embedConfig of props. Note: embedConfig of props should atleast contain type of the powerbi artifact being embedded. Eg: "report", "dashboard", "tile", "visual" or "qna". Refer How to bootstrap a report section in Sample Usage.

Props interface:

interface EmbedProps {

	// Configuration for embedding the PowerBI entity
	embedConfig: IEmbedConfiguration | IQnaEmbedConfiguration

	// 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<string, service.IEventHandler<any> | null>

	// CSS class to be set on the embedding container (Optional)
	cssClassName?: string

	// Provide a custom implementation of PowerBI service (Optional)
	service?: service.Service
}

Flow Diagram for the Wrapper Component:

Dependencies

1. powerbi-client

Peer-Dependencies

1. react