2. Build a custom visual for Microsoft Power BI and Excel from scratch in 15 minutes
Jan Pieter Posthuma DataScenarios

3. Session Agenda Introduction Developing Demo – Custom Visuals
Demo – Custom visuals in Excel

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

5. What are custom visuals?
11/10/ :14 AM
What are custom visuals?
A visualization extension platform, JavaScript based, to enable the creation of visualizations that would make it easier to understand the data and retrieve insights from the data.
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. Power BI Custom Visuals Platform
11/10/ :14 AM
Power BI Custom Visuals Platform
Developer tool
Open Source
APIs & Utils
Import D3, jQuery, WebGL, etc…
Debugging and testing
See what you code
Sideload into Power BI to test anytime, anywhere
R scripting
Advanced analytics visualizations
Interactive
Marketplace
Developer portal
Integrated into PBI clients
Global reach -
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7. The Business Value of Custom Visuals
PBI users
Is using custom visuals
February 2018
A Leader in
Analytics & BI Platforms
Organizational Store
Certified Visuals
Administrator Control
Intuitive visual consumption of data
Over 150 visuals in the marketplace
Build or buy tailor-made visuals
Enterprise ready
Differentiator in the market

8. Why Develop Custom Visuals?
11/10/ :14 AM
Why Develop Custom Visuals?
Build a unique expertise in the BI solution providers domain
Enrich your solution portfolio
Eye catching reports and dashboards – Go beyond the usual pie/bar charts
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. Custom visuals partner offerings

10. 11/10/ :14 AM
Development
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. Tools needed
NodeJS 5.0+ Required. (v5 – 8 are confirmed to work with pbiviz)
PowerBI-Visuals-Tools
npm install -g powerbi-visuals-tools
Create and install user SSL certificate: visuals/blob/master/tools/CertificateSetup.md
Visual Studio Code
PBIViz CLI addin: pbiviz
Enable ‘Developer Visual’ in Power BI user settings

12. Custom Visuals Core Concepts
Capabilities.json
Data Roles – Properties in fields list
Objects – Properties in formatting pane

13. Custom Visuals Core Concepts
Capabilities.json
dataViewMapping – binding the data roles
Data Roles
Data Model

14. Custom Visual Lifecycle
Create
Code
Test
Package
Submit
Developer Tool
Windows Dev Center
Your favorite IDE
Marketplace
Data Analyst
Developer
External libraries
APIs
PowerBI.com
Learn more:
Feedback

15. What’s new in custom visuals
11/10/ :14 AM
What’s new in custom visuals
New
Available
Preview
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

16. Report page tooltips Enable users to use page tooltips
11/10/ :14 AM
Report page tooltips Enable users to use page tooltips
Report Page Tooltip:
Was released in preview version on March 2018.
Report page tooltips, lets you use visuals in your own custom designed tooltips.
In other words, this feature lets you design a report page to be used as a custom tooltip for other visuals in your report.
How do we do that?
First start designing your tooltip you want to show, it can include one visuals or more, core or custom visual.
Once you are done you can either tie this custom designed tooltip to a specific page or you can manually set it to a specific visual that support tooltip. 
The changes we made to support tooltip
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17. New Documentation Site For Developers
Grow the ecosystem
New Documentation Site For Developers
New Documentation Site For Developers
Developer Center:
New Github.io:

18. API version 2.1 New version tooling with Typescript 2.8 support
ECMAScript 2015 (ES6) modules support
Webpack support
Roadmap
MultiColumn JsonFilter

19. Demo – Custom Visuals 11/10/2018 12:14 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

20. Custom visuals in Excel
Integrate into Excel’s Charting experience
Expand your potential audience
100’s of millions of Excel users worldwide
Write Once, run in both Power BI and Excel
Let’s see it in action…

21. Demo – Custom visuals in Excel
11/10/ :14 AM
Demo – Custom visuals in Excel
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

22. Custom visuals in Excel – Key Points
Now in public Preview
Custom visuals in Excel – Key Points
Expand your potential audience
100’s of millions of Excel users worldwide
Intuitive insertion experience
All Chart users are potentially Custom Visuals users
Tailored store experience
Focused on just Custom Visuals
Common UI controls
Consistent experience across all visuals
Enterprise Ready
Deploy it just like any Office Add-in

23. Supported Features
Unsupported features are ignored in Excel workbooks.
You only need to build one visual for use in both applications.
Custom visuals connect directly to data, therefor:
Must be a contiguous range of cells
Oriented with data fields as columns and records as rows
Pre-processed with any desired calculations (including aggregations)
Capabilities
dataViewMappings: Categorical
Basic object types: bool, enumeration, fill, integer, numeric, text
API Methods/Properties : persistProperties, colorPallette

24. Sign-up for Custom Visual updates at http://aka.ms/xlcvdev

25. 11/10/ :14 AM
Session resources
Custom visuals marketplace (AppSource)
Developer documentation developer-tools
Developer guides on GitHub
Custom visuals SDK
Contact custom visuals support team
Custom visuals community site
Hands on lab B1C403
Use this slide to share additional content available that attendees should know about. In this section you can call out whitepapers or websites that you and your team have created.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

26. Q&A

27. Don’t forget to join your local PUG to enjoy year-round networking and learning.