Provider Hosted App to display Power BI reports in SharePoint Online

power bi sharepoint online provider hosted apps
InfoPath alternatives for form designing SharePoint

I have already discussed in my previous post to display report in SharePoint Online using iframe approach.
As mentioned in the previous post security is the big concern as report will be published to internet.

– Provider hosted MVC app will be created and hosted in Azure Website.
– Register a client app with Power BI App Registration Tool
– Request Token will be generated run-time with help of client ID of your AAD application
– Power BI api will be used to display the report in iframe provided by dashboard id, and report id.

Also read: Display Power BI Report in SharePoint Online

So let’s talk in details.

1. Power BI report needs to be uploaded on the Power BI Portal.

2. We have to create provider hosted app to display the report. I have already posted an article for creating provider hosted app and hosting to Azure.

3. Follow the below URL to register the App.
https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-register-a-client-app/

Copy your provider hosted app SSL URL from visual studio project settings and the same needs to be registered in Azure AD power BI application settings.

Once you register the application in AD it will generate client id which will be used in provider hosted app to create request token.

Open index.cshtml file from your MVC provider hosted app.

power bi sharepoint online provider hosted apps
power bi sharepoint online provider hosted apps

Place the below code and make sure you update client id (generated from Azure AD application registration), report id, tile id, reply url parameter in the code.

I have used updateEmbedTile function to display the tile of your PowerBI dashboard and updateEmbedReport function to display PowerBI report.

Publish and package your app for further to use in SharePoint Online site.

Add the webpart to SharePoint page where you want to display the report.

@{
ViewBag.Title = “Home Page”;
}

<div class=”BIReports”>
<div style=”float:left; width:60%;”>
<h3>Report With Drill Down </h3>
<iframe id=”iFrameEmbedTile3″ src=”” height=”700px” width=”600px” frameborder=”0″ seamless></iframe>
</div>
<div style=”float:left; width:40%;”>
<h3>Dashborad with Tile </h3>
<iframe id=”iFrameEmbedTile1″ src=”” height=”500px” width=”450px” frameborder=”0″ seamless style=”float:right”></iframe>
</div>
@*<table>
<tr>
<td colspan=”2″>

</td>
</tr>
<tr>

<td><iframe id=”iFrameEmbedTile1″ src=”” height=”300px” width=”300px” frameborder=”0″ seamless></iframe></td>
<!– Nombre total de likes–>
<td><iframe id=”iFrameEmbedTile2″ src=”” height=”300px” width=”300px” frameborder=”0″ seamless></iframe></td>
</tr>
</table>*@
</div>
<script type=”text/javascript” src=”/Scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript”>

var token = null;

$(document).ready(function () {

if (urlParameterExtraction.queryStringParameters[‘access_token’] == null) { requestToken(); }
// Extract token from urlParameterExtraction object.
token = urlParameterExtraction.queryStringParameters[‘access_token’];

updateEmbedTile(“iFrameEmbedTile1”, “https://app.powerbi.com/embed?dashboardId=<provide dashboardId>”, 500, 450);

updateEmbedReport(“iFrameEmbedTile3”, “https://app.powerbi.com/reportEmbed?reportId=<provide reportId>”, 700, 600);
});

function updateEmbedTile(iFrameId, embedTileUrl, h, w) {
console.log(“updateEmbedTile”);
if (“” === embedTileUrl)
return;
iframe = document.getElementById(iFrameId);
iframe.src = embedTileUrl + “&width=” + w + “&height=” + h;
iframe.onload = function () { postActionLoadTile(iFrameId, h, w); }
}
function postActionLoadTile(iFrameId, h, w) {

accessToken = token;
if (“” === accessToken)
return;
var m = { action: “loadTile”, accessToken: accessToken, height: h, width: w };
message = JSON.stringify(m);
iframe = document.getElementById(iFrameId);
iframe.contentWindow.postMessage(message, “*”);;
}

function updateEmbedReport(iFrameId, embedReportUrl) {

if (“” === embedReportUrl)
return;

var iframe = document.getElementById(iFrameId);
iframe.src = embedReportUrl;
iframe.onload = function () { postActionLoadReport(iFrameId); }
}
function postActionLoadReport(iFrameId) {
console.log(“postActionLoadReport”);
accessToken = token;

if (“” === accessToken)
return;
var m = { action: “loadReport”, accessToken: accessToken };
message = JSON.stringify(m);
iframe = document.getElementById(iFrameId);
iframe.contentWindow.postMessage(message, “*”);
}

function requestToken() {
var clientId = ‘********-****-****-****-************’;
var replyUrl = ‘https://abc.azurewebsites.net’;
var resource = “https://analysis.windows.net/powerbi/api”;
var authServer = ‘https://login.windows.net/common/oauth2/authorize?’;
var responseType = ‘token’;

var url = authServer +
“response_type=” + encodeURI(responseType) + “&” +
“client_id=” + encodeURI(clientId) + “&” +
“resource=” + encodeURI(resource) + “&” +
“redirect_uri=” + encodeURI(replyUrl);

window.location = url;
}

var urlParameterExtraction = new (function () {
function splitQueryString(queryStringFormattedString) {
var split = queryStringFormattedString.split(‘&’);
if (split == “”) {
return {};
}

var results = {};
for (var i = 0; i < split.length; ++i) {
var p = split[i].split(‘=’, 2);
if (p.length == 1)
results[p[0]] = “”;
else
results[p[0]] = decodeURIComponent(p[1].replace(/\+/g, ” “));
}

return results;
}
this.queryStringParameters = splitQueryString(window.location.hash.substr(1));
})();
</script>

Similar SharePoint 2013 Tutorials


About Sambita Rath

I have 9 years of exprience into SharePoint implementation, architecture, Administrator, development and Training.Designing Information Architecture in SharePoint 2007, 2010,2013 and Office 365.

View all posts by Sambita Rath →

Leave a Reply