How to update variable from within a custom component

App Building
1

  • Goal: I have a custom component that needs to update the value of a global variable when clicked.

  • Steps: I've tried using the Retool.useStateString method and just calling the set function when needing to change but I don't want to update the components state. That causes weird glitches. I've tried setting a key in the component but that does not work either.

  • Details: I'm using react-plotly because the current Treemap does not support the plotly_click event and neither does the Plotly JSON chart component. And I need to get the clicked ID of the Treemap child element.

1 Like
2

I've now tried, setting a window variable which dosent work due to cross-origin issues. I've tried posting a message via postMessage which dosent get read.

1 Like
3

Hi Jordan,

I am curious about the "weird glitches" that you mention when using Retool.useStateString. Would you be able to elaborate? This is currently Retool's recommended way of getting a information sent to the app from the custom component.

I believe postMessage may have worked in the past. I will give it a test on my end as well.

4

Hi Taylor,

Some of the weirdness is that for example I am using a component which should not have the state reset unless explicitly told otherwise. But using the Retool.useStateString does cause the state to reset.

Using postMessage didin't work on my end, but I might just be doing something wrong there.

I am specifically working on a WordMap custom component using d3.js, and the idea is that when clicking on a word in the map, it runs a query in retool to update a table in the app. And I don't want the WordMap component to re-render itself which makes it look a little strange for the end user.

5

Hey @Jordan_Castro_Sauder!

I wouldn't necessarily categorize the component re-rendering as glitchy, but I can certainly appreciate that it may not be desired behavior in certain use cases.

Fortunately, there's a built-in solution! Instead of a Retool state variable, you can utilize useEventCallback. This allows you to bubble up certain events from within your component that can then be handled in Retool via defined event handlers.

image
image962×338 26.7 KB

image
image1216×742 55 KB

1 Like
6

Nice! I did not realize I could get the state of the component that way. Thank you so much!

1 Like
7

I just realized that this may not actually solve your problem, as data can't be passed with the event. :thinking:

While not ideal, the first workaround that comes to mind is to define a separate event for each element in your map, assuming you still want to avoid useStateString.