topic Re: Edit Custom Visual Developed in PowerBI developer tool (Online) in Developer

Edit Custom Visual Developed in PowerBI developer tool (Online)

ls_shetty — Thu, 20 Oct 2016 09:31:26 GMT

Hi,

I want to make some changes in my Custom Visual which is devloped in online version of the Power BI DevTool. can any one help me how can i go doing changes in that custom visual using new Power BI PBIVIZ tool.

I have tried Copy pasting my Typescript code to "src/visual.ts" file, but when i try to run it then it give me following error.

I am using D3 Script to draw the visuals.

Re: Edit Custom Visual Developed in PowerBI developer tool (Online)

mpo — Mon, 24 Oct 2016 07:33:33 GMT

1) try navigate to the visual folder and run "

npm i

to install dependencies.

Though, old custom visual API is not 100% compatible with the new one, so it's possible you will have to redo some parts from scratch. Some features are not ported yet.

Have a look at this thread.

Re: Edit Custom Visual Developed in PowerBI developer tool (Online)

v-chuncz-msft — Fri, 21 Oct 2016 10:23:37 GMT

@ls_shetty,

In addition to post above, you could specify "devDependencies" in package.json and study the new PowerBI command line tools at https://github.com/Microsoft/PowerBI-visuals-tools.

Re: Edit Custom Visual Developed in PowerBI developer tool (Online)

ls_shetty — Mon, 24 Oct 2016 05:58:54 GMT

i tried npm command, But still its not working. is there any other workaround for this.

Re: Edit Custom Visual Developed in PowerBI developer tool (Online)

mpo — Mon, 24 Oct 2016 07:40:41 GMT

Did "npm i" succeed?

Did the error change?

You could open any existing pbiviz file with an archive manager, to inspect the structure.

Then you could try zipping contents of your visual folder and changing extension to ".pbiviz".

Re: Edit Custom Visual Developed in PowerBI developer tool (Online)

ls_shetty — Mon, 24 Oct 2016 10:49:26 GMT

the command "npm i" run sucessfully but still m getting same error.

Re: Edit Custom Visual Developed in PowerBI developer tool (Online)

mpo — Mon, 24 Oct 2016 11:21:39 GMT

You could try using this visual as a template and gradually replacing it with your code.

Not sure if it makes any difference, but I noticed the barchart source from the link above does not capitalize "d3" which is capitalized in the error you attached.

Cannot find namespace 'D3'

Re: Edit Custom Visual Developed in PowerBI developer tool (Online)

MawashiKid — Sun, 20 Nov 2016 00:01:34 GMT

RE: Old custom visual API is not 100% compatible with the new one, so it's possible you will have to redo some parts from scratch.

Exactly. As we know Power BI Visuals went through a lot of changes since its introduction. Therefore, its pretty logic to believe
that those modifications will have a certain impact on compatibility. As an example, if you take a simple code example like
the thermometer.ts code used in devTools online demo.

https://gist.github.com/spatney/4eb52930075a5e5be9af

Now if you take this raw 'deprecated' code version and do a Cut & Paste in a new CLI generated src/visual.ts file
this will NOT run right out of the box. When you try to package a .pbiviz, chances are you'll even end up with a pretty similar
long list of errors scenario as shown in the picture above.

In my case, I did manage to refactor some old demo code versions mainly for testing. I've dealt ablot with d3.js in the past, so the idea wasn't really to replicate the code as is... but rather rebuilding in order to get a better understanding of the IVisual logic. So I would basically gnerate a new CLI template all from scratch in Visual Studio Code, then add all libraries [using either typings and npm].
I then fragmented the old version code into small pieces [like this part ought to go in visual.ts, that other part ought go in capabiities.json...] and so on. this was a good learning exercise...

I also had to refactor a bunch of minor things along the way like changing

private svg: D3.Selection;
to
private svg: d3.Selection<SVGElement>;

Approach and result may not be 100% perfect... though refactored codes work and I'm pleased with the reuslts I got so far...