Presentation giving at the Power BI World Tour 2017 in Toronto, Canada at October 4, 2017.

1. Welcome!
Power BI User Group (PUG)
Toronto

2. Extending Power BI With
Your Own Custom Visual
Jan Pieter Posthuma
DataScenarios

3. Welcome to Extending Power BI With Your
Own Custom Visual
• In this session we will look at the process of developing Custom
Visuals for Power BI.

4. Session Agenda
• Introduction
• Developing
• Technical Demos
Presentation: http://bit.ly/pbiworldtour
Demos: http://bit.ly/pbiworldtour-demo

5. Who am I?
• Jan Pieter Posthuma – Microsoft Data Consultant
• DataScenarios – Data Consultancy Company
• Architect roles at multiple projects
• Creator of Power BI Custom Visuals
• HierarchySlicer [∞]
• Box and Whisker chart [∞]
• Contact
• mail@datascenarios.nl
• https://twitter.com/jppp
• https://linkedin.com/in/jpposthuma
• https://github.com/liprec

7. Develop custom visuals
quickly with Microsoft’s
open-sourced,
production-quality
visualization code
Present data in the way that makes
best sense to your users
Leverage the visualization
framework, test suite and tooling
to build the right
custom visuals for your app
Gallery: store.office.com

8. Custom Visuals Platform

9. History
• Since beginning of the new Power BI (Summer 2015)
• Beginning 2016: visuals are running in a ‘sandbox’ environment
• August 2016: new Power BI API available, current version: v.1.7.0
• March 2017: Migration to Office Store: Version API required
• July 2017: Integration with Office Store and Certified visuals
• Next: https://github.com/Microsoft/PowerBI-
visuals/blob/master/Roadmap/README.md

11. Tools needed
• NodeJS 4.0+ Required (5.0 recommended)
• https://nodejs.org/
• PowerBI-Visuals-Tools
• npm install -g powerbi-visuals-tools
• SSL and Debug visual: https://github.com/Microsoft/PowerBI-
visuals/blob/master/tools/README.md
• Visual Studio Code
• https://code.visualstudio.com/download
• PBIViz CLI addin:
https://marketplace.visualstudio.com/items?itemName=liprec.vscode-start-pbiviz
• Enable ‘Developer Visual’ in Power BI Admin portal

12. Power BI Custom Visual API
IVisual module
methods
(init, update, …)
enumerateObjectInstances
dataView
Formatting
pane
Power BI Custom
Visual
capabilities.jsonvisual.ts
Interaction via code
Report canvas

13. Folder structure
> pbiviz new <visualname>
.api
.vscode
assets
src
style
capabilitises.json
pbiviz.json
tsconfig.json
API schemas
Visual Studio
Code settings
Icons /
screenshot
Capabilities definition – dataview
binding, formatting pane
Power BI Visual definition, like
name, author, externalJS files,
TypeScript config file
list of .ts files needed (incl. typing)
Source files – must included in
tsconfig.json
Style file – included in pbiviz.json.
Less supported

16. Creation Coding Testing Packaging Submission
Custom Visual SDK
PowerBI.com
Office Seller
Dashboard
Custom visual development lifecycle

17. Publish to the gallery
• Extension of your audience
• More (test) scenario’s
• ‘Monkey testing’
• More browsers
• Support
• Power BI is a moving target!
• Not all things can be tested (agile)
• All types of users
• 80%-20% rules apply for
• Development
• Testing
• Patience

18. Resources
• Power BI Custom Visuals documentation
https://github.com/Microsoft/PowerBI-visuals
• Power BI CLI tools
https://github.com/Microsoft/PowerBI-visuals-tools
• Power BI Core Visuals (old visuals, but good for reference)
https://github.com/Microsoft/PowerBI-visuals-core
• Visual Studio Code
https://code.visualstudio.com/download
• PBIViz addin
https://marketplace.visualstudio.com/items?itemName=liprec.vscode-start-pbiviz
• Certification Requirements
https://powerbi.microsoft.com/en-us/documentation/powerbi-custom-visuals-
certified/

19. Start coding
• Clone or download
https://github.com/Microsoft/PowerBI-visuals-sampleBarChart
npm update
pbiviz start
• Open a report, upload some data
In www.powerbi.com, go to Get Data
Open a report once you’re done.
Edit the report
Click the developer visual
Bind some data
• Press F12 to debug
Use the browser debugger to see what’s happening
Hint: add debugger; to the constructor (makes debugging easier)

20. Thank you for Attending!
Don’t forget to join your local PUG to
enjoy year-round networking and
learning.
www.pbiusergroup.com/Toronto