Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
somnathmr
New Member

How to customize and package existing power bi visual

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.

10 REPLIES 10
Cubist
Advocate II
Advocate II

Has anyone heard when and if the included visuals will release updated code that builds easily with the newest API?

 

Why were they even deprecated in this first place?

Re: Has anyone heard when and if the included visuals will release updated code that builds easily with the newest API?

Not at this stage. If what you're looking for is a new "standalone" Power BI Visuals CLI version of the tremap.ts code,
I don't believe CORE code version has been ported to new CLI version yet. I'm regularly checking for
new updates on Github. Some code samples have been ported to new CLI version but not all.

 

Re: Why were they even deprecated in this first place?

First, I'd say that Deprecated doesn't necessarilly mean you won't be able to run it on Power BI Desktop or Online. I'm currently
using a CORE version of the waffechart.ts visual and can't really complain as it does the job fine. I wish there was a standalone CLI version I could play with, but I guess we have to give the runner a chance...

Why the decided to list CORE as Deprecated ? I'd say that even if the CORE application offered a fair amount of informations and examples, the CORE architecture was a bit too heavy to deal with and took a bit of time and patience to configure.... After receiving some feed back from Power BI Community developers, I guess Microsoft Power BI extensibility team came to conclusion it was time to go back to the drawing board and redesign a lighter approach. I believe they'll stick on the CLI approach from now on. [ I hope 😉 ... ]

v-chuncz-msft
Community Support
Community Support

@somnathmr,

 

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

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

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.

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. 

Second option creating a new CLI app [all from scratch] may be another long term option, One thing to keep in mind however 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 /// <reference path="../_references.ts"/> 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 file
I've tried a similar approach as mentioned in the following link with Visual Studio Code and 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 perfect solution but hey... remember this is CORE deprecated stuff so in this case it's better than nothing. Hope this helps.

 

Anonymous
Not applicable

Hi @MawashiKid

 

Can you provide details on how you managed to create the .pbiviz with reference to: http://amolpandey.com/2016/08/02/powerbi-how-to-create-pbiviz-file-custom-visualization/

 

I am trying to create a .pbiviz file from: https://community.powerbi.com/t5/Best-Visual-Contest/Power-BI-Aquarium/cns-p/7233

 

Error:

 

gulp package:

 

[16:33:20] Using gulpfile ~\Documents\Power BI\Dev Custom Visuals\PowerBI-visuals-master\gulpfile.js
[16:33:21] Task 'package' is not in your gulpfile
[16:33:21] Please check the documentation for proper gulpfile formatting

Thank you

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.

 

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.

 

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.

 

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.

 

Getting back to the problem

 

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:

 

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.

 

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.

 

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.

 

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.

 

Regards,
Lee

Anonymous
Not applicable

Hi @Cubist - thank you for your reply and description of options.

 

Its a very minor change to the visual (colour), so attempting to edit the .pbiviz.json file.

 

If that fails then will go for option 3, migrating the visual from legacy to new format.

I see.  I’m not sure changing pbviz.json willl do the trick because of its limitations, and if you are able to “migrate” the visual please let us know that willl be a challenging accomplishment.

 

My best hope is that you’ll be able to find an equivalent visual out there that could be viable somehow

 

@somnathmr,

 

I'm also interested in it. You may submit an idea or leave a comment at GitHub.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.