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

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
jcastro296
Frequent Visitor

@dm-p  @yf569  @Anonymous Hello, I would like to ask you to please help me with this error, as I understand it has to do with the visualPlugin.ts, can you help me fix it. Thank you very much.

 

Captura.PNG

 

Hi @jcastro - this appears to be an issue recently introduced into babel which is one of the dependencies the SDK relies on. None of my visuals will currently build either 😞

I'll try to put together a bug report for the custom visuals team. Will come back if I can find a workaround.




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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




jcastro296
Frequent Visitor

Thank you, I recommend it because I have been looking for an answer for two days and not a survey. Thank you so much

Hi @jcastro296 - I've raised an issue in their repo. I've also emailed their support with details, so hopefully the visuals team can have a look at it pretty quickly. I've spent the last couple of hours trying to find a solution and can't come up with anything, unfortunately 😞





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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




jcastro296
Frequent Visitor

@dm-p Thank you very much, what you do is very useful, I am pending any solution. Thank you very much you are very kind.

No probs! Thanks for flagging initially. There's a new version available now and you should be good if you're just trying to package. However, I can't get the dev server certificate to generate normally, which is a bit of a problem if you use the developer visual for debugging. Here's the issue for that one, and I have a somewhat clunky workaround for that on there.





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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




jcastro296
Frequent Visitor

@dm-p Thank you very much, seriously you are very kind. You know how to make the custom graphic created work with the filters that I have in power bi?

Hi @jcastro296 - I don't really work with the R-side of things in custom visuals, so I'm not sure I fully understand what you're asking, without additional context. Additionally, this is now becoming a separate discussion, and not fully relevant to this particular resolved topic.

I'm happy to see if I can help, but I would suggest creating a topic specifically for your issue, with as much detail as possible. Please read the following post for more details on how to best do this.

This will also help improve the visibility of your challenge for other users who may be more knowledgeable in the R domain than I am (not many people will typically revisit resolved threads).

Regards,

Daniel

 

 





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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Anonymous
Not applicable

@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

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

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!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Anonymous
Not applicable

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_errorpbiviz_error

Thanks in advance.

Hi @Anonymous,

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!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Anonymous
Not applicable

@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.

Hi @Anonymous 

supportUrl and githubUrl are optional, but should be filled out if you submit your visual to the marketplace. You aren't contingent on them for any local development work, particularly if just starting out.

  • supportUrl is the URL that gets linked in the listing, e.g.:
    image.png
  • githubUrl is a place for you to provide a link to your source code, if you want share with people who are interested in exploring your visual's source further, or the custom visuals team to review code if you want to submit for certification.

Both of these can be the same value also, for example, if you host your visual's support documentation in the code repository your source code is contained in. My currently published visuals do this.

Hopefully this clears those questions up.

Regards,

Daniel





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

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Anonymous
Not applicable

 

@dm-p Hi Daniel,

 

Thanks so much for your help, my problem was solved successfully. 

 

Appreciated!!

Anonymous
Not applicable

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 

 

 

yf569
Helper I
Helper I

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

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

View solution in original post

Helpful resources

Announcements
PBI User Groups

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are You Ready?

Test your skills now with the Cloud Skills Challenge.

Top Solution Authors