New Plugin: Power BI Embedding

Announcement

Power BI Reports are finally here! Sponsored by Anisoptera.io and developed by Genstate.com, the Power BI Embedded plugin allows Bubble.io developers to embed Power BI reports into their applications. This plugin is intended for applications to host their Power BI reports through a Bubble interface.

The plugin is a faithful thin wrapper around the Power BI REST API and the Power BI JavaScript Client; implementing Microsoft’s development guidelines and recommended best practices for securely embedding Power BI components in web applications. For security, the plugin supports the App Owns Data Azure AD Service Principal authentication use case, and optional inclusion of Row Level Security Identities in token generation.

The Power BI Report element is designed to support both immediate embedding through the Embed action, and phased loading through the combination of Load and Render actions, with the Loaded and Rendered events. Phased loading is particularly useful when you need to filter the data before it is displayed.

  • Plugin Page Here.
  • Demonstration Editor Here.
  • Demonstration Runtime Here.

Road Map

The plugin contains a sufficiently rich set of features to get an enterprise application in Bubble launched. As our user base grows we will be looking to extend this plugin along three different lines:

  1. A richer set of plugin elements to support all the types of visualization embeddings available from Power BI, such as authoring, dashboards, etc…
  2. Deeper REST API integration to be able to list and query reports, workspaces, datatsets, etc…
  3. More flexible configuration and workflow integration of element actions, states, properties, and events.

Instructions

  1. In the Plugins tab, add the plugin to your application.
  2. In the Power BI plugin, enter the keys in the environment variables.
  3. In the Design tab, add the Power BI Report element to your page.
  4. In the Workflow tab, add the element’s Initialized event.
  5. In the event, add the Get Report server-side action passing a Report Identifier. IMPORTANT: Remember to save the Dataset Identifier in a local custom state for use in later token requests.
  6. In the event, add the Get Token server-side action, passing the Report Identifier and the Dataset Identifier.
  7. In the event, add the element’s Embed action passing the Embed URL, Token, Report Identifier, Dataset Identifier, and calculated token renewal time.
  8. In the Workflow tab, add the element’s Expiring event.
  9. In the event, add the Get Token server-side action, passing the Report Identifier and the Dataset Identifier.
  10. In the event, add the element’s Update Token action passing the new Token and the calculated renewal time.

Plugin Keys

  • Azure Tenant - Unique identifier of the Azure account tenant.
  • Azure Client - Unique identifier of the Azure client or application within the account tenant.
  • Azure Secret - confidential and private secret of the specific client or application
  • Azure Authority - URL of the authority providing credentialing services. IMPORTANT: Trim any trailing backslashes.
  • Azure Scopes - A comma delimited list of URLs that are within the scope of granted privileges. IMPORTANT: Trim any trailing backslashes.
  • Power BI Endpoint - Base URL of the Power BI API endpoint for constructing REST requests. IMPORTANT: Trim any trailing backslashes.

Element Actions

  • Embed - Single step display of a PowerBI report; the same as calling Load, then Render.
  • Load - First step in phased display of a Power BI report, loads the provided URL to the page without displaying.
  • Reset - Full reset of the entire element; as if the element has just been created.
  • Refresh - Refreshes data sources for the report.
  • Reload - Reloads embedded report using existing configuration. E.g. For reports this effectively clears all filters and makes the first page active which simulates resetting a report back to loaded state.
  • Remove Filters - Removes all filters at the report level.
  • Render - Render a preloaded report, using phased embedding API.
  • Reset Filters - Reset user’s filters, slicers, and other data view changes to the default state of the report.
  • Update Token - Set the accessToken.
  • Add Text Filter - Update the filters at the report level according to the operation: Add only.
  • Add Number Filter - Update the filters at the report level according to the operation: Add only.
  • Add Boolean Filter - Update the filters at the report level according to the operation: Add only.

Element Events

  • Initialized- Element initialization was run. Use embed or load and render to activate.
  • Loaded - The loaded event is raised when the report initializes. Loading is complete when the Power BI logo disappears.
  • Rendered - The rendered event is raised when a report is fully rendered. For example, if all visuals are rendered upon loading a report or after a user interaction.
  • Error - An error event is emitted to describe a failed operation.
  • Expiring - The access token will expire.
  • Hyperlink Click - The dataHyperlinkClicked event is raised when a hyperlink is clicked, and the hyperlink’s behavior is set to NavigateAndRaiseEvent or RaiseEvent.
  • Reset - Element was reset. Use embed or load and render to activate.

