Skip to content

View PowerBi Embedded reports in React-Native application via webview

Notifications You must be signed in to change notification settings

nnmer/powerbi-embedded-react-native-demo

Repository files navigation

React-Native PowerBi embedded via webview demo

This is a demo and PoC for embedding PowerBi report into React-Native application via webview.

Adapted from react-native-powerbi package

Pre-requirements:

Setup:

  • PowerBi Pro account, Azure subscription, Azure Active Directory tenant (links)
  • create a new workspace, create a report (can use sample data provided by PowerBi)
  • create a Phone layout via PowerBi
  • get your reportId
  • get your embedUrl (PowerBi->open report->File->Embed)
  • generate an accessToken (see below)

The step by step test reproduce

  • create a new AAD
  • switch to newly created AAD:
    • add a user admin@ (keep your initial password, later you will be asked to change it)
      • open admin@ details
      • goto Directory role -> set as Global administrator
    • goto App Registrations
      • click + New registration
      • goto App's Api permissions-> add Power Bi Service -> Delegated permissions -> Set permissions: - Capacity read & read/write all - Content create - Dashboard read & read/write all - Dataset read & read/write all - Group read & read/write all - Report read & read/write all - Workspace read & read/write all
      • at App's overview copy AppId
      • go to App's Authentication. Default client Type -> Treat app as a public client -> set to "Yes"
  • goto app.powerbi.com login with admin@.... user (with inital password, you will be asked to make a new password)
    • click add new workspace, choose Try Pro for free
    • create a new workspace
    • at the welcome page to the workspace click "Samples" link, select any dataset
    • at workspace left menu switch to the available report
    • copy workspaceId, reportId
    • at report area click File->Embed and cope the embedUrl
    • at report area click Edit report -> Mobile layout, make the mobile layout, switch back to Web layout, Save report
  • put all prepared IDs into config.json and powerbi_config.json
  • run token generator
  • set the token into config.json
  • run the App (run-android|run-ios)

Run in dev environment

npm install

update ./powerbi_config.json with proper values for

"accessToken": "",
"embedUrl": "",
"reportId": ""

run it (have your android emulator running)

../node_modules/.bin/react-native run-android

for iOS have your iOS emulator running and run

../node_modules/.bin/react-native run-ios

Token generation

The code at tokenGen folder is taken from this repo with slight changes in order to use in this demo

set proper variables into ./tokenGen/config.json file:

"appId" : "",
"workspaceId" : "",
"reportId" : "",
"username" : "",
"password" : ""
  • appId (link)
  • workspaceId (link)
  • reportId (link)
  • username and password to your Power BI master account
cd ./tokenGen
npm intall
node run.js

Usage

<PowerBIEmbed
  accessToken="H4sIAAAAAAAEACVW...NH8v_8HNiWyTi4LAAA="
  embedUrl="https://app.powerbi.com/reportEmbed?reportId=bac25fa7-XXXX-XXXX-XXXX-606d165c3b43&groupId=be8908da-XXXX-XXXX-XXXX-163f52476cdd"
  id="bac25fa7-XXXX-XXXX-XXXX-606d165c3b43"
/>

Language

You can also pass the language the report must use

<PowerBIEmbed
  accessToken="H4sIAAAAAAAEACVW...NH8v_8HNiWyTi4LAAA="
  embedUrl="https://app.powerbi.com/reportEmbed?reportId=bac25fa7-XXXX-XXXX-XXXX-606d165c3b43&groupId=be8908da-XXXX-XXXX-XXXX-163f52476cdd"
  id="bac25fa7-XXXX-XXXX-XXXX-606d165c3b43"
  language="en"
/>

Embed configuration

You can pass your own configuration object from the PowerBI JS library

const embedConfig = {
      type: 'report',
      tokenType: 1,
      accessToken: "H4sIAAAAAAAEACVW...NH8v_8HNiWyTi4LAAA=",
      embedUrl: "https://app.powerbi.com/reportEmbed?reportId=bac25fa7-XXXX-XXXX-XXXX-606d165c3b43&groupId=be8908da-XXXX-XXXX-XXXX-163f52476cdd",
      id: "bac25fa7-XXXX-XXXX-XXXX-606d165c3b43",
      settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: true,
      },
    }

    <PowerBIEmbed
      embedConfiguration={embedConfig}
    />

Resources

  • Azure PowerBi embedded official docs
  • For more details as to PowerBi JS SDK see here
  • JavaScript Embed Sample (Playground) here

About

View PowerBi Embedded reports in React-Native application via webview

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published