cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
yf569 Helper I
Helper I

pbiviz package Error

I am trying to add tooltip to my R visual. I tried following some tutorials such as

https://radacad.com/interactive-map-using-r-and-power-bi-create-custom-visual-part-1

https://towardsdatascience.com/custom-html-visuals-in-power-bi-using-r-2b0494894ff

 

But when I tried 'pbiviz package' in node, I got the following error message. It took me many days but I am still able to find a solution.

 

 

error msg.png

1 ACCEPTED SOLUTION

Accepted Solutions
yf569 Helper I
Helper I

Re: pbiviz package Error

So I got an answer from Microsoft support team. We need to replace NodeListOf with HTMLCollectionOf in visual.ts.

View solution in original post

19 REPLIES 19
yf569 Helper I
Helper I

Re: pbiviz package Error

And it happens even when I do not change anything in the script r file. I've also attached my visual.ts code.

script.r.png

 

/*
* Power BI Visual CLI
*
* Copyright (c) Microsoft Corporation
* All rights reserved.
* MIT License
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the ""Software""), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
"use strict";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import IViewport = powerbi.IViewport;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;

import { VisualSettings } from "./settings";
import { ParseElement, ResetInjector, RunHTMLWidgetRenderer } from "./htmlInjectionUtility";

enum VisualUpdateType {
Data = 2,
Resize = 4,
ViewMode = 8,
Style = 16,
ResizeEnd = 32,
All = 62,
}

// below is a snippet of a definition for an object which will contain the property values
// selected by the users
/*interface VisualSettings {
lineColor: string;
}*/

// to allow this scenario you should first the following JSON definition to the capabilities.json file
// under the "objects" property:
// "settings": {
// "displayName": "Visual Settings",
// "description": "Visual Settings Tooltip",
// "properties": {
// "lineColor": {
// "displayName": "Line Color",
// "type": { "fill": { "solid": { "color": true }}}
// }
// }
// }

// in order to improve the performance, one can update the <head> only in the initial rendering.
// set to 'true' if you are using different packages to create the widgets
const updateHTMLHead: boolean = false;
const renderVisualUpdateType: number[] = [
VisualUpdateType.Resize,
VisualUpdateType.ResizeEnd,
VisualUpdateType.Resize + VisualUpdateType.ResizeEnd
];

