Power BI Custom Visual with React - Issue with component.tsx and update()

[Andrelele]

hello dear people,

in Power BI Custom Visual I try to develop a table with React and Tailwindcss. I followed along a tutorial from Microsoft to create a react-based custom visual.

https://learn.microsoft.com/en-us/power-bi/developer/visuals/create-react-visual

To test my custom visual I’m using the US Sales Analysis report in Power BI, which is provided in one of Microsoft’s Docs for Power BI. 

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

Unfortunately my react component cannot get all the data from the Data Pane of Power BI.

Let me show you with some examples.

 

This is what my custom visual looks like without any data selected. I paused the auto reload for it.

After I select one of the data like "Quantity" and click auto reload, the visual won't be rendered as shown in the following image.

In my sourcecode I tried to debug my problem with console.log() in my component.tsx

and visual.ts

You can look for more in my Github repository here, https://github.com/Andrelelele/power_bi_custom_visual_table_react

What makes me curious is that only update() in visual.ts outputs the console.log("#### update!!!") if I click auto reload.

When I click the refresh button I get a part of my console.log() in component.tsx

but not the other console.log() in component.tsx as shown below

I selected "Quantity" but it is not set as a name as the header.

I do this because I need the data to dynamically construct my table with rows and columns in my react component.

I hope you can help me with my issue.

Kind regards,

Andrelele

[dm-p · Accepted solution]

Hi @Andrelele,

The tutorial uses the single mapping (as defined in this step). This only ever returns a single value, as would be expected for something like a card.

If you want your visual to retrieve more data, you will need to choose the appropriate mapping type, define it in your capabilities and then extract and map using your code. Depending on you you want your visual to work, table might be the easiest one to start with in terms of understanding how data is sent and how you need to process it.

Good luck!

Daniel

[Andrelele]

Thank you very much!