How to customize and package existing power bi visual

Question

I am in a situation wherein I need to make really minor change to existing visual and use it in my reports. E.g., I need to change the font size of label in tree map visual. This change is very trivial and specific to my requirement and doesn't need to be published back to main power bi source code. Here is what I have done so far,

1. Found the power bi source code from github (https://github.com/Microsoft/PowerBI-visuals-core)

2. I am able to set this environment up, make the change and the change is working as expected (changed the font size in .less file).

Issues:

1. As the link says, the code base is DEPRECATED. But this is the nearest code base I could find to customize the tree map.

2. I don't know how to package my change, so that I can import it into power bi desktop application.

Question:

1. Is this the right approach to customize existing power bi visual.

2. How to customize existing power bi visual and package it (I want to share the package with my team).

Thanks in advance for the help.

somnathmr · Answer

Thanks for the quick turn around. Couple of things

1. The link points to a deprecated method of packaging power bi visuals. And it partly has same issues as (2) below.

2. The new tutorial is about creating a custom visual from scratch and packaging it. I have tried it, I am able to create the visual from scratch and package it. It works great. (My bad, I should had mentioned it).

But what I am really looking for is to make real minor change to existing visuals that power bi already has and package it.

As I have already mentioned, I have managed to apply a change to an existing power bi visual (change font size of tree map label) and that works as expected with the test page available in the source code. But my concern is the source code I got from github is marked deprecated. So can you please point me to the right version of source code and also how do I package it after making my change to existing power bi visual like tree map.

cubist · Answer

I’ve dived in a bit into PBI internals since this question was first posted and it illuminated a few points. It’s not a direct solution for you, but maybe it can help by shedding more light on the situation.&nbsp;One thing I found interesting is that there’s no fundamental technical limitation preventing the core controls from being modified, repackaged, and reused as new custom visuals. It can be done. I’ve done it. It’s not trivial to get things going, but once a visual is updated in the right ways and setup as it’s own project, it’s as easy to modify and maintain as any other.&nbsp;As far as the reason for the original deprecation, the evidence seems to point to the reason being that the plugin architecture has evolved significantly. Therefore certain techniques, classes, and sandbox incompatible approaches that were used are simply no longer compatible with the PBI architecture.If you look at the internal Power BI engine code, especially how it’s changed over time, you can see that the dev team has been incrementally evolving the core visuals to be more and more compatible with publicly recommended APIs and techniques.&nbsp;What does this mean? Maybe they are just improving their code, cleaning up technical debt, and maintaining the most consistent and cleanest code base possible. It could also mean they’ll eventually release more updated core visuals for people to modify and reuse, or maybe they are playing it by ear, based on the support efforts it would take to do so vs. the demand from customers.&nbsp;Getting back to the problem&nbsp;What’s the best approach if you need modifications to a visual that’s not published or has outdated code? There are a handful of options:&nbsp;1. Fake It. Depending on your requirements, sometimes you can use alternate controls. For example, if you need a static text label in a special font, you might get away with making a .jpg in Photoshop and using the image visual to display your text. Or you might find you can combine or overlap visuals to get a certain type of functionality. This isn’t always feasible, but when it is, it requires no code to be written and is by far the fastest way to a result.&nbsp;2. Find a Similar Visual. Lots of people have implemented visuals from scratch that have the same, overlapping, or even a superset of core visual functionality. Some are free and some cost money, but it can be worth paying. If you find one that works for you, this is also much faster than writing or modifying code.&nbsp;3. Go Hard Core. If you’re a pretty technical developer you can go through the process of building the visual yourself through a combination of modernizing code, modifying functionality, setting up a build configuration and maintaining it. Keep in mind the skill sets needed - you could be the best DAX developer in the world, but that’s not enough. You need to be highly proficient in Javascript, APIs, and other full stack web technologies.&nbsp;4. Just ask me to do it. Or if not my company, hire another one that you already work well with and trust. The big benefits here are it will be done faster, allow you to work on things in parallel, and you get exactly the functionality you need. If you go this route I would encourage you to confirm the specific developer the company will assign, and to ask to speak with that developer so they may briefly walk you through an example visual they’ve personally developed. You don’t want to get someone assigned who’s figuring it out as they go along, because that will take longer and cost more.&nbsp;Regards,Lee

v-chuncz-msft · Answer

somnathmr,&nbsp;You may check this link. If that doesn't work, you will need to&nbsp;follow the new tutorial to create&nbsp;the&nbsp;custom visual.

v-chuncz-msft · Answer

somnathmr,&nbsp;I'm also interested in it. You&nbsp;may submit an idea&nbsp;or leave a comment at GitHub.

mawashikid · Answer

RE: 1. The link points to a deprecated method of packaging power bi visuals. And it partly has same issues as (2) below.Indeed DevTool option is depecrated. It may not fully support 'let', 'const' and many other features the treemap.ts uses extensively. Therefore pasting a "raw " copy of your treemap.ts in top left pane and your modified .less right under in bottom pane may not work at all in this case.RE: 2. The new tutorial is about creating a custom visual from scratch and packaging it.&nbsp;Second option creating a new CLI app [all from scratch] may be another long term option, One thing to keep in mind however&nbsp;is the fact that the treemap.ts file was NOT built as a stand-alone chart component but rather as a part of a whole Power BI Visuals CORE application.It would be great if we could just copy the treemap.ts raw code in a new visual.ts file, rename it to treemap.ts, bring a few minor refactoring in the code and then easily recompile a new pbiviz version right out of the box throught the CLI pbiviz package command line and blah blah blah...The problem is since the treemap.ts file uses a /// &lt;reference path="../_references.ts"/&gt; reference directive,... so without that you may end up with few options and features missing in the end. It would be great if we could use somekind of bundle package that would cope with this though I haven't found . Most updates come in separate pieces and it's up to you to rebuild the puzzle...The Power BI Visuals CORE application [found on Github] does not provide the ability to generate .pbiviz right out of the box.Now since a .pbiviz is mainly a zip archive, my best bet would be to create a gulp task that could build or generate a compatible .pbiviz fileI've tried a similar approach as mentioned in the following link with Visual Studio Code and&nbsp;was able to come up with sommething:http://amolpandey.com/2016/08/02/powerbi-how-to-create-pbiviz-file-custom-visualization/I admit it may not be THE&nbsp;perfect solution but hey... remember this is CORE deprecated stuff so in this case it's better than nothing. Hope this helps.&nbsp;

Forum Discussion

How to customize and package existing power bi visual

10 Replies

Related content

Seeking advice on custom packages

Intellisense for custom Python packages not working in Fabric notebooks

azure-core package dependency version

Editing/Modifying an Existing Custom Visual

DB2 - Package Collection