Embed Secure Power BI report using Python Web Application with Flask in Visual Studio 2015
In this article, we will embed a Power BI report in a python web application with flask in visual studio 2015. Following are the steps to embed a report.
STEPS:
- Create a new Python Web Project by selecting “Web Project” under Python in Visual Studio
2. If you can’t see this option then first you have to install Python tools for visual studio 2015
2.1 Run the Visual Studio installer through Control Panel > Programs and Features, selecting Microsoft Visual Studio 2015 and then Change.
2.2 In the installer, select Modify
2.3 Select Programming Languages > Python Tools for Visual Studio and then Next:
2.4 Once Visual Studio setup is complete, install a Python interpreter of your choice. Visual Studio 2015 supports only Python 3.5 and earlier; later versions generate a message like Unsupported Python version 3.6
3. Next step to create a Python Virtual Environment. (This is not mandatory but it is advisable to create a virtual environment to avoid changes to global python installation. )
4. Expand the project in Solution explorer and right click “Python Environments” and select “Add Virtual Environment”. Accept the default environment name “env” and create the python virtual environment. On successful creation of Virtual Environment, Visual studio would automatically point to newly created Virtual Environment instead of Global Python environment
5. Right click “env” (the name of virtual environment) and select “Install Python Package”
Provide the name of the Package as “Flask” and leave the installation mode to “pip”. The alternate installation mode is “easy_install”. Wait for the installation to complete and you can view “Flask” and its dependent packages in the Solution Explorer on successful installation
- Now the environment is all set and the next step is to create the actual web application
- Add an empty Python file named “OpenPowerBIReport.py” (Solution Explorer => Add => New Item) and set it as start-up file (Right click index.py and select “Set as Start up File” in context menu)
- Add the below code to OpenPowerBIReport.py . The below code snippet is creates a variable by name “data” and passes its value to “index.html” when the user lands at “root” location (“/”) of the website
- Add two folders named “Templates” and “Static” to the project. These are the folders Flask would be looking for html files (Templates) and other assets (Static)
from flask import Flask,render_template
from os import environ
app = Flask(__name__)
@app.route(‘/’)
def index():
weburl=”https://app.powerbi.com/reportEmbed?reportId=df8a34c9-b173-4449-b7e3-2cd29208cd33&autoAuth=true&ctid=26c4b2e4-ec07-4c7b-92e5-97f52865e98b&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly93YWJpLXNvdXRoLWVhc3QtYXNpYS1yZWRpcmVjdC5hbmFseXNpcy53aW5kb3dzLm5ldCJ9”
return render_template(‘PowerBIReport.html’,weburl=weburl)
if __name__ == ‘__main__’:
HOST = environ.get(‘SERVER_HOST’, ‘localhost’)
try:
PORT = int(environ.get(‘SERVER_PORT’, ‘5555’))
except ValueError:
PORT = 5555
app.run(HOST, PORT,debug=True)
- Add a new html file named “PowerBIReport.html” inside the templates folder and copy paste the below html snippet to that file
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title>Home Page</title>
<link href=”/static/styles.css” rel=”stylesheet” />
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body bgcolor=”#E6E6FA”>
<div>
<h1>Embed Power BI report in Python web apps !!</h1>
<a href=”https://app.powerbi.com/reportEmbed?reportId=df8a34c9-b173-4449-b7e3-2cd29208cd33&autoAuth=true&ctid=26c4b2e4-ec07-4c7b-92e5-97f52865e98b&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly93YWJpLXNvdXRoLWVhc3QtYXNpYS1yZWRpcmVjdC5hbmFseXNpcy53aW5kb3dzLm5ldCJ9” class=”button” target=”_blank”>Go to Power BI Report In New Tab</a>
<button onclick=”location.href = ‘https://app.powerbi.com/reportEmbed?reportId=df8a34c9-b173-4449-b7e3-2cd29208cd33&autoAuth=true&ctid=26c4b2e4-ec07-4c7b-92e5-97f52865e98b&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly93YWJpLXNvdXRoLWVhc3QtYXNpYS1yZWRpcmVjdC5hbmFseXNpcy53aW5kb3dzLm5ldCJ9‘” type=”button” class=”button”>
Open Power BI Report
</button>
</div>
<div>
<iframe width=”680″ height=”510″
src=”{{ weburl }}”
frameborder=”0″ allowFullScreen=”true”></iframe>
</div>
</body>
</html>
- Add a new file named “style.css” to the static folder and the below css snippet to the file. This file is explicitly added to the project to show where to place static assets instead of adding inline css in html.
.info { margin:auto; text-align:center; padding-top:20% }12. Solution Explorer would look like the below picture after adding html and css
12. The new Embed option is available on the File menu for reports in the Power BI service.
Select the Embed option to open a dialog that provides a link and an HTML snippet that can be used to embed the report securely. You’ll need to use your portal’s embed feature or edit the web page’s HTML to add the report. 
13.That’s it. Hit F5 and now you can expect a website running similar to the one shown below.
