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
March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

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.

Fabric Partner Community

Microsoft Fabric Partner Community

Engage with the Fabric engineering team, hear of product updates, business opportunities, and resources in the Fabric Partner Community.