Embed Microsoft Power BI Content in SAP UI5 web applications

Most web applications use graphical visualizations of data to provide quick insights for users. There are tons of tools and chart libraries available in that ecosystem. One of the most powerful and feature rich tool is Microsoft Power BI.

In 2019 SAP and Microsoft announced a stronger partnership with the SAP Embrace program (the announcement can be read here). Not just for lifting and shifting workloads to the Microsoft Azure IaaS layer, but also for adding value and enabling innovations combining the rich ecosystems of SAP and Microsoft. In that context it is worth to have a look on how Microsoft Power BI can be integrated in web applications written with SAP’s UI5 framework.

UI5 comes in two flavors: As OpenUI5, which is the Open-Source, free to use version and as SAPUI5, which is licensed with SAP Products like S/4HANA and SAP Cloud Platform. Especially with OpenUI5 the integration of Power BI is of interest, because OpenUI5 does not come with an integrated chart library compared to SAPUI5. So it would be possible to enhance OpenUI5 applications with Microsoft Power BI and run it on non-SAP platforms, like Microsoft Azure. For SAPUI5 applications it is not allowed to run it on non-SAP platforms, but of course there are valid cases to benefit from Microsoft Power BI integrated in SAPUI5 applications running on SAP platforms.

What embedding options exist?

There are the following different options to embed Microsoft Power BI content in web applications, differing on the level of security and the target audience. A pre-condition is, that the reports and dashboards to be integrated in web applications are available in the Microsoft Power BI service.

Publish to Web from Power BI

The option Publish to Web from Power BI is a way to make reports available in a public web site. Via an embed code a report can be integrated using an HTML iframe tag. It needs to be considered, that everyone how has access to the public web site or to the embed code, can access the report without authentication. Additionally this option has some limitations, for instance that no reports using the row level security feature can be published.

Embed Secure

Using the Embed Secure integration option, a Microsoft Power BI report can be integrated to a web site in a secure way, because a user has to sign in to access the content. The access to the content must be granted to user using an Office 365 group and the user must have assigned a Power BI Pro license or the content is in a Power BI Premium capacity (EM or P SKU) workspace stored, to which the user has access. For the integration into a web site, a HTML iframe tag is used. For this integration option some limitations need to be considered, for instance the missing single sign-on capability.

Embed content for your organization

The Embed content for your organization option (aka user owns data approach) is a way to integrate Power BI content into a web application used by your organization in which the users are assigned to a Power BI Premium capacity. The approach has no limitations and allows a fluent integration by an access token obtained from Azure Active Directory. Using the Power BI REST API or the Power BI JavaScript API allows an easy integration to any web application, like these ones implemented with OpenUI5/SAPUI5. Prerequisites to use that option are one Power BI Pro account for deploying the Power BI content into a workspace assigned to a Power BI Premium capacity, a Microsoft Azure subscription and the setup of an own Azure Active Directory tenant.

Embed content for customers

Embed content for customers (aka apps owns data approach) is the option to integrate Power BI content into (secured) web applications, when the application users are not part of own organization. The integration of the Power BI content into web applications works with the Power BI REST API or the Power BI JavaScript API like for the Embed content for your organization approach. Prerequisites for that option are a Power BI Pro account for deploying the Power BI content, a Microsoft Azure Subscription and an own Azure Active Directory tenant. A Power BI Premium capacity with SKU family EM or P or an Azure Power BI Embedded subscription is needed too, to allow users the access to the Power BI content using an access token issued by the Azure Active Directory tenant.

Example of Power BI content embedded into an OpenUI5 application

In the following example a simple OpenUI5 application is constructed using the sap.tnt library. It embeds two Power BI reports created with the Microsoft Power BI Desktop application, which were published to the Microsoft Power BI Service. The embedding is done using the Embed Secure approach, meaning that Power BI content is embedded using a HTML iframe tag via the sap.ui.core.HTML control used in an OpenUI5 XML view. It needs to be considered that for signs like <, > or & the XML notation of the signs needs to be used within the XML view declaration.

<mvc:View controllerName="de.fpf.test.powerbi.controller.PowerBIReport" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <core:HTML
        content='&lt;iframe width="100%" height="100%" src="https://app.powerbi.com/reportEmbed?reportId=3cf7d324-2e4e-454a-abf6-43ce0e1aafc3&amp;autoAuth=true&amp;ctid=044d79d1-306e-473b-888b-54fb76758585&amp;config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly93YWJpLXdlc3QtZXVyb3BlLWQtcHJpbWFyeS1yZWRpcmVjdC5hbmFseXNpcy53aW5kb3dzLm5ldC8ifQ%3D%3D" frameborder="0" allowFullScreen="true"&gt;&lt;/iframe&gt;'></core:HTML>
</mvc:View>

An alternative way would be to write an OpenUI5 custom control which renders the integration part. As the Embed Secure approach was chosen, only users can access the Power BI content in the OpenUI5 application after they signed in.

The first reports shows Gross Sales Demo data imported into Power BI. Because of the imported data Power BI functions like Q&A can be used too.

Simple charts like Bar Charts with Drill-Down options are easy to integrate.

The next image shows the second embedded report which displays Units Sold and Sales grouped by country on a map. The map is fully interactive. For this reported it needs to be mentioned that the data is consumed by a direct query on an analytical model exposed as a Calculation Cube View available on a SAP HANA Database.

Summary

Embedding Microsoft Power BI content into SAP UI5 applications is a powerful, feature rich alternative compared to other tools. The provided embedding options are easy to implement, which allows adding value to web applications in a fast and efficient way.

What embedding option, based on which setup, will be chosen, can depend on the following factors:

• Is secured access required?
• Needs the content to be accessed only by your organization members or by external users too?
• How many users need to access the content (regarding costs)?

For instance, if only a handful users exist, which need to access the Power BI content, it maybe makes sense to work with a Power BI Pro license for each user, instead of setting up Power BI Premium. That example just focus on the cost aspect and ignores other aspects like the volume which can require a premium instance for specific cases.

For sure Microsoft Power BI can play a role in the SAP Embrace area, when it is required to add powerful interactive visualizations to web applications written with SAPUI5 or OpenUI5 (or other UI technologies).