Forum Discussion

ls_shetty's avatar
ls_shetty
Regular Visitor
9 years ago

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.

 

I am using D3 Script to draw the visuals.

 

 

7 Replies

  • mpo's avatar
    mpo
    Helper II
    9 years ago

    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.

    • ls_shetty's avatar
      ls_shetty
      Regular Visitor
      9 years ago

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

      • mpo's avatar
        mpo
        Helper II
        9 years ago

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

         

    • MawashiKid's avatar
      MawashiKid
      Resolver II
      9 years ago

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