Extending Power BI With Your Own Custom Visual

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

Who am I? • Jan Pieter Posthuma – Microsoft Data Consultant • Data. Scenarios – Data Consultancy Company • Architect roles at multiple projects • Creator of Power BI Custom Visuals • Hierarchy. Slicer [∞] • Box and Whisker chart [∞] • D 3 js Visual [∞] • Contact • • mail@datascenarios. nl https: //twitter. com/jppp https: //linkedin. com/in/jpposthuma https: //github. com/liprec © Feb '18 – Data. Scenarios 2

Agenda • Introduction • Developing • Technical Demos • App. Source Listing • D 3 js Visual © Feb '18 – Data. Scenarios 3

Introduction © Feb '18 – Data. Scenarios

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 – Data. Scenarios 5

Custom Visuals Platform Open source Git. Hub Community D 3, j. Query, Utility libraries Robust Versioned APIs © Feb '18 – Data. Scenarios Powerful R visuals Secure Sandbox 6

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

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 App. Source • Feb 2018: Introduction of the Company Store © Feb '18 – Data. Scenarios 8

Developing © Feb '18 – Data. Scenarios

Tools needed • Node. JS 4. 0+ Required (5. 0 recommended) • https: //nodejs. org/ • Power. BI-Visuals-Tools • npm install -g powerbi-visuals-tools • SSL and Debug visual: https: //github. com/Microsoft/Power. BIvisuals/blob/master/tools/README. md • Visual Studio Code • https: //code. visualstudio. com/download • PBIViz CLI addin: https: //marketplace. visualstudio. com/items? item. Name=liprec. vscode-startpbiviz • Enable ‘Developer Visual’ in Power BI Admin portal © Feb '18 – Data. Scenarios 10

Power BI Custom Visual API visual. ts capabilities. json data. View Report canvas Interaction via code Power BI Custom Visual Formatting pane enumerate. Object. Instances © Feb '18 – Data. Scenarios Sandbox IVisual module methods (init, update, …) 11

Technical Demos © Feb '18 – Data. Scenarios

Folder structure > pbiviz new <visualname> API schemas. api Visual Studio Code settings. vscode Icons / assets screenshot src Style file – included in pbiviz. json. Less supported style capabilitises. json pbiviz. json tsconfig. json Source files – must included in tsconfig. json Capabilities definition – dataview binding, formatting pane Power BI Visual definition, like name, author, external. JS files, Type. Script config file list of. ts files needed (incl. typing) © Feb '18 – Data. Scenarios 13

External Libraries • First class citizens (Power BI is using them also): • D 3 js. org – Graphical library for ‘Data-Driven Documents’. • Lodash – Library to take the hassle out of working with arrays, objects, strings, numbers, etc. • j. Query – Library to make HTML document traversal and manipulation, event handling easier • Helper classes to support common UI operations, e. g. : • powerbi-visuals-utils-formattingutils – value. Formatting, Text. Properties, … • powerbi-visuals-utils-dataviewutils – get. Object, Data. View. Objects. Parser, © Feb '18 – Data. Scenarios

Appsource listing © Feb '18 – Data. Scenarios

Custom visual development lifecycle Office Seller Dashboard Custom Visual SDK Creation Coding Testing Packaging Submission Power. BI. com © Feb '18 – Data. Scenarios 16

Custom Visual approval • Submit pbiviz file, return manifest file for App. Source 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 – Data. Scenarios 17

Custom Visual certification • Visual advantages: • Exported to Power. Point • Embedded in emails • Requirements: • Microsoft App. Source 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 Git. Hub) • Uses only public reviewable OSS components • Does not access external services or resources https: //docs. microsoft. com/en-us/power-bi-custom-visuals-certified © Jan '18 – Data. Scenarios 18

D 3 js Visual © Feb '18 – Data. Scenarios

D 3 js. org Visual • Reason Source: https: //fd. nl/economiepolitiek/1218875/de-puzzelstukkenvan-de-miljoenennota © Feb '18 – Data. Scenarios

D 3 js. org Visual • ‘Lift and Shift’ migration of D 3 js visuals to Power BI • Skeleton visual with D 3 js libraries included • SVG element: • <svg xmlns="http: //www. w 3. 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-d 3 js-visual/ © Feb '18 – Data. Scenarios 21

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.

Links • Slides: http: //bit. ly/PBISQLBbits 2018 • Demos: http: //bit. ly/PBISQLBits 2018 -demo © Feb '18 – Data. Scenarios

Resources • Power BI Custom Visuals documentation https: //github. com/Microsoft/Power. BI-visuals • Power BI CLI tools https: //github. com/Microsoft/Power. BI-visuals-tools • Power BI Core Visuals (old visuals, but good for reference) https: //github. com/Microsoft/Power. BI-visuals-core • Visual Studio Code https: //code. visualstudio. com/download • PBIViz addin https: //marketplace. visualstudio. com/items? item. Name=liprec. vscodestart-pbiviz • Certification Requirements https: //powerbi. microsoft. com/en-us/documentation/powerbi-customvisuals-certified/ © Feb '18 – Data. Scenarios 26

Start coding • Clone or download https: //github. com/Microsoft/Power. BI-visuals-sample. Bar. Chart 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 F 12 to debug Use the browser debugger to see what’s happening Hint: add debugger; to the constructor (makes debugging easier) © Feb '18 – Data. Scenarios 27