onChanged.trigger() after outputs changed

  1. My goal:
    access a child component's updated outputs in apps' javascript (e.g., child.myCurrentFoo) after the child component triggered an onChange
  2. Issue:
    My child component has a dropdown which triggers a custom JS script which at the end triggers (if given) an onChange event on parent components. However, whenever I use child.myCurrentFoo, it never changes. First, I thought it's about the JS of the child invoking onChanged.trigger before the outputs are updated, but then the 2nd call afterwards should at least reflect the previous dropdown value from the child component.

How do I need to configure my components so that this works:

Child component:
output myCurrentFoo --> {{ someVar.value }}
onChanged query input
JS script:

some validation of the dropdown value, then
if (onChanged) {
  onChanged.trigger({
    additionalScope: { ... /* also no idea how to access this in parent's JS script */    }
  });
}

Parent component:
uses child component
onChanged goes to this JS

// some code
console.log( childComponent.myCurrentFoo );  // always returns the initial value, never updated

I'm on ReTool 3.114.11, not able to update right now.

@WonkyDonky,
I can try to help you with this.
Can you please upload both your child module and parent app here so I can take a look?

ReTool doesn't make it easy, I tried to redact info and export it, but the JSON exports the complete history of edits it seems.

Anyhow, here are the child component and parent app:
CountrySwitcher.json (24.3 KB)
Untitled-15.json (34.4 KB)

Thank you for looking into this. If you run this, you can see that the console.log statements are not updating (for the parent app) the value from the switcher. The label also is not updated at all.

Kind regards,
WonkyDonky

@WonkyDonky,
Is this the behavior that you are wanting to see?

@WonkyDonky,
This is what I did:

  1. I removed the query1 from the onChanged dropdown, and then re-selected it. Not sure what was happening. For some reason, the child module was not registering that this query had been selected. So I just thought I'd reset it, and that worked.

  1. In query1, I fixed how you set your global variable (test) and then added additionalScope so you can pass that when you run your query from your child module:

Everything seems to be working fine. I hope this helps!

hey @WonkyDonky,
Just checking back to see if you needed any more help on this.

Hi,

Thank you for your replies.

The behavior as per the video is what I'd like.

The onChanged trigger likely was broken as part of moving stuff out of the actual app.

I applied the setValue, but it is not the issue. The issue is that when the JS is running, the value of countrySwitcher.currentValue is not updating like it is in your ReTool video. What version are you on? Has there been a known bug between your version and 3.114.11? I don't own our self-hosted ReTool so I'm not sure how far we currently can update (if at all).

But thank you for mentioning the additionalScope. The countrySwitcher does indeed set the additionalScope which can be accessed in the script. However, I was hoping that countrySwitcher.currentValue works as well, since the additionalScope trick seems to require that the script was invoked by the country switcher. In that case my other scripts won't necessarily have access unless I keep passing it around.

Since I'm unblocked for now we can mark this as resolved.

Thank you for your help!

Edit: Even if I use a button and try to use {{ countrySwitcher.currentValue }} it doesn't update for me (neither with console.log(country) nor when hovering over this field in the UI):
image
(trying to send additional scope to the query when triggering the button)

Hey @WonkyDonky,
I'm a little concerned that your {{ countrySwitcher.currentValue }} still doesn't update.
I tested on 3.114.11 and it worked. Try importing these two files and see if it works for you:
countrySwitcher_app_retool.json (33.6 KB)
CountrySwitcher_module_retool.json (25.5 KB)