Element States

  • Initialized - Element initialization was run.
  • Error Message - A general message that describes the operation that failed (example: “Could not set page”).
  • Error Description - Detailed message that describes the error.
  • Error Code - Short message that describes the error.
  • Error Identifier - Id for debugging - should be provided when reporting a bug.
  • Hyperlink Destination - URL destination of the clicked hyperlink.

Server-Side Actions

  • Get Report - Calls the Get Report REST API endpoint. Requires a report identifier and optionally a workspace identifier. Returns the report web URL and embedding URL along with the dataset identifier.
  • Get Token - Calls the Generate Token REST API endpoint. Requires a report identifier and a dataset identifier, optionally supports a workspace identifier and a token lifetime in minutes. Returns the token and the time of expiration.

Hints

  • Calculate the token renewal time in seconds using expiration - current time: formatted as seconds - 300. Microsoft recommends renewing tokens 5 (300 s) to 10 (600 s) minutes before expiry.
  • To wrap a single string in a list use the Split by operator and specify a delimiter that is NOT found in the string.
  • All the usual provisos apply for handling responses from third party services. The Bubble developer needs to consider cases where either Azure or Power BI servers return invalid or unusable responses, particularly when requesting Tokens and secure report URLs.

Notes

  • Only App Owns Data Azure AD Service Principal authentication is supported.
  • Only Report embedding is supported.
  • Master and Mobile layout are supported. However, Mobile layout is currently still being tested.
  • Only Basic table-column value filtering is supported.
  • Only the default save dialog is supported.
  • Only view mode is supported. Report editing and creation is not supported.
  • For best responsive display we recommend resizing the report with the display by NOT enabling fit to content.
7 Likes

Hi Aron
That is great news, do you have any samples, I would like to test it in my environment. Let me know if you want to do a collaboration join test ?

I have my own test page. But I can’t share the credentials to Power BI for the embedded report.

You will have to spin up your own developer access to Power BI, and check to make sure that it comes with embedding privileges and works with Service Principal authority. Even with the plugin, it really helps to do a run through the sample code in Azure to understand what the plugin needs from Azure.

Hi Aron
Thanks for replying, can we setup a meeting to go over the process ?

Sure. I’ll have to charge for that. I don’t own the plugin and I’m not earning any revenue from it.

no problem just send me your contact info

@aaronsheldon I just purchased your plugin, and I’ve very excited about it, but I’m currently having issues setting up the “GET” report event on the powerbi report initialization. I’m getting:
“Plugin action Power BI Get Report error:
SyntaxError: Unexpected end of JSON input
at JSON.parse ()”

Any guidance would be appreciated.

That happens when Azure rejects your authentication. The Power BI API sends back an empty string in that case. I can look into handling those rejections more gracefully. Nonetheless, double check you authentication credentials.

The demo still looks like it is working correctly: https://littlelambdas.com/powerbi

Thank you very much, I was down the wrong rabbit hole haha.

Hi Aaron,

Do we need also to have a Power BI Embedded license in order to use this pluggin ?
thank you for your help !

Hi Luisarmen100.

Did you need to have a Power BI Embedded License in order to use the pluggin ?

Yes. The plugin does not provide PowerBI or Azure licences or credentials. The plugin is completely pass through. This is to protect your security and privacy.

Hi Aaron, I’m just beginning to look into BI for my bubble app, can you help me to understand the high-level workflow to implement reports? If I understand correctly, I need to implement the reports in Power BI and then use your plugin to display them, but I’m unclear on how the reports will access data from my bubble database.

Thanks,
Chris

@aaronsheldon The demo doesn’t seem to be working?

If you’re interested in talking about this, feel free to reach out. Our group has recently built a large data warehouse using Bubble’s database to feed reports. We are then embedding them in our app using this plugin.

We’ve solved all the challenges around the Bubble API only returning 100 records at a time, automatic hourly PBI refresh using said API, and so on.

The demo report does not load, but the editor version has a lot of key info especially on the workflow side if you are needing help to set it up.