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
ls_shetty
Regular Visitor

Edit Custom Visual Developed in PowerBI developer tool (Online)

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.

PowerBI_Error.png

 

I am using D3 Script to draw the visuals.

 

 

7 REPLIES 7
v-chuncz-msft
Community Support
Community Support

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

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.
mpo
Helper II
Helper II

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

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

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

 

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

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'  

 

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.