Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now
I want to make a small change to an existing visual but I dont want to have to worry about maintainence. I know that I can place the link to the git repo in my package.json. Is it then possible to inherit from the visual and simply override a function? I would like it to look something like this
class MyVisual extends OtherVisual { constructor(options: VisualConstructorOptions){ super(options: VisualConstructorOptions); } public update(options){ //my new code here super.update(options); } }
Is it possible to do something like this? Any answer would be helpful!
Solved! Go to Solution.
import ChicletSlicer = powerbi.extensibility.visual.ChicletSlicer;
Have you tried such an import?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Yes, it's possible. You just need to add another visual into compilition pipeline and import required dependencies.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
That doesn't sound like its terribly complicated but I'm afraid I don't understand. Could you give a more detailed answer?
What custom visual do you want to inherit?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
You just need to install Chiclet Slicer as a dependency via NPM. After that please add TS files into your tsconfig.json. Please do the same for externalJS from pbiviz.json.
After these steps you will be able to import Chiclet Slicer to inherit it.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
The same what is listed in Chiclet Slicer: https://github.com/Microsoft/PowerBI-visuals-ChicletSlicer/blob/master/pbiviz.json#L20
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Can you clarify what does the import statement look like? I have followed your instructions, I currently have the link to chiclet-slicers github repo listed in my depenencies, I have copied the urls in the externalJS, and tsconfig. I don't know what to do from here. I've tried various import statements nothing seems to work.
import ChicletSlicer = powerbi.extensibility.visual.ChicletSlicer;
Have you tried such an import?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Guys im new to power bi, i Could'nt understand what your Conversations is about? What is that code?
Please do explain me , i want learn.
This is about extending the exisitng Custom Visuals.
To find out more about the code please look into documentation.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Accepted too soon. The import worked but the viusal doesn't:
import ChicletSlicer = powerbi.extensibility.visual.ChicletSlicer; export class myVisual extends ChicletSlicer { constructor(options){ super(options) } public update(options) { super.update(options) } }
for a moment it compiled but it showed me the the developer visual in its default state, the one with the update counter. Now it doesn't even do that. I get the following error printout:
(in case the image is too small)
error TYPESCRIPT /src/visual.ts : (1,54) Property 'ChicletSlicer' does not exist on type 'typeof visual'. error TYPESCRIPT /src/visual.ts : (1,54) Namespace 'powerbi.extensibility.visual' has no exported member 'ChicletSlicer'. error TYPESCRIPT /visualPlugin.ts : (8,158) Property 'Visual' does not exist on type 'typeof testInherticane714AE1C1ED164D2482B6C0D7F435F057'.
Did you put a proper class name into visualClassName?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Check out the October 2024 Power BI update to learn about new features.
Learn from experts, get hands-on experience, and win awesome prizes.