Thursday, November 12, 2020

Easily Embed Power BI Content into ReactJS Apps with an Open Source Wrapper



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
    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
    Hosted on NPM and open sourced on GitHub under MIT License

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.