cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
CoderMonish
Frequent Visitor

Custom PowerBI Visual is showing data Even after the DataField has been removed

Hi Everyone,

 

I have created my first custom PowerBI visual using the below microsoft sample tutorial -

https://docs.microsoft.com/en-us/power-bi/developer/visuals/develop-circle-card


However, I observe that even after I remove the datafield associated with the visual, the custom visual is still showing the old/earlier data. For eg: When I add the 'Sales' field in the custom visual, it shows 340. Now when I remove it, the old data 340 is still being shown in the custom visual.

 

Can you please help how can this be fixed ? Does any additional code or logic required ? Or is it a bug ?
Note : When I run the 'pbiviz -V' command, it returns 3.1.15

 

I am posting the code inside the update function (directly taken from the tutorial provided by Microsoft in the link mentioned above) -

 

    public update(optionsVisualUpdateOptions) {
        console.log('Visual update'options);
        let dataViewDataView = options.dataViews[0];
        
        let widthnumber = options.viewport.width;
        let heightnumber = options.viewport.height;
        this.svg.attr("width"width);
        this.svg.attr("height"height);
        let radiusnumber = Math.min(widthheight) / 2.2;
        this.circle
            .style("fill""white")
            .style("fill-opacity"0.5)
            .style("stroke""black")
            .style("stroke-width"2)
            .attr("r"radius)
            .attr("cx"width / 2)
            .attr("cy"height / 2);
        let fontSizeValuenumber = Math.min(widthheight) / 5;
        this.textValue
            .text(<string>dataView.single.value//.text("Value")
            .attr("x""50%")
            .attr("y""50%")
            .attr("dy""0.35em")
            .attr("text-anchor""middle")
            .style("font-size"fontSizeValue + "px");
        let fontSizeLabelnumber = fontSizeValue / 4;
        this.textLabel
            .text(dataView.metadata.columns[0].displayName//.text("Label")
            .attr("x""50%")
            .attr("y"height / 2)
            .attr("dy"fontSizeValue / 1.2)
            .attr("text-anchor""middle")
            .style("font-size"fontSizeLabel + "px");
    }
1 ACCEPTED SOLUTION
CoderMonish
Frequent Visitor

Hi Everyone,

 

I found that once I package the custom visual, it works fine.

 

Once I package the custom visual, and then import the custom visual in PBI Desktop, I can see that above issue is no longer faced.

 

For example : when I add the 'Sales' field in the custom visual, it shows 340.

Now when I remove the 'Sales field', the default landing page is shown (as it should have been).

 

View solution in original post

3 REPLIES 3
CoderMonish
Frequent Visitor

Hi Everyone,

 

I found that once I package the custom visual, it works fine.

 

Once I package the custom visual, and then import the custom visual in PBI Desktop, I can see that above issue is no longer faced.

 

For example : when I add the 'Sales' field in the custom visual, it shows 340.

Now when I remove the 'Sales field', the default landing page is shown (as it should have been).

 

View solution in original post

dm-p
Super User I
Super User I

Hi @CoderMonish,

From the looks of your code, there is nothing in the update method to handle what happens for this scenario. Without all the code and project files it's hard to test with 100% certainty, but what I'm largely confident is happening is this:

 

  • Adding a measure will run the update method normally.
  • Once this has run successfully, removing the measure will again trigger the update method, but this time this line of code will likely be failing, as the dataView no longer exists and it's pointing to a non-existent object:

 

.text(<string>dataView.single.value)

 

  • At this point the update function will stop running and your visual appears as it did previously, as the method chain you're calling won't complete.

The SDK 'consumes' errors, so you will need to write your own code to report or handle these situations. If you surround the body of your update method's code with a try ... catch block, you'll probably be able to see this error in your browser's developer console.

To do the bare minimum to make this pass through to completion, you could use optional chaining on any statements that access the dataView so that if a property doesn't exist then the code will not silently fail. You could then add a nullish coalescing operator to display a "placeholder" value if that statement has no result, e.g.:

    public update(options: VisualUpdateOptions) {
        ...
        this.textValue
            .text(<string>dataView?.single?.value ?? "(blank)") 
            ...
        this.textLabel
            .text(dataView?.metadata?.columns?.[0]?.displayName ?? "[No Measure]")
            ...
    }

If you want the visual to clear down or display something else in the absence of any data, you'd need to write an appropriate statement to check the dataView and update the visual's DOM accordingly.

Good luck,

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)




CoderMonish
Frequent Visitor

Hi Daniel,

Thank you very much for reply. I am actually stuck and do not know how to proceed next. And this being a most basic sample, I hope to get this fixed soon with your and others help.

 

I tried below things based on your above comments, however I still face the same issue -

1) I added the try-catch block

2) I replaced the this.textValue & this.textLabel with optional chaining as you mentioned earlier.

 

Observation 1 : I observed that when I remove the 'Sales' measure, the last
line of the try block is getting executed successfully. So, it seems that no exception is being thrown.

Observation 2 : I am printing the 'options' variable in the last line of the try block. When I check in the Developer console, we can see that dataviews has data in it. However, the ONLY change I could notice was that dataviews[0].metadata.segment is having value 'undefined'.

 

Developer console after removing the measureDeveloper console after removing the measure

 

Do you want me to share the visual.ts file with you ? Can you try reproducing the issue at your end,
since I am using the basic code provided in the Microsoft tutorial itself.

 

Thank you once again for your help.

 

High-level changes are as mentioned below -

public update(options: VisualUpdateOptions) {

          try {

                //code for re-drawing the visual

              this.textValue
                    .text(<string>dataView?.single?.value ?? "(blank)")
              // some more code . . .
             this.textLabel
                    .text(dataView?.metadata?.columns?.[0]?.displayName ?? "[No Measure]")
            //some more code . . . 

     

        console.log('Visual update', options);
        console.log('I reached end of try block !!')
}

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
Top Kudoed Authors