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

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 mail@datascenarios.nl https://twitter.com/jppp https://linkedin.com/in/jpposthuma https://github.com/liprec © Feb '18 – DataScenarios

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

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

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

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

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

Developing © Feb '18 – DataScenarios

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

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

Technical Demos © Feb '18 – DataScenarios

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

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

Appsource listing © Feb '18 – DataScenarios

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

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

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

D3js Visual © Feb '18 – DataScenarios

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

D3js.org Visual ‘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/ © Feb '18 – DataScenarios

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

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.

References © Feb '18 – DataScenarios

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

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

Start coding Clone or download Open a report, upload some data 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) © Feb '18 – DataScenarios