Have lots of data? Need a dashboard powered by Microsoft Azure? Love Javascript? Learn how to use Javascript to integrate data-rich user experiences in PowerBI with your existing web applications. Featured for Boise Code Camp 2017.

1. POWER BI SINGLE
PAGE
APPLICATIONS

2. ELEMENTS OF POWERFUL DATA
VISUALIZATION
• Power BI: Data Visualization & Big Data Queries
• Javascript: Universal Language for the Web
• Single Page Application: No server state
+

3. WHY POWER BI?
Alternative Approach Libraries Consequence
Code it Yourself D3 (Data Driven Document) Hard for anyone that’s not a
developer build reports and
dashboards
License Commercial Libraries DevExpress, Telerik, etc.. Limited drag& drop design, cannot
query millions of records quickly
Tableau, other.. Real costs aren’t known upfront, no
right integration with Azure
“Power BI is a modern business intelligence solution that brings data
and analytics to more people than ever before, across all roles and
disciplines within organizations…that is ‘five seconds to sign up and
five minutes to wow’” (https://powerbi.microsoft.com/en-us/blog/microsoft-power-bi-receives-esri-
new-technology-integration-award-for-2017/)
… you can visualize millions of records quickly!

4. POWER BI ORIGINS

5. CODE A DASHBOARD USING AN OPEN SOURCE LIBRARY
(D3) OR COMMERCIAL LIBRARY (DEVEXPRESS)

6. BUILT-IN POWER BI WIDGETS

7. HOW DOES POWER BI WORK?
2 Design in Power BI Desktop1 Get Data
Offline: CSV flat file, cached query or
direct query to sql
3 Upload to Azure
4 Host in Your Own
Web App
Using Embedded or Rest Api
(There is a difference)

8. POWER BI DESKTOP
• Excel-like data query
• Drag and drop UI
Free Download: https://powerbi.microsoft.com/en-us/desktop/

9. POWER BI FLAVORS

10. UPLOAD POWER BI REPORTS TO
AZURE
• Add Power BI Embedded Resource in
Portal.Azure.com
• Create a Workspace Collection & Workspace
– You can only create workspace from API
• Upload .PBIX to Workspace (Using Rest API
calls or .Net library)

11. UPLOADING REPORTS
PM> Install-Package Microsoft.PowerBI.Api
//Instantiate PowerBI Client
//Create a Workspace (if one doesn’t exist)
//Upload .PBIX
Microsoft.PowerBI.Api.V1.PowerBIClient Client = new PowerBIClient(
new TokenCredentials(apiAccessKey, "AppKey"))
{BaseUri = new Uri("https://api.powerbi.com")};
await Client.Workspaces.PostWorkspaceAsync(WorkspaceCollectionName);
await Client.Imports.PostImportWithFileAsync(WorkspaceCollectionName,
WorkspaceId, fileStream, datasetName);
/*See https://github.com/Microsoft/PowerBI-
JavaScript/wiki/Understanding-the-Embed-Process for the embed
process*/

12. POWER BI EMBEDDED ON YOUR
WEBSITE
//Install power bi client
npm install powerbi-client
//Reference power bi client library (in view)
@Scripts.Render("~/Libs/powerbi.min.js")
//Make API Call to fetch embed token (see next slide)
//Instantiate report in JS
window.powerbi.embed(…)

13. PM> Install-Package Microsoft.PowerBI.Api
//In .Net Web API Controller
using Microsoft.PowerBI.Security;
var embedToken = PowerBIToken.CreateReportEmbedToken(
ReportCollectionName,
ReportWorkspaceInternalId,
ReportReportGuid,
expiration,
username,
roles).Generate(AzureApiAccessKey);
GENERATE EMBED TOKEN

14. //In Javascript (ReactJS):
const report = window.powerbi.embed(this.refs.ReportContainer, {
type: 'report',
accessToken: embedToken,
id: reportId,
embedUrl: settings.powerBIEndpoint,
pageName: defaultPage,
settings: {
filterPaneEnabled: this.props.showFilters,
navContentPaneEnabled: this.props.showPageNavigation
}
});
report.on('dataSelected', this.onReportDataSelected)
.on('filtersApplied', this.onReportFiltersApplied)
.on("loaded", this.onReportLoaded)
.on("error", this.onReportError)
.on("pageChanged", this.onReportPageChanged);

15. POWER BI EMBEDDED IN YOUR APP
http://powerbiembeddedreactjstypescriptspa.azurewebsites.net/
My
Javascript
App
PowerBI
Embedded
IFrame

16. INTERACT WITH YOUR REPORT IN
YOUR EXISTING APP
• Listen for events
• Get/set/clear filters
• Navigate Pages
See https://github.com/Microsoft/PowerBI-JavaScript/wiki/Understanding-the-object-
hierarchy for object model

17. GOTCHAS
• Licensing Costs: Signing up users for power bi rest api to build their own dashboards
may require a office 365 license.
• Caching: reports are caches. If you want to refresh data, you may need to build your
own services to re-publish the report on an interval.
• No on-premise solution at the moment (requires Azure)

18. NEXT STEPS
1. Getting Started with Power BI Pluralsight Course – Mostly
about configuring data model and using Power BI Desktop
2. Power BI .Net Rest API on GitHub
3. Power BI Javascript Library on GitHub
4. Get started with Power BI Embedded Microsoft Tutorial
5. Power BI Single Page Application Live Demo Site
6. PASS Hands on Workshop