How to Embed a PowerBI Report within a Custom Fiori UI5 app

[amar786]

Hi Folks, 

In this post I'll go over a simple yet powerful requirement: embedding a PowerBI report in a custom SAP UI5 Fiori application. This can be a great way to enrich your Fiori applications with rich, interactive analytics. Utilize this to create a seamless, unified user experience which puts data-driven insights right where decisions are made.

Prerequisites

1. A Power BI report that you are ready to share.
2. Access to the SAP Business Technology Platform (BTP) and the Business Application Studio (BAS).

Step 1: Get the Public Embed Code from Power BI

1. Generate a link for our Power BI report. This is the simplest method for embedding.
2. Follow the steps from the Microsoft knowledge base on how to embed Power BI reports into portals (also see screenshot)
   • 

Step 2: Create a new Fiori app in Business Application Studio

1. Open Business Application Studio and start a new project from template
2. Select “Sap Fiori Generator”
   • 
3. Select “Basic”
   • 
4. Select “None” for Data Source. We don't need to connect to an OData service for this example.
   • 
5. Input a View Name followed by Project Attributes and click “Finish”

Step 3: Add the Code for embedding to your XML view

1. Navigate to your project’s webapp > view folder and open the xml view you created.  
2. Replace the existing code and insert the following code snippet in your home page view xml.
3. Modify the controllerName, and from the content modify the frame title, width, height, src, and frameborder as necessary.

<mvc:View
    controllerName="com.mycompany.powerbiapp.controller.Home"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Page id="page" title="INPUT_A_TITLE_HERE">
        <content>
            <core:HTML
                id="powerBIFrame"
                content='&lt;iframe title="INPUT_A_TITLE_HERE " width="100%"
                height="100%" src=" INSERT_YOUR_POWER_BI_EMBED_URL_HERE "
                frameborder="0" allowFullScreen="true"&gt;&lt;/iframe&gt;'>
            </core:HTML>
        </content>
    </Page>
</mvc:View>

• Notice the < and >
• ^ This is crucial! In XML views, you must escape the < and > characters with their HTML entity equivalents (&lt; and &gt;) to ensure the XML is valid.

(Example from my project)

Step 4: Preview your application

1. Once your project is modified, save your project and preview the application by right clicking on the webapp folder and select “preview application.”
2.  Choose one of the available preview scripts that shows up in the command palette (e.g., start-local).

Your Fiori application will launch in a new browser tab and you should see your PowerBI report embedded within your application

(Example from my project)

I hope you found this guide useful. Feel free to leave your questions and feedback in the comments below.