cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
mrogunlana
Frequent Visitor

Custom Visual Setup Exceptions (pbi-visuals-api 2.2.2, pbi-visuals-utils-dataviewutils 1.5.0)

HI All,

 

I get the following exception when running pbiviz on a new visual

c:\Projects\visuals\powerbi\test2>pbiviz start
info Building visual...
error TYPESCRIPT /visualPlugin.ts : (8,103) Property 'visual' does not exist on type 'typeof extensibility'.

 

used this, just to clarify the steps to produce these exceptions:

  1. pbiviz new {name}
  2. cd {dir to folder}
  3. added latest (e.g. 2.2.2) powerbi-visuals-api into dependencies of project by executing command npm install --save powerbi-visuals-api.
  4. added latest (e.g. 5.7.0) d3 into dependencies of project by executing command npm install --save d3.
  5. added latest (e.g. 5.0.1) d3 types into dependencies of project by executing command npm install --save @types/d3.
  6. ran npm install for good measure
  7. removed all modules definitions from each file of source code (e.g. from ./src/visual.ts and ./src/settings.ts
    module powerbi.extensibility.visual {...}
    (see "Changes inside of the visuals sources" here: https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/migrating-to-powerbi-visuals-tools-3-0...)
  8. added these imports to ./src/visual.ts for interfaces and classes
    import powerbi from "powerbi-visuals-api";
    import IViewport = powerbi.IViewport;
    import IVisualHost = powerbi.extensibility.visual.IVisualHost;
    import DataViewMetadataColumn = powerbi.DataViewMetadataColumn;
    import DataViewMetadata = powerbi.DataViewMetadata;
    import PrimitiveValue = powerbi.PrimitiveValue;
    import VisualObjectInstance = powerbi.VisualObjectInstance;
    import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
    import DataViewObjectPropertyIdentifier = powerbi.DataViewObjectPropertyIdentifier;
    import DataView = powerbi.DataView;
    import ValueTypeDescriptor = powerbi.ValueTypeDescriptor;
    import Fill = powerbi.Fill;
    import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
    import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
    import DataViewPropertyValue = powerbi.DataViewPropertyValue;
    import SortDirection = powerbi.SortDirection;
    import IVisual = powerbi.extensibility.visual.IVisual;
    import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
  9. added these imports to ./src/settings.ts
    import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";
    import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;
  10. removed settings specific functions
    private static parseSettings(dataView: DataView): VisualSettings {
                return VisualSettings.parse(dataView) as VisualSettings;
            }
    
            /** 
             * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the 
             * objects and properties you want to expose to the users in the property pane.
             * 
             */
            public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
                return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
            }
  11. updated tsconfig to:
    {
      "compilerOptions": {
        "allowJs": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "ES6",
        "module": "amd",
        "sourceMap": true,
        "outDir": "./.tmp/build/",
        "moduleResolution": "node"
      },
      "files": [
        ".api/v2.2.0/PowerBI-visuals.d.ts",
        "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
        "node_modules/powerbi-visuals-api/index.d.ts",
        "src/settings.ts",
        "src/visual.ts"
      ]
    }
  12. updated pbiviz.json to: 
    {
      "visual": {
        "name": "test2",
        "displayName": "test2",
        "guid": "test22E2F85DEE16141ED87144301F2DFC4C8",
        "visualClassName": "Visual",
        "version": "1.0.0",
        "description": "",
        "supportUrl": "",
        "gitHubUrl": ""
      },
      "apiVersion": "2.2.0",
      "author": {
        "name": "",
        "email": ""
      },
      "assets": {
        "icon": "assets/icon.png"
      },
      "externalJS": [
        "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
        "node_modules/powerbi-visuals-api/index.js",
        "node_modules/d3/d3.min.js"
      ],
      "style": "style/visual.less",
      "capabilities": "capabilities.json",
      "dependencies": "dependencies.json",
      "stringResources": []
    }
  13. pbiviz start
  14. Exception is shown

 

For the full source code to this example, goto: https://github.com/mrogunlana/powerbi-2.2.0-example

 

Thank you for your help in advance!

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
mrogunlana
Frequent Visitor

Re: Custom Visual Setup Exceptions (pbi-visuals-api 2.2.2, pbi-visuals-utils-dataviewutils 1.5.0)

Ok, I answered my own question: for all those risk takers out there willing to take a deep dive into powerbi-visuals-tools 3.0, but have an older version installed pay close attention to this article: https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/migrating-to-powerbi-visuals-tools-3-0... with special emphasis on the section titled: "How to install powerbi-visuals-tools@beta"

 

What this article fails to mention is that if you have an existing version of the tools installed globally on npm, instead of simply running the command:

 

 

npm install powerbi-visuals-tools@beta

 

 

You must update your global instance as well with: 

 

 

npm install powerbi-visuals-tools@beta -g

 

Make sure you includ the global flag "-g" to update your local toolset. Then, create a new visual like so:

pbiviz new {name}

and run it with the following command: 

 

npm run start

 

and you will see the new webpack runner in the command window.

 

**note: I had to update my security certificate as well with:

 

pbiviz --install-cert

follow the prompts after you run this command and you should be good to go. Hopefully this helps someone 🙂

 

 

 

 

 

 

 

View solution in original post

1 REPLY 1
Highlighted
mrogunlana
Frequent Visitor

Re: Custom Visual Setup Exceptions (pbi-visuals-api 2.2.2, pbi-visuals-utils-dataviewutils 1.5.0)

Ok, I answered my own question: for all those risk takers out there willing to take a deep dive into powerbi-visuals-tools 3.0, but have an older version installed pay close attention to this article: https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/migrating-to-powerbi-visuals-tools-3-0... with special emphasis on the section titled: "How to install powerbi-visuals-tools@beta"

 

What this article fails to mention is that if you have an existing version of the tools installed globally on npm, instead of simply running the command:

 

 

npm install powerbi-visuals-tools@beta

 

 

You must update your global instance as well with: 

 

 

npm install powerbi-visuals-tools@beta -g

 

Make sure you includ the global flag "-g" to update your local toolset. Then, create a new visual like so:

pbiviz new {name}

and run it with the following command: 

 

npm run start

 

and you will see the new webpack runner in the command window.

 

**note: I had to update my security certificate as well with:

 

pbiviz --install-cert

follow the prompts after you run this command and you should be good to go. Hopefully this helps someone 🙂

 

 

 

 

 

 

 

View solution in original post

Helpful resources

Announcements
Announcing the New Spanish Forum

Announcing the New Spanish Forum

Do you need help in Spanish? Check out our new Spanish community section.

April 2020 Community Highlights

April 2020 Community Highlights

Info on our Super Users, MBAS content and badges, and updates to our support articles. - Read the full Community Highlights.

MBAS Gallery 2020

MBAS Gallery 2020

Watch Microsoft Business Applications Summit sessions on-demand.