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

2. 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 [∞]
D3js Visual [∞]
Contact
© Feb '18 – DataScenarios

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

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

6. Custom Visuals Platform
Open source
GitHub
Community
D3, jQuery, Utility libraries
Powerful
R visuals
Robust
Versioned APIs
Secure
Sandbox
Visualize your business data any way you want
© Feb '18 – DataScenarios

7. Distribute through AppSource
Greater reach to business users
Usage tracking
Publishing requires Office Developer account
© Feb '18 – DataScenarios

8. 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
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

9. Developing
© Feb '18 – DataScenarios

10. Tools needed NodeJS 4.0+ Required (5.0 recommended)
PowerBI-Visuals-Tools
npm install -g powerbi-visuals-tools
SSL and Debug visual: visuals/blob/master/tools/README.md
Visual Studio Code
PBIViz CLI addin: pbiviz
Enable ‘Developer Visual’ in Power BI Admin portal
© Feb '18 – DataScenarios

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

12. Technical Demos
© Feb '18 – DataScenarios

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
Source files – must included in tsconfig.json
Style file – included in pbiviz.json. Less supported
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)
© Feb '18 – DataScenarios

14. External Libraries 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

15. Appsource listing
© Feb '18 – DataScenarios

16. Custom visual development lifecycle
Creation
Coding
Testing
Packaging
Submission
Custom Visual SDK
Office Seller Dashboard
Store
Developer
End user
Visual API
(versioned)
PowerBI.com
© Feb '18 – DataScenarios

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

18. Custom Visual certification
Visual advantages:
Exported to PowerPoint
Embedded in s
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
© Jan '18 – DataScenarios

19. D3js Visual
© Feb '18 – DataScenarios

20. D3js.org Visual
Reason
Source: politiek/ /de-puzzelstukken- van-de-miljoenennota
© Feb '18 – DataScenarios

21. D3js.org Visual ‘Lift and Shift’ migration of D3js visuals to Power BI
Skeleton visual with D3js libraries included
SVG element:
<svg xmlns=" 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:
© Feb '18 – DataScenarios

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

23. SQLBits - It's all about the community...
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.

24. References
© Feb '18 – DataScenarios

25. Links Slides: http://bit.ly/PBISQLBbits2018
Demos:
© Feb '18 – DataScenarios

26. Resources
Power BI Custom Visuals documentation
Power BI CLI tools
Power BI Core Visuals (old visuals, but good for reference)
Visual Studio Code
PBIViz addin start-pbiviz
Certification Requirements visuals-certified/
© Feb '18 – DataScenarios

27. Start coding Clone or download Open a report, upload some data
npm update
pbiviz start
Open a report, upload some data
In 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)
© Feb '18 – DataScenarios