Inherit from other visuals?

[bfialkoff]

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!

[v-viig]

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

pbicvsupport@microsoft.com

[bfialkoff]

That doesn't sound like its terribly complicated but I'm afraid I don't understand. Could you give a more detailed answer?

[v-viig]

What custom visual do you want to inherit?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[bfialkoff]

Chiclet Slicer.

[v-viig]

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

pbicvsupport@microsoft.com

[bfialkoff]

That is list the github repo in my package.json as a dependancy, the path to all of the .ts files in the chiclet slicers src folder to my tsconfig. What should be added to externalJS?

[v-viig]

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

pbicvsupport@microsoft.com

[bfialkoff]

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. 

[v-viig · Accepted solution]

import ChicletSlicer  = powerbi.extensibility.visual.ChicletSlicer;

Have you tried such an import?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

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.

[v-viig]

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

pbicvsupport@microsoft.com

[bfialkoff]

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'.

[v-viig]

Did you put a proper class name into visualClassName?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com