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

[CoderMonish]

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(options: VisualUpdateOptions) {

        console.log('Visual update', options);

        let dataView: DataView = options.dataViews[0];

        let width: number = options.viewport.width;

        let height: number = options.viewport.height;

        this.svg.attr("width", width);

        this.svg.attr("height", height);

        let radius: number = Math.min(width, height) / 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 fontSizeValue: number = Math.min(width, height) / 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 fontSizeLabel: number = 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");

    }

[CoderMonish · Accepted solution]

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

[dm-p]

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

[CoderMonish]

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 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 !!')
}