Presentation given for the at the Power BI Gebruikersdag 2018 in Utrecht, NL (March 24th, 2018) about developing Power BI Custom Visuals.

1. Gebruikersdag 2018

2. © Feb '18 – DataScenarios
• 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?
2

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

4. © Feb '18 – DataScenarios
Introduction

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

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

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

8. © Feb '18 – DataScenarios
• 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
History
8

9. © Feb '18 – DataScenarios
Developing

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

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

12. © Feb '18 – DataScenarios
Technical Demos

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

14. © Feb '18 – DataScenarios
• 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,
External Libraries

15. © Feb '18 – DataScenarios
Appsource listing

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

17. © Feb '18 – DataScenarios
• 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
Custom Visual approval

18. © Feb '18 – DataScenarios
• 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
Custom Visual certification

19. Gebruikersdag 2018
Bedankt!
Vergeet niet de evaluatie in te vullen!
Scan de QR code.

20. © Feb '18 – DataScenarios
References

21. © Feb '18 – DataScenarios
•Slides: http://bit.ly/PBISQLBbits2018
•Demos: http://bit.ly/PBISQLBits2018-demo
Links

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

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