Forum Discussion
Editing/Modifying an Existing Custom Visual
Hi,
I am currently new to Power BI Custom Visual development and would like to modify an existing Power BI Visual.
I am currently trying to modify the open source Map Box Custom Visual Source Code and add several minor changes for my report.
After making the necessary changes, I have attempted to use "npm run package" on the root directory of the Custom Visual source code, but I noticed that its file size drops dramatically from 1.2 mb (Original pbiviz file) to 330 kb (Repackaged Pbiviz file).
I've tried running this and the visual comes up blank - The Fields option seems to include the expected fields, but the Format option doesn't contain the expected fields (i.e. only the default options).
I've also tried repackaging it without any changes and it ends up with the same result (330 kb, not working).
Could someone please explain what I am doing wrong? What approach should I be taking to make it work properly?
I would greatly appreciate any help, thank you in advanced.
Hey Anonymous,
When you say you have only changed the guid, does this include backing-out the minor changes you wanted to make? I'd be inclined to stash those somewhere and confirm the base visual works from checkout before packaging with the changes. The visual host suppresses runtime errors and a blank visual can also be a side-effect of such a runtime error.
Assuming you have and the guid is the only change, then my next steps to investigate would be as follows:
If you're still getting a smaller package size it sounds to me like the newer SDK is somehow still installed. Is it possible that you may have installed powerbi-visuals-tools locally to the project as well as globally? You can check this as follows:
- Confirm that package.json doesn't contain powerbi-visuals-tools in either dependencies or devDependencies.
- If it does, type npm un powerbi-visuals-tools and press [Enter].
- Confirm the entry is removed from package.json.
I'm unfortunately not in a position where I can confirm the below process will work as I have several active visual projects on the go and I can't downgrade at this time, but this used to be my process:
- In the command prompt, type npm un powerbi-visuals-tools -g and press [Enter].
- Type pbiviz and press [Enter] - this should return an error as tools should be uninstalled.
- Re-attempt the install: type npm i [email protected] -g and press [Enter].
- Once installed, type pbiviz --version and press [Enter]. This should say 1.13.x (where x will be a minor version - according to npm the latest build under 1.13 is 1.13.1 so will likely be that - as long as it's 1.13 we should be good).
- The older version of the SDK has a 2-step cert process.
- First type pbiviz --create-cert and press [Enter]. This will generate the file. Make note of the key.
- Then type pbiviz --install-cert and press [Enter]. This should present the standard dialog where you can install the cert. Add in your key here as normal (remeber that the cert needs to be installed into Trusted Root Certification Authorities).
It also looks like Mapbox has their own additional steps for the dev process. It's possible if these aren't done in the right order then they might cause issues also. I would attempt the following to ensure that your checkout corresponds correctly:
- Type npm i and press [Enter].
- Type npm run build-turf and press [Enter].
Confirm that your pbiviz.json still shows "1.13.0" under the apiVersion property.
As long as pbiviz.json and the tools are in sync then pbiviz package or pbiviz start should bundle correctly.
If the guid is the only change you've made to the checkout then theoretically that should be all there is to it. If the code, minus this one change doesn't work then I would suggest creating an issue with Mapbox for advice on how to set-up the development environment correctly to match their own.
You could also try asking the visuals team at MS directly, as they don't weigh-in on the forums any more: [email protected]. it is however possible they will direct you to Mapbox for support.
Regards,
Daniel
On the older SDK, the apiVersion isn't tied to a sensible repository like npm and is managed through some other arcane means, so there are some manual steps.
BTW updating your SDK and API to 2.6.0 should be okay as this is as far as you can go on the older tooling before needing to migrate packages and code to the newer tooling.
On the older tooling, the specified apiVersion in pbiviz.json needs to be pulled down separately and stored in your project's .api folder if you update the tools in-place.
As long as you have powerbi-visuals-tools 2.6 installed, you should be able to run the following from the command line:
pbiviz update 2.6.0This should set the apiVersion to 2.6.0 in pbiviz.json and a pbiviz start should hopefully not complain about SDK and API being out of whack.
You will also need to re-generate the certificate on the older versions if you either update the API or the tools due to a change in signature of the SDK + API.
If it's still upset, check the .api folder of your project and delete any that aren't relevant to your current specified API version. The tool should do this itself but it's possible that errant ones may remain if you've been shifting between versions.
On the newer toolchain there are separate npm packages for the API and tools so its easier to manage, and certificates only have to be generated for new versions of powerbi-visuals-tools (updating powerbi-visuals-api is safe).
The older tooling was still evolving and a lot of existing visuals still use it, which unfortunately does make experiences like these commonplace, if you're picking up someone else's work. You definitely get a better experience if you attempt to work on anything with an SDK >= 3.1.
Hopefully this should get you on track,
Daniel
12 Replies
Hi Anonymous,
Welcome aboard to visual development!
I can't help with specifics, as the visual codebase is pretty large but from looking at pbiviz.json in the mapbox visual's code repo, this is using a really old version of the visual SDK. The version they're using is 1.13.
If you've installed the latest SDK onto your machine so that you can do development, then at time of writing this will be 3.1.x.
Version 3 introduced some huge changes to how visuals leverage other libraries, as well as optimising the package process to remove unnecessary library functions, which is why it will be smaller when you package on your machine.
If you want the Mapbox visual to work on your machine with the current codebase, you have two options:
You could re-write the code to use updated packages that are ES6 compatible. This is not a small undertaking and the likely reason why Mapbox haven't done it either.
The second (easier) option will be to downgrade your tooling and install the older version. If you followed the guide, you probably ran the following (or similar) when you installed the tools:
npm i powerbi-visuals-tools -gThat will always install the latest version. Instead, you could run the following to set your tools to the same version that Mapbox would have built the visual with:
npm i [email protected] -gNote that you will need to set up your developer certificate again as any change to the powerbi-visuals-tools package signature will invalidate any current secure connection you have to the Power BI Service.
Note that any feature you might want to add may not be present in 1.13 of the tools - check the changelog to confirm this.
The other thing to consider is that with packaged visuals, the pbiviz.json contains a guid property. If this guid matches a visual already published in AppSource (i.e. Mapbox), then Power BI will always load that one to ensure that reports are always on the latest peublished version of a known visual. You either need to change this to a different one when using in production reports as you typically won't be using Developer mode here.
Good luck,
Daniel
Hi dm-p ,
Thank you very much for your help and reply.
I've tried the steps that you've mentioned for the 2nd option (Since I only need several minor adjustments to the existing Mapbox visual)
npm i [email protected] -g
and gave it a new GUID, then I tried packaging it with "npm run package" at the root of the mapbox directory, but for some reason, the newly generated .pbiviz file still comes up as 330 Kb (and it didn't work on the Desktop version).
I've also tried creating/installing a certificate for the 1.13 version with pbiviz -- create-cert and pbiviz --install-cert , but when I tried to run it using the Developer mode, it wouldn't work either.
Please note that I haven't made any changes to the actual code outside of the GUID.
Have I missed out anything else? Thanks
Hey Anonymous,
When you say you have only changed the guid, does this include backing-out the minor changes you wanted to make? I'd be inclined to stash those somewhere and confirm the base visual works from checkout before packaging with the changes. The visual host suppresses runtime errors and a blank visual can also be a side-effect of such a runtime error.
Assuming you have and the guid is the only change, then my next steps to investigate would be as follows:
If you're still getting a smaller package size it sounds to me like the newer SDK is somehow still installed. Is it possible that you may have installed powerbi-visuals-tools locally to the project as well as globally? You can check this as follows:
- Confirm that package.json doesn't contain powerbi-visuals-tools in either dependencies or devDependencies.
- If it does, type npm un powerbi-visuals-tools and press [Enter].
- Confirm the entry is removed from package.json.
I'm unfortunately not in a position where I can confirm the below process will work as I have several active visual projects on the go and I can't downgrade at this time, but this used to be my process:
- In the command prompt, type npm un powerbi-visuals-tools -g and press [Enter].
- Type pbiviz and press [Enter] - this should return an error as tools should be uninstalled.
- Re-attempt the install: type npm i [email protected] -g and press [Enter].
- Once installed, type pbiviz --version and press [Enter]. This should say 1.13.x (where x will be a minor version - according to npm the latest build under 1.13 is 1.13.1 so will likely be that - as long as it's 1.13 we should be good).
- The older version of the SDK has a 2-step cert process.
- First type pbiviz --create-cert and press [Enter]. This will generate the file. Make note of the key.
- Then type pbiviz --install-cert and press [Enter]. This should present the standard dialog where you can install the cert. Add in your key here as normal (remeber that the cert needs to be installed into Trusted Root Certification Authorities).
It also looks like Mapbox has their own additional steps for the dev process. It's possible if these aren't done in the right order then they might cause issues also. I would attempt the following to ensure that your checkout corresponds correctly:
- Type npm i and press [Enter].
- Type npm run build-turf and press [Enter].
Confirm that your pbiviz.json still shows "1.13.0" under the apiVersion property.
As long as pbiviz.json and the tools are in sync then pbiviz package or pbiviz start should bundle correctly.
If the guid is the only change you've made to the checkout then theoretically that should be all there is to it. If the code, minus this one change doesn't work then I would suggest creating an issue with Mapbox for advice on how to set-up the development environment correctly to match their own.
You could also try asking the visuals team at MS directly, as they don't weigh-in on the forums any more: [email protected]. it is however possible they will direct you to Mapbox for support.
Regards,
Daniel