Editting an existing Custom Visual

[Anonymous]

I'm new to creating custom visuals and have looked at a few tutorials.  The main style i saw was making use of PBIViz on the command prompt to make a new folder of resources, editing those and then using PBIViz to package them back up.  That process seems to make fine sense.

I downloaded an existing visual, TimeLine Version 1.3.17, which comes as a .pbiviz file.  I've extracted the contents using 7-Zip into a development folder.  The file structure is a little different to the tutorial but still made sense and there is a package.json as the starting point and a resources folder it points to.  What is curious is that you have both a TypeScript file and a Javascript file making up the code.  Both files, while different lanuages, look to me as having the same modules just in their own respective languages.  There are some other files like .css and image files that seem straight forward.

Problem:
No matter what changes i've made to either the Typescript file or the Javascript file, the custom visual stays exactly the same.  I've found the most easy and simple labels that exist on once in each file, and even just changed those.  No matter what i do, i can't see to have an effect on the custom visual in the slightest.

My process has been:
Extract all files from .pbiviz file using 7-zip.  Alter the .js & .ts files with the same changes.  Put those .js & .ts back into the .pbiviz using 7-Zip.  Open up Power BI Desktop and import custom visual into a project.  Add visual to the report and check. Discover nothing changes and weep a little.

Help???

[v-chuncz-msft]

@Anonymous,

You will need to change all the code related to guid in package.json.

[Anonymous]

The Package.Json has a GUID value of 'Timeline1447991079100'

Inside Timeline.js there is a var Timeline1447991079100; (function (Timeline1447991079100) {  **Lots of Code** }

Inside {** Lots of Code **} is where i've made a tonne of changes.  None of which seem to have an effect on the visual itself.  For example there is a visual that shows "Y - Q - M - W - D" which has only a single reference in the code "this.granularitySelectors = ['Y', 'Q', 'M', 'W', 'D'];"

So i change it to "this.granularitySelectors = ['FY', 'Q', 'M', 'W', 'D'];", save the Timeline.js and putting it back into the .pbiviz using 7-Zip.  Next load that .pbiviz into a Power BI desktop file i have open using the 'Import From File' under visualisations. I connect it to data and all of the visuals are completely unchanged.

If feels like there is some 'compile' step that i'm missing and i'm just updating source code.

[v-chuncz-msft · Accepted solution]

@Anonymous,

I mean to replace 'Timeline1447991079100' with a new value.

[Anonymous]

I think this must be the right answer.  I incremented this GUID value by 1 and got an error when i've attempted to install the updated package.  The fact that i got the error makes me happy as thats something new.  Thanks for your help!

[naidoode]

Hi

Did you manage to get it right? Im also interested on making some alterations...but, I get an error

[Anonymous]

I believe the API has changed, so I don't know if this will work anymore.  I haven't attempted it with the newer versions.

[v-viig]

We do not recommend to modify pbiviz files directly.

Since Timeline is avaiable on GitHub you can fork this report and make all of required customizations.

Do not forget to change GUID in pbiviz.json. Otherwise, ti will be taken from our CDN.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com