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

[mrogunlana]

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'.

I 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!

[mrogunlana · Accepted solution]

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 🙂