Presentation given for the at SQLBits 2018 in Londen (February 24th, 2018) about developing Power BI Custom Visuals.

1. Extending Power BI With
Your Own Custom Visual
Saturday, 24-Feb-2018 14:30 – 7. Daniels
Jan Pieter Posthuma
© Feb '18 – DataScenarios

2. • 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 [∞]
• D3js Visual [∞]
• Contact
• mail@datascenarios.nl
• https://twitter.com/jppp
• https://linkedin.com/in/jpposthuma
• https://github.com/liprec
Who am I?
© Feb '18 – DataScenarios 2

3. • Introduction
• Developing
• Technical Demos
• AppSource Listing
• D3js Visual
3© Feb '18 – DataScenarios
Agenda

4. Introduction
© Feb '18 – DataScenarios

5. 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
© Feb '18 – DataScenarios 5

6. Custom Visuals Platform
© Feb '18 – DataScenarios 6

7. Distribute through AppSource
© Feb '18 – DataScenarios
Greater reach to business users
Usage tracking
Publishing requires Office
Developer account
https://appsource.microsoft.com
7

8. • 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.10.0
• March 2017: Migration to Office Store: Version API required
• July 2017: Integration with Office Store and Certified visuals
• Sept 2017: Office Store is moved to Microsoft AppSource
• Feb 2018: Introduction of the Company Store
© Feb '18 – DataScenarios
History
8

9. Developing
© Feb '18 – DataScenarios

10. • 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
Tools needed
© Feb '18 – DataScenarios 10

11. Power BI Custom Visual API
11© Feb '18 – DataScenarios
IVisual module
methods
(init, update, …)
enumerateObjectInstances
dataView
Formatting
pane
Power BI Custom
Visual
capabilities.jsonvisual.ts
Interaction via code
Report
canvas
Sandbox

12. Technical Demos
© Feb '18 – DataScenarios

13. > pbiviz new <visualname>
.api
.vscode
assets
src
style
capabilitises.json
pbiviz.json
tsconfig.json
Folder structure
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
© Feb '18 – DataScenarios 13

14. • First class citizens (Power BI is using them also):
• D3js.org – Graphical library for ‘Data-Driven Documents’.
• Lodash – Library to take the hassle out of working with arrays, objects,
strings, numbers, etc.
• jQuery – Library to make HTML document traversal and manipulation,
event handling easier
• Helper classes to support common UI operations, e.g.:
• powerbi-visuals-utils-formattingutils – valueFormatting,
TextProperties, …
• powerbi-visuals-utils-dataviewutils – getObject,
DataViewObjectsParser,
© Feb '18 – DataScenarios
External Libraries

15. Appsource listing
© Feb '18 – DataScenarios

16. Creation Coding Testing Packaging Submission
Custom Visual SDK
PowerBI.com
Office Seller
Dashboard
Custom visual development lifecycle
© Feb '18 – DataScenarios 16

17. • Submit pbiviz file, return manifest file for AppSource listing
• Only free visuals supported (at this time)
• Manual process, general 2-3 business days (US)
• Tested against:
• Chrome, Firefox, Edge and Internet Explorer 11
• Power BI Desktop (Chromium)
• Tested to provide expected behavior:
• Everything should work
• No errors/exceptions
• After approval support:
• Power BI is a moving target!
17© Jan '18 – DataScenarios
Custom Visual approval

18. • Visual advantages:
• Exported to PowerPoint
• Embedded in emails
• Requirements:
• Microsoft AppSource approved
• Custom visual is written with Versioned API 1.2 or higher
• Code repository available for review (e.g., Visual Code available to us
through GitHub)
• Uses only public reviewable OSS components
• Does not access external services or resources
https://docs.microsoft.com/en-us/power-bi/power-bi-custom-visuals-certified
18© Jan '18 – DataScenarios
Custom Visual certification

19. D3js Visual
© Feb '18 – DataScenarios

20. • Reason
Source: https://fd.nl/economie-
politiek/1218875/de-puzzelstukken-
van-de-miljoenennota
© Feb '18 – DataScenarios
D3js.org Visual

21. • ‘Lift and Shift’ migration of D3js visuals to Power BI
• Skeleton visual with D3js libraries included
• SVG element:
• <svg xmlns="http://www.w3.org/2000/svg" class="chart" id="chart">
• pbi object:
• dsv([accessor,] callback) – function that retrieves the data via the
provided callback: pbi.dsv(callback)
Optional accessor function may be added.
• Height – height of the sandbox frame
• Width – width of the sandbox frame
• Colors – color array with 8 colors; changable via options
• More info: https://azurebi.jppp.org/power-bi-d3js-visual/
21© Feb '18 – DataScenarios
D3js.org Visual

22. We love to get feedback
Please complete the session feedback
forms
Just like Jimi Hendrix …

23. Please visit Community Corner, we are trying this year to get more
people to learn about the SQL Community, equally if you would be
happy to visit the community corner we’d really appreciate it.
SQLBits - It's all about the community...

24. References
© Feb '18 – DataScenarios

25. • 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/
Resources
© Feb '18 – DataScenarios 25

26. • 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)
Start coding
© Feb '18 – DataScenarios 26