How to trigger action within a custom component from outside of it?

App Building
1

You can easily trigger a Retool query from within a custom component. And you can have other effects on the outside via modelUpdate. But what about the other way around, how do you trigger a function that is within your custom component from outside of it?

I assume you need to first put a reactive value into the model like so:

{
  "beeping": {{Beeping.value}},
  "title": "Hello World!"
}

So how do I run myFunction() when model.beeping changes?

2

Bumping this to get some new eyeballs.

3

I think the model subscription (mentioned here) will help with this component being triggered when a value changes. However, it still might not some the Audio context issue of being suspended until user interaction.
One solution to this is using the video player with your audio URL. We recently added the .play() and .pause() functions (among many others), which allows for this to be triggered from another query. You can hide the controls to this which makes the component hidden.

3030×1646 280 KB



4

Yeah, I think the model subscription will do the trick!

Also, good idea on the sound. I did not know it could just play audio. What file formats can I throw at it?

5

Looks like it has built-in support for most of the popular hosting sites (Youtube, Facebook, Soundcloud, Vimeo, Twitch, etc, etc). But more generally it's looking for a Mediastream object or array of mediastream objects!

6

@ben,

I almost works. If I .play() the video from within a js query, it starts for a split second and then stops as soon as the query is done executing.

I have a query (which does nothing) set to run every second which triggers the js query which will .play() the video if a countdown (stored in a temp state) has hit 0.

7

Alright, I got it working. I had all of my timers in a Listview and I had the video player in there as well so each timer could have its own sound selected. I took it out and it is working now. I guess if I want each time to have its own sound, I need to architect it differently. Also, the video player will not work if Hidden = true and I don't want the players cluttering my app. I may try some custom CSS for that.

Edit: CSS worked for keeping video player functional and invisible, but now I have to remember it's there! (sndAlarm is the name of the component):

._retool-container-sndAlarm {
  display: none
}
1 Like