Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The ultimate Microsoft Fabric, Power BI, Azure AI & SQL learning event! Join us in Las Vegas from March 26-28, 2024. Use code MSCUST for a $100 discount. Register Now

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
mrogunlana
Frequent 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 🙂

 

 

 

 

 

 

 

View solution in original post

1 REPLY 1
mrogunlana
Frequent 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 🙂

 

 

 

 

 

 

 

Helpful resources

Announcements
Fabric Community Conference

Microsoft Fabric Community Conference

Join us at our first-ever Microsoft Fabric Community Conference, March 26-28, 2024 in Las Vegas with 100+ sessions by community experts and Microsoft engineering.