Forum Discussion
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'.
I used this, just to clarify the steps to produce these exceptions:
- pbiviz new {name}
- cd {dir to folder}
- added latest (e.g. 2.2.2) powerbi-visuals-api into dependencies of project by executing command npm install --save powerbi-visuals-api.
- added latest (e.g. 5.7.0) d3 into dependencies of project by executing command npm install --save d3.
- added latest (e.g. 5.0.1) d3 types into dependencies of project by executing command npm install --save @types/d3.
- ran npm install for good measure
- 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/) - 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;
- added these imports to ./src/settings.ts
import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils"; import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser; - 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); } - 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" ] } - 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": [] } - pbiviz start
- 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!
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 :)
1 Reply
- mrogunlanaFrequent Visitor
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 :)