Custom visual showing in PBI web service, but not PBI Desktop

[vizdata]

Hello, I've created the most basic custom visual - i.e. the one that comes bundled into myTestVisual folder, which says "Update count: 0". I can see it via https://app.powerbi.com but not when I use powerBI desktop and not in localhost:8080.

Also, localhost:8080 doesn't launch when I type pbiviz start in the CLI, which might be connected.

I'm using a corporate system. I have previously created custom visuals fine on my personal machine. PBI Desktop is version 2.46. I can't sign up for PBI web service at work so I'm using a personal account temporarily. But I need to use localhost and Desktop going forwards.

Power BI Desktop: When I import the custom visual into PBI Desktop and then click on the spanner/screwdriver symbol, I see the static placeholder image. I get similar images when I click other graphics, e.g. Donut Chart. These graphics require data to show anything. But even if I try adding data to the custom visual, it just shows the placeholder. (No data is required in the web service version of PBI - the image just shows straight away.)

Localhost: The error I'm getting in IE11 & FF52 is from line 37 of visual.ts: this.target=options.element. "Unable to get property element of undefined". But surely the same variable is used in app.powerbi.com, where it's working fine. I get this line in the console: plugin myTestVisualDC00AEEDDF6D475989B6E1D88E1A21DF_DEBUG.

Can anyone help? Thanks

[v-viig]

Hello @vizdata

I suppose that there's an unexpected exception that you custom visual throws.

Could you please share source code of your visual if it's possbile?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[vizdata]

Hi Ignat,

Thanks for your reply.

I'm just using the sample visual that comes when you create a new custom visual.

Edit 1630 UK time. I've now replicated the bar chart here: https://github.com/Microsoft/PowerBI-visuals-sampleBarChart

It's working in app.powerbi.com but, again, not in Desktop. It gives me a blank image, rather than the placeholder image. So I don't see that it can be a one-off code problem in the original file. End of edit

Custom visual in Power BI Desktop

These are my steps:

1. CLI ==> pbiviz new test1

2. CLI ==> cd test1

3. CLI ==> pbiviz start (results: localhost:8080 shows nothing because the variable "options" is undefined; app.powerbi.com works fine when clicking the developer visual)

4. CLI ==> pbiviz package

5. PBI Desktop ==> new report

6. PBI Desktop ==> click the three dots > import a custom visual > navigate to test1.pbiviz

7. PBI Desktop ==> click default icon.png that has appeared in Visualisations pane > static image appears. I cannot see "Update count" or anything.

Here are the contents of visual.ts. If you'd like another file instead please say. All versions are up to date as I only downloaded them this week via npm.

module powerbi.extensibility.visual {
    "use strict";
    export class Visual implements IVisual {
        private target: HTMLElement;
        private updateCount: number;
        private settings: VisualSettings;
        private textNode: Text;

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            this.target = options.element;
            this.updateCount = 0;
            if (typeof document !== "undefined") {
                const new_p: HTMLElement = document.createElement("p");
                new_p.appendChild(document.createTextNode("Update count:"));
                const new_em: HTMLElement = document.createElement("em");
                this.textNode = document.createTextNode(this.updateCount.toString());
                new_em.appendChild(this.textNode);
                new_p.appendChild(new_em);
                this.target.appendChild(new_p);
            }
        }

        public update(options: VisualUpdateOptions) {
            this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
            console.log('Visual update', options);
            if (typeof this.textNode !== "undefined") {
                this.textNode.textContent = (this.updateCount++).toString();
            }
        }

        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);
        }
    }
}

I understand that developer visual is only available in the app. But surely my packaged .pbiviz file should work in Desktop? I have downloaded a .pbiviz file from the Office Store and that works just great.

I can only think it's something to do with my corporate set up. This morning, my custom visual that was working yesterday in app.powerbi.com no longer worked. I had to start from scratch. So maybe something happened overnight. Is there any way I can test this theory?

Thanks for any help,

Emma

[v-viig]

Have you filled data-fields as shown in the screenshot below?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[vizdata]

Hi Ignat,

Thank you for your reply. I am using the sample graphic ("update count: 0"), which does not require any data fields. This graphic works fine in app.powerbi.com without any fields. I have, however, tried dragging data fields into the imported custom visual within Power BI Desktop and it doesn't work.

Power BI Desktop works with .pbiviz downloaded from the internet, but not those I have created myself, it seems.

Thanks

Emma

[v-viig]

The update count example works well for me in Power BI Desktop 2.51.4885.581 64-bit (October 2017).

Could you please clarify version of Power BI Desktop that you use?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[v-chuncz-msft]

@vizdata,

The debug visual is currently only available in the PowerBI Service. The packaged visuals will still work everywhere.

https://github.com/Microsoft/PowerBI-visuals-tools/issues/28