Extending Power BI with your own custom visual
Download as PPTX, PDF2 likes715 views
The document discusses how to extend Power BI with custom visuals using Microsoft's open-source tools and libraries like d3.js, lodash, and jQuery. It outlines the development lifecycle, including creation, coding, testing, and submission for certification through the Microsoft AppSource. Additionally, it provides resources and technical guidelines for making custom visuals that enhance user experience in Power BI.
![• 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
Who am I?
© Feb '18 – DataScenarios 2](https://image.slidesharecdn.com/201802-extendpbiwithcustomvisuals-sqlbits-180224114410/85/Extending-Power-BI-with-your-own-custom-visual-2-320.jpg)
![• ‘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/
21© Feb '18 – DataScenarios
D3js.org Visual](https://image.slidesharecdn.com/201802-extendpbiwithcustomvisuals-sqlbits-180224114410/85/Extending-Power-BI-with-your-own-custom-visual-21-320.jpg)
Extending Power BI with your own custom visual
- 1. Extending Power BI With Your Own Custom Visual Saturday, 24-Feb-2018 14:30 – 7. Daniels Jan Pieter Posthuma © Feb '18 – DataScenarios
- 2. • 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 • [email protected] • https://twitter.com/jppp • https://linkedin.com/in/jpposthuma • https://github.com/liprec Who am I? © Feb '18 – DataScenarios 2
- 3. • Introduction • Developing • Technical Demos • AppSource Listing • D3js Visual 3© Feb '18 – DataScenarios Agenda
- 4. Introduction © Feb '18 – DataScenarios
- 5. 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 © Feb '18 – DataScenarios 5
- 6. Custom Visuals Platform © Feb '18 – DataScenarios 6
- 7. Distribute through AppSource © Feb '18 – DataScenarios Greater reach to business users Usage tracking Publishing requires Office Developer account https://appsource.microsoft.com 7
- 8. • 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 History 8
- 9. Developing © Feb '18 – DataScenarios
- 10. • 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 Tools needed © Feb '18 – DataScenarios 10
- 11. Power BI Custom Visual API 11© Feb '18 – DataScenarios IVisual module methods (init, update, …) enumerateObjectInstances dataView Formatting pane Power BI Custom Visual capabilities.jsonvisual.ts Interaction via code Report canvas Sandbox
- 12. Technical Demos © Feb '18 – DataScenarios
- 13. > pbiviz new <visualname> .api .vscode assets src style capabilitises.json pbiviz.json tsconfig.json Folder structure 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 © Feb '18 – DataScenarios 13
- 14. • 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 External Libraries
- 15. Appsource listing © Feb '18 – DataScenarios
- 16. Creation Coding Testing Packaging Submission Custom Visual SDK PowerBI.com Office Seller Dashboard Custom visual development lifecycle © Feb '18 – DataScenarios 16
- 17. • 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! 17© Jan '18 – DataScenarios Custom Visual approval
- 18. • 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 18© Jan '18 – DataScenarios Custom Visual certification
- 19. D3js Visual © Feb '18 – DataScenarios
- 20. • Reason Source: https://fd.nl/economie- politiek/1218875/de-puzzelstukken- van-de-miljoenennota © Feb '18 – DataScenarios D3js.org Visual
- 21. • ‘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/ 21© Feb '18 – DataScenarios D3js.org Visual
- 22. We love to get feedback Please complete the session feedback forms Just like Jimi Hendrix …
- 23. 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. SQLBits - It's all about the community...
- 24. References © Feb '18 – DataScenarios
- 25. • 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/ Resources © Feb '18 – DataScenarios 25
- 26. • 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) Start coding © Feb '18 – DataScenarios 26