Add event handlers to Modules

💬 App Building
1
  1. My goal: Using event handlers to control change in modules from parent app
  2. Issue: I am not seeing any options to add event handlers to modules
  3. Steps I've taken to troubleshoot: I tried module input queries but they only allow to call a query inside the module.
  4. Additional info: (Cloud or Self-hosted, Screenshots)
3

Hello @bailakahn! Welcome to the Retool Community!

I see you mentioned using the module inputs but couldn’t get them to dynamically update a module without triggering a query. It seems like the inputs will dynamically render, so you could use them to adjust module component states. What exactly are you trying to control in the module?

module truthiness

^– This is a checkbox component in a parent app, changing some text in an embedded module.

4

Hello @pyrrho,

Thank you very much for your answer.

Yes inputs are very usefull for the module state and anything inside the module.

But Since I want to use my module into other apps, I want to be able detect any change in the module output and perform an action.

Example: I created a select module and use it in another app. Every time that select changes, I want to refresh the data I am displaying in that app.

5

You should be able to render changes from the module output in a transformer instead of an event handler. Using the module outputs can directly update an App’s objects (as below):

image
image1288×263 5.11 KB

image
image1284×309 11.8 KB

Here the selection is within the module but the text above showing the selection is in the app. Using the output in a Transformer allows you to control app states in one place rather than in each individual component. In my above example, I used the module output (I named it fruitOut):

image
image309×122 4.78 KB

This is fine for one or two components, but it becomes a bit more manageable sometimes to see those outputs (and possibly other module outputs in one place. Hence, the transformer:

image
image1476×446 40.4 KB

Transformers re-process/render after any used component values (my module output in this case) change. If I select a new option in the module, the transformer updates and any components in the app (the fruitText field in this case) which are using the transformer.

If you need to trigger an app query to run after a change then you can use the transformer value (or module output value directly) within the query and set the Run Behavior to Automatic.

2 Likes