export class Visual implements IVisual {
private rootElement: HTMLElement;
private headNodes: Node[];
private bodyNodes: Node[];
private settings: VisualSettings;

public constructor(options: VisualConstructorOptions) {
if (options && options.element) {
this.rootElement = options.element;
}
this.headNodes = [];
this.bodyNodes = [];
}

public update(options: VisualUpdateOptions): void {

if (!options ||
!options.type ||
!options.viewport ||
!options.dataViews ||
options.dataViews.length === 0 ||
!options.dataViews[0]) {
return;
}
const dataView: DataView = options.dataViews[0];
this.settings = Visual.parseSettings(dataView);

let payloadBase64: string = null;
if (dataView.scriptResult && dataView.scriptResult.payloadBase64) {
payloadBase64 = dataView.scriptResult.payloadBase64;
}

if (renderVisualUpdateType.indexOf(options.type) === -1) {
if (payloadBase64) {
this.injectCodeFromPayload(payloadBase64);
}
} else {
this.onResizing(options.viewport);
}
}

public onResizing(finalViewport: IViewport): void {
/* add code to handle resizing of the view port */
}

private injectCodeFromPayload(payloadBase64: string): void {
// inject HTML from payload, created in R
// the code is injected to the 'head' and 'body' sections.
// if the visual was already rendered, the previous DOM elements are cleared

ResetInjector();

if (!payloadBase64) {
return;
}

// create 'virtual' HTML, so parsing is easier
let el: HTMLHtmlElement = document.createElement("html");
try {
el.innerHTML = window.atob(payloadBase64);
} catch (err) {
return;
}

// if 'updateHTMLHead == false', then the code updates the header data only on the 1st rendering
// this option allows loading and parsing of large and recurring scripts only once.
if (updateHTMLHead || this.headNodes.length === 0) {
while (this.headNodes.length > 0) {
let tempNode: Node = this.headNodes.pop();
document.head.removeChild(tempNode);
}
let headList: NodeListOf<HTMLHeadElement> = el.getElementsByTagName("head");
if (headList && headList.length > 0) {
let head: HTMLHeadElement = headList[0];
this.headNodes = ParseElement(head, document.head);
}
}

// update 'body' nodes, under the rootElement
while (this.bodyNodes.length > 0) {
let tempNode: Node = this.bodyNodes.pop();
this.rootElement.removeChild(tempNode);
}
let bodyList: NodeListOf<HTMLBodyElement> = el.getElementsByTagName("body");
if (bodyList && bodyList.length > 0) {
let body: HTMLBodyElement = bodyList[0];
this.bodyNodes = ParseElement(body, this.rootElement);
}

RunHTMLWidgetRenderer();
}

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

yf569 Helper I
Helper I

Re: pbiviz package Error

So I got an answer from Microsoft support team. We need to replace NodeListOf with HTMLCollectionOf in visual.ts.

View solution in original post

Highlighted
Anonymous
Not applicable

Re: pbiviz package Error

@yf569 

Hello, I got the same error as yours but  I didn't see any change from your code of changing NodeListOf to HTMLCollectionOf, could you please teach me how to do it?

 

Thanks.

Anonymous
Not applicable

Re: pbiviz package Error

@yf569 For me I just Ctrl+F to find the NodeListOf and replace with HTMLCollectionOf, is this correct?

Super User I
Super User I

Re: pbiviz package Error

Hi @Anonymous - this post has the locations in src/visual.ts where the changes need to be applied.





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!




JNahar
Frequent Visitor

Re: pbiviz package Error

Hi @dm-p ,

 

I had the same error while running pbiviz package. I followed your instruction and changed NodeListOf by HTMLCollectionOf in visual.ts file. Now I got the following error. I am very new to Power BI and working on fixing this error for the last 2 days. I am glad that I have a new error at this point:). I really appreciate any suggestion of how to fix the error with 'Author_name', "Author_email" and "Visual_Description".pbiviz_error.JPGpbiviz_error

Thanks in advance.

Super User I
Super User I

Re: pbiviz package Error

Hi @JNahar,

You will need to edit pbiviz.json in the root folder of your visual and fill in the following fields:

  • author.name
  • author.email
  • visual.description
  • visual.supportUrl

These just have to have something in them otherwise the visual will not package correctly. Leila Etaati has an section on this in her blog post, under What is New in 2019 towards the bottom of the article if you need a visual guide.

If you're having trouble after this, add the contents of your pbiviz.json file here (or PM me) and I'll provide you with some examples.

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!




JNahar
Frequent Visitor

Re: pbiviz package Error

Hi Daniel @dm-p ,

 

Thank you so much for your reply. I updated the pbiviz.json file with all the required information. Now I can successfully run pbiviz package command and its created a visual. I was following Leila's youtube video for installing the package. I am glad that now I have her blogpost article. Thanks again. Hopefully, I can work with the visual from now on. I will definitely PM you if anything comes up later. 

 

Thank you so much again and I really appreciate your help. 

 

Best Regards,

Nahar 

 

 

Anonymous
Not applicable

Re: pbiviz package Error

@dm-p 

Hi, thanks for your reply. I just got a new question, I edited the pbiviz.json about author name and email, and I followed the Leilla's blog, it works, but what is the supportUrl and githubUrl part? How can I edit these two parts and create my own plot?

 

I will be appreciated.

Helpful resources

Announcements
Announcing the New Spanish Forum

Announcing the New Spanish Forum

Do you need help in Spanish? Check out our new Spanish community section.

MBAS Gallery 2020

MBAS Gallery 2020

Watch Microsoft Business Applications Summit sessions on-demand.

‘Better Together’ Integration Forum Launch

‘Better Together’ Integration Forum Launch

We've launched a how-to forum where you can learn about how Power BI integrates with other Power Platform products.