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

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

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

What are custom visuals? 11/10/2018 12: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.

Power BI Custom Visuals Platform 11/10/2018 12:14 AM Power BI Custom Visuals Platform Developer tool Open Source APIs & Utils Import D3, jQuery, WebGL, etc… https://github.com/Microsoft/PowerBI-visuals-tools 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.

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

Why Develop Custom Visuals? 11/10/2018 12: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.

Custom visuals partner offerings https://appsource.microsoft.com/en-us/marketplace/consulting-services?page=1&search=customVisualsOffer&country=US

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

Tools needed NodeJS 5.0+ Required. (v5 – 8 are confirmed to work with pbiviz) https://nodejs.org/ PowerBI-Visuals-Tools npm install -g powerbi-visuals-tools Create and install user SSL certificate: https://github.com/Microsoft/PowerBI- visuals/blob/master/tools/CertificateSetup.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 user settings

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

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

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: https://github.com/Microsoft/PowerBI-visuals Feedback

What’s new in custom visuals 11/10/2018 12: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.

Report page tooltips Enable users to use page tooltips 11/10/2018 12:14 AM Report page tooltips Enable users to use page tooltips Report Page Tooltip: https://powerbi.microsoft.com/en-us/blog/power-bi-desktop-march-2018-feature-summary/#tooltips 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.

New Documentation Site For Developers Grow the ecosystem New Documentation Site For Developers New Documentation Site For Developers Developer Center: https://powerbi.microsoft.com/en-us/developers/ New Github.io: https://microsoft.github.io/PowerBI-visuals/docs/latest/overview/

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

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.

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…

Demo – Custom visuals in Excel 11/10/2018 12: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.

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

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 https://microsoft.github.io/PowerBI-visuals/docs/latest/building-for-excel/supported-features/

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

11/10/2018 12:14 AM Session resources Custom visuals marketplace (AppSource) https://www.powerbi.com/visuals/ Developer documentation https://docs.microsoft.com/en-us/power-bi/service-custom-visuals-getting-started-with- developer-tools Developer guides on GitHub https://github.com/Microsoft/PowerBI-visuals Custom visuals SDK https://github.com/Microsoft/PowerBI-visuals-tools Contact custom visuals support team pbicvsupport@microsoft.com Custom visuals community site https://aka.ms/customvisualscommunity Hands on lab https://www.microsoft.com/handsonlabs/SelfPacedLabs/?storyguid=5B4E7144-F5CB-4412-B06A- 893782B1C403 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.

Q&A

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