Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Anonymous
Not applicable

Editting an existing Custom Visual

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

1 ACCEPTED SOLUTION

@Anonymous,

 

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

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.

View solution in original post

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

@Anonymous,

 

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

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.
Anonymous
Not applicable

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.

@Anonymous,

 

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

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.
Anonymous
Not applicable

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!

Hi

 

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

Anonymous
Not applicable

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
Community Champion
Community Champion

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

Helpful resources

Announcements
Sept PBI Carousel

Power BI Monthly Update - September 2024

Check out the September 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

Sept NL Carousel

Fabric Community Update - September 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors