Extending Power BI With Your Own Custom Visual

Extending Power BI With Your Own Custom Visual Jan Pieter Posthuma Microsoft Data Consultant 24 April 2018, 11: 30 – 12: 30 Liffey Meeting Room 5

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 © Apr '18 – Data. Scenarios 3

Agenda • Introduction • Developing • Technical Demos • App. Source Listing © Apr '18 – Data. Scenarios 4

Introduction

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 © Apr '18 – Data. Scenarios 6

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

Distribute through App. Source Greater reach to business users Usage tracking Publishing requires Office Developer account https: //appsource. microsoft. com © Apr '18 – Data. Scenarios 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. 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 © Apr '18 – Data. Scenarios 9

Developing

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 © Apr '18 – Data. Scenarios 11

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 © Apr '18 – Data. Scenarios Sandbox IVisual module methods (init, update, …) 12

Technical Demos

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) © Apr '18 – Data. Scenarios 14

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, © Apr '18 – Data. Scenarios 15

Appsource listing

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

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 (optional) • Power BI Desktop (Chromium) • Tested to provide expected behavior: • Everything should work • No errors/exceptions • After approval support: • Power BI is a moving target! © Apr '18 – Data. Scenarios 18

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 © Apr '18 – Data. Scenarios 19

References

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. vscode-startpbiviz • Certification Requirements https: //powerbi. microsoft. com/en-us/documentation/powerbi-customvisuals-certified/ © Apr '18 – Data. Scenarios 21

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) © Apr '18 – Data. Scenarios 22