Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
6 years ago

need your expertise on Modifying custom visual

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

 

 

 

 

 

 

 

 

 

Need Help

4 Replies

  • dm-p's avatar
    dm-p
    Super User
    6 years ago

    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 [email protected]

     

     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's avatar
      MawashiKid2
      Advocate I
      5 years ago

      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's avatar
      Anonymous
      Not applicable
      6 years ago

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

      I will give a try and let you know. 

       

      Wenlei

    • Anonymous's avatar
      Anonymous
      Not applicable
      6 years ago

      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 [email protected]
      npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
      npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
      npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
      npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
      npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
      npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
      npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
      npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
      npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
      npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
      npm WARN deprecated [email protected]: 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 [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
      npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
      npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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 [email protected]: 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: [email protected]
      npm WARN [email protected] requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.

      + [email protected]
      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

      > [email protected] postinstall C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop
      > npm run install-private-submodule


      > [email protected] install-private-submodule C:\WINDOWS\system32\PowerBI-visuals-CardBrowser-develop
      > node bin/installPrivateSubmodules

      Installing @uncharted/[email protected]...
      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/[email protected] --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: [email protected] (node_modules\onchange\node_modules\fsevents):
      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
      npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
      npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents):
      npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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>