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