Extending Power BI With Your Own Custom Visual
Download as PPTX, PDF1 like322 views
This document summarizes a presentation about developing custom visuals for Power BI. The presentation covers: - The process and tools for developing custom visuals, including the Power BI custom visual API, capabilities definition, and folder structure. - How to publish custom visuals to the Power BI custom visual gallery to extend their audience and get more testing scenarios. - Resources for developing custom visuals, including documentation, CLI tools, code samples, and certification requirements. - A demonstration of starting to code a sample bar chart visual.
![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 [∞]
• Contact
• mail@datascenarios.nl
• https://twitter.com/jppp
• https://linkedin.com/in/jpposthuma
• https://github.com/liprec](https://image.slidesharecdn.com/extendpbiwithcustomvisuals-pbiwt-171210150150/85/Extending-Power-BI-With-Your-Own-Custom-Visual-5-320.jpg)
Extending Power BI With Your Own Custom Visual
- 1. Welcome! Power BI User Group (PUG) Toronto
- 2. Extending Power BI With Your Own Custom Visual Jan Pieter Posthuma DataScenarios
- 3. Welcome to Extending Power BI With Your Own Custom Visual • In this session we will look at the process of developing Custom Visuals for Power BI.
- 4. Session Agenda • Introduction • Developing • Technical Demos Presentation: http://bit.ly/pbiworldtour Demos: http://bit.ly/pbiworldtour-demo
- 5. 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 [∞] • Contact • [email protected] • https://twitter.com/jppp • https://linkedin.com/in/jpposthuma • https://github.com/liprec
- 7. 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: store.office.com
- 9. 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.7.0 • March 2017: Migration to Office Store: Version API required • July 2017: Integration with Office Store and Certified visuals • Next: https://github.com/Microsoft/PowerBI- visuals/blob/master/Roadmap/README.md
- 11. 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
- 12. Power BI Custom Visual API IVisual module methods (init, update, …) enumerateObjectInstances dataView Formatting pane Power BI Custom Visual capabilities.jsonvisual.ts Interaction via code Report canvas
- 13. Folder structure > pbiviz new <visualname> .api .vscode assets src style capabilitises.json pbiviz.json tsconfig.json API schemas Visual Studio Code settings Icons / screenshot 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) Source files – must included in tsconfig.json Style file – included in pbiviz.json. Less supported
- 16. Creation Coding Testing Packaging Submission Custom Visual SDK PowerBI.com Office Seller Dashboard Custom visual development lifecycle
- 17. Publish to the gallery • Extension of your audience • More (test) scenario’s • ‘Monkey testing’ • More browsers • Support • Power BI is a moving target! • Not all things can be tested (agile) • All types of users • 80%-20% rules apply for • Development • Testing • Patience
- 18. 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/
- 19. Start coding • Clone or download 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)
- 20. Thank you for Attending! Don’t forget to join your local PUG to enjoy year-round networking and learning. www.pbiusergroup.com/Toronto