need your expertise on Modifying custom visual

[Anonymous]

Hi-, All, 

Recently, I try to use card browser to visualize our data.  This custom visual can show images.  But I found it has maxium 4 image limit. Therefore, I want to modify it to let it show more images. 

I downloaded the custom visual project from github and try to edit it in visual studio code. This should only need to change a few setting .

My environment should work fine, because I just followed microsoft tutorial to create a simple custom visual and it works.

I switched to the project folder in powershell and  try to start the project with  pbiviz start.

but it ask to install api  and fail at the step. 

I have tried diffrent command,  pbiviz install,  pbiviz update....          None of them works. 

My gut feeling is something simple, like a swich need to turn on, but I don't know it as a newbie. 

Do you have similar experience? how do you fix it?

I would like your input, thanks

Wenlei

[dm-p]

Hi @Anonymous,

If you will have gone through the tutorial, this will be using v3.1 of the visuals SDK (tools) and v2.6 of the API and will indeed work.

There are two things to consider when cloning other project repositories:

• The dependencies in package.json - if these aren't installed, the project won't build, so if you've not run npm i, then do this first.
• The version of the SDK it's using. Very few custom visuals projects are up to date with this

From your output, it looks like that project is using 1.11 of the SDK, which is quite old now (> 2 years). At that time, the SDK/API was combined, so you'll need to install that version:

npm i -g powerbi-visuals-tools@1.11

 Once that's installed, it's probably best to re-ensure that your project's dependencies are correct for this version, so run:

npm i

From the root folder of your project.

Because you've changed the version of the SDK, you'll need to regenerate your certificate and install it - this was 2 steps on older versions of the SDK:

pbiviz --create-cert

And then...

pbiviz --install-cert

You'll be prompted to install the certificate again as per the current tutorial.

At that point you should be able to run pbviz start as normal.

If you want to run that codebase on the latest SDK, you'll need to migrate the code from the older standards to the newer one, as the v3 tooling is much better but uses newer JavaScript standards. There are some instructions here for this, but it's not a small job. There used to be some documentation on this but looks like it was lost in the move to the newer doc site - you might be able to find a cache of it somewhere (I couldn't). For reference this was at https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/migrating-to-powerbi-visuals-tools-3-0/.

To minimise frustration in getting the code to build, I would suggest going down the path of sticking with the current version it's on and ensuring the tools/SDK matches (1.11).

One other thing to consider, is if you package that visual, because it already exists in the marketplace, you will need to change its guid in pbiviz.json to be different. Otherwise, Power BI will always load the published version from the marketplace when you import it. Here's some further reading on that (specifically the section titled Importing a Power BI visual from the AppSource marketplace).

Regards,

Daniel

[MawashiKid2]

Hi Folks,

I encountered a similar issue trying to upgrade pbiviz version from 1.12.0 to most recent.
To make a long story short, I realized that - no matter what I tried -
it became impossible to upgrade my existing pbiviz version above 1.12.0. I've searched for solution online with no success. [sigh...] All existing information seems to have vanished in the dust... well almost...

Still the following approach worked in my case and I felt like sharing it.

So the first thing I thought was maybe it woukd be good to do a bit of cleanup of all no longer desired version including the main located under:

C:\Users\<your_username>\AppData\Roaming\npm\node_modules\powerbI-visuals-tools

I then downloaded the following .zip solution code file from Github
https://github.com/Microsoft/PowerBI-visuals-tools#readme 

unzipped the content and copied it under:

C:\Users\<your_username>\AppData\Roaming\npm\node_modules\

I usually use git clone method but I prefered using zip in this case.

Then using Windows PowerShell console with Administrator rights, I then relocated under
the root of the new pasted powerbI-visuals-tools directory and ran

npm install

That did it and I was then able to run pbiviz method afterwards and get my upgraded version. Yeeeees!

RE: There are some instructions here for this, but it's not a small job. There used to be some documentation on
this but looks like it was lost in the move to the newer doc site - you might be able to find a cache of it somewhere
(I couldn't).  For reference this was at https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/migrating-to-powerbi-visuals-tools-3-0....

You're absolutely right... but if you look closely when you click on the provided link, you'll see a first Web page untitled Migrating to powerbi-visuals-tools 3.x... displayed in a snap of a second before being redirected. Now that's interesting... I simply saved the link as html file and opened it in code editor, then removed all
JavaScript stuff and there it was.


Content may feel the content to be deprecated... still I felt it contained interesting infos...

Thanks for sharing Daniel 😉  

[Anonymous]

Hi-, Daniel, 

I ran the code you suggested. Then ran pbiviz start from powershell. 

I hope i can attach the log file. looks it is not possible. I included the log below. Maybe you can find some clue from there.   Notice thre are some library/package is not installed. I am not sure if that causes the issue. how to fix that? 

thanks

Wenlei

log

PS C:\WINDOWS\system32> cd PowerBI-visuals-CardBrowser-develop
PS C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop> npm i -g powerbi-visuals-tools@1.11
npm WARN deprecated request@2.81.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated hawk@3.1.3: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated cryptiles@2.0.5: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated boom@2.10.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated sntp@1.0.9: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated hoek@2.16.3: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated gulp-util@3.0.7: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated request@2.83.0: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.
npm WARN deprecated wreck@6.3.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated hawk@6.0.2: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated boom@4.3.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated cryptiles@3.1.4: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated sntp@2.1.0: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated boom@5.2.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
C:\Users\wcao2\AppData\Roaming\npm\pbiviz -> C:\Users\wcao2\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\bin\pbiviz.js
npm WARN notsup Unsupported engine for powerbi-visuals-tools@1.11.3: wanted: {"node":"^6.0.0"} (current: {"node":"12.16.3","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: powerbi-visuals-tools@1.11.3
npm WARN babel-eslint@10.1.0 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.

+ powerbi-visuals-tools@1.11.3
added 519 packages from 454 contributors, removed 606 packages, updated 92 packages and moved 12 packages in 157.391s
PS C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop> npm i

> powerbi-visuals-cardbrowser@1.1.5 postinstall C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop
> npm run install-private-submodule

> powerbi-visuals-cardbrowser@1.1.5 install-private-submodule C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop
> node bin/installPrivateSubmodules

Installing @uncharted/cards@0.13.9...
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
error An unexpected error occurred: "https://registry.npmjs.org/@uncharted%2fcards: Not found".
Command failed: yarn add @uncharted/cards@0.13.9 --no-lockfile --ignore-scripts
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
error An unexpected error occurred: "https://registry.npmjs.org/@uncharted%2fcards: Not found".

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\onchange\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 1042 packages in 9.861s

22 packages are looking for funding
run `npm fund` for details

found 3 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
PS C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop> pbiviz --create-cert info Certificate generated. Location is C:\Users\wcao2\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\certs\PowerBICustomVisualTest_public.pfx. Passphrase is '8195292517833723'
PS C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop> pbiviz --install-cert
info Use '8195292517833723' passphrase to install PFX certificate.
PS C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop> pbiviz start
info Building visual...
error VALIDATION Invalid API Version v1.11.0
PS C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop>

[Anonymous]

thanks, Daniel for detailed steps.  That is extremely helpful for new user. 

I will give a try and let you know. 

Wenlei