Microsoft’s Power BI is a premier data visualization tool. Most of our Fortune 500 customers use Power BI for enhanced reporting and analytics. Power BI Embedded is an Azure Service that enables developers to embed Power BI content (dashboards, reports, tiles, and visuals) into an application.
ReactJS is the most popular frontend framework for building user interfaces (UIs). Within the ReactJS community, there is high demand to easily embed Power BI content. Prior to this solution, users needed to maintain both the ReactJS app and Power BI embedding lifecycles, leading to time-consuming rewriting of code. Driven to adopt and innovate the latest technologies, the Microsoft Power BI Embedded product team partnered with us to create an open source solution.
Solution
We assisted Microsoft’s Power BI Embedded product team to develop an open source wrapper that enables users to easily embed Power BI content into React-based applications. The wrapper consists of a component library called powerbi-client-react, which eliminates the need for writing large amounts of code.The wrapper was implemented in TypeScript and is compiled to JavaScript. You can consume the wrapper from NPM or find the source code on GitHub.
 |
| Figure 1: Solution Design |
Use Cases
• Embed Power BI content into a React-based application
• Reference embedded content
• Apply cascading style sheets (CSS) class style
• Set and reset event handlers
• Set new access token after expiry
• Update embed settings
• Bootstrap Power BI content
• Author Power BI reports
• Phased embedding
To see the wrapper in action, check out the DEMO on GitHub.
Benefits
• Reduces development effort by approximately 20%
• Lightweight: 39 kB (unpacked)
•
Supports embedding of all Power BI content
•
Supports all features of Power BI Embedded
•
Provides smart props that manage the complete embedding lifecycle
•
Wrapper components can be used as independent plug and play components
•
Compatible with Power BI report authoring library, enabling an application to edit the report from the embedded report
At the time of publishing this article, the powerbi-client-react wrapper has 2,216 weekly downloads on NPM, and has 77 “Stars” and 12 “Forks” on GitHub.