Custom Visual Changes for Power BI

The Power BI team recently released a command line tool for creating and packaging custom visuals that is distinctly different from the Visual Studio solution + Playground and the online DevTools that came before. There is also a companion “Developer Visual” in Power BI service to host the live version of a visual. You can read about everything in more detail and learn about installing and setting up the environment at their GitHub PowerBI-visuals-docs repo. The documentation is still being written, but it is already much better than the now-deprecated tool’s documentation was in its infancy.

Overall, based on first impressions, I feel like this is a much better development environment for a few reasons. Some difficulties exist for established custom visuals in that changes will hinder developers from simply taking existing code and using it with the new tools. Some helper libraries and other conveniences are still being added. Otherwise, I can easily see myself preferring the new tool over DevTools and certainly over the Visual Studio Playground.

Here are some reasons why:

• Compared to Visual Studio
  • You can see live changes hosted in Power BI with your data rather than a playground.
  • You can get started by installing Node.js only and going from there. The VS playground required Node, Gulp, and VS.
  • The VS playground solution took forever to setup by comparison, and it was huge since it included all of Microsoft’s code. With the new tool, you start with nothing and create a new visual. It’s much cleaner.
  • You can use your IDE of choice, which for many web developers is not Visual Studio. If you would like to use VS though, you can take advantage of Node.js Tools for Visual Studio.
• Compared to DevTools
  • Source control with DevTools involved copying and pasting your code out of DevTools. That’s no longer an inconvenience.
  • It is much easier to manage typings and external JavaScript.
  • DevTools allowed a “live” view, but it involved having a saved report and refreshing your Power BI browser tab. The new Developer Visual is more convenient because you only have to refresh the visual, not the entire site.
  • You can see your visual’s DataView live in the Developer Visual instead of dumping it to console and viewing it there.
  • For every custom visual you had in DevTools, it would create a new icon in Power BI’s Visualization panel. You now simply have one Developer Visual, and you can switch between visuals easily in the Node console.

I took the new tools for a test drive and created a simple bar chart adaptation based on Mike Bostock’s example (for anyone not familiar with D3, Mike Bostock is the creator of D3 and primary contributor to its ongoing development). Here’s a link to a Gist showing some quick and dirty code for adapting the original for use in Power BI.