Reply
Frequent Visitor
Posts: 3
Registered: ‎11-30-2018
Accepted Solution

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!


Accepted Solutions
Highlighted
Frequent Visitor
Posts: 3
Registered: ‎11-30-2018

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 Smiley Happy

 

 

 

 

 

 

 

View solution in original post


All Replies
Highlighted
Frequent Visitor
Posts: 3
Registered: ‎11-30-2018

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 Smiley Happy