Use module in a form

Hi folks!

I have two questions that are maybe linked.

  1. When creating a module, I can't seem to be able to properly set an output variable named value. Whatever I put in there ends up being empty from the parent app mymodule.value === ''.

  2. When using a form, it's input values are available in scripting through myform.data. Works for standard inputs, but not for module. It looks like it's trying to read .value, which as per my question 1. is always an empty string.

Solving 2 would allow me to fully use the form and send query with myform.data in the payload without having to do an intermediary script per form to include my modules values

Am I missing something? or is that a known limitation ?

Thanks!
Ulysse

Hey @devvitrum!

Happy to help here!

Would you mind sharing a screenshot of your setup so far? Are you refreshing the parent app after updating this output in the module?

Yep I refreshed the parent app, and on that topic a "sync" button like for queries in the query libraries would be handy! Sometimes I need to refresh a whole heavy app and put back in the same exact state to test my module updates, I'd love to just hit "sync"!

Sure thing, here you got a few screenshots:

Module app

  1. The problematic output value
  2. Its value is a temporary state variable
  3. That state variable (and therefore the output) is updated every time I type something in the textinput
  4. "Controlled experiment", output with a different name than value to prove that it works otherwise

Parent App

Thanks!

Hey @devvitrum!

I see, what you mean and was able to repro on my end. I'll make sure to write up a bug report and will keep this thread up to date as a fix (or possibly a better callout on naming conflicts) is merged here. In the meantime, would using a key with a different name work for your use case here?

Hi Chris,

Thanks for the reporting!

Using another naming convention works for the issue of accessing data manually like mymodule.myoutput, and it's what I've been doing for months.

I've started this post to see if I could solve 2 other (minor) issues, which were:

  1. consistency: the name of outputs of every module: uploadModule.url, localizedModule.locale, etc
  2. being able to use myform.data with modules. Currently myform.data.mymodule === ''

Hey @devvitrum — Just a couple clarifying follow up questions for your previous post:
1. consistency: the name of outputs of every module: uploadModule.url, localizedModule.locale, etc

Are you looking for standardized output naming? I believe at the moment it we intentionally allow useres to name outputs however they'd like but would be happy to hear more about your use case here.\

2. being able to use myform.data with modules. Currently myform.data.mymodule === ''

I'm not sure I fully follow here, are you looking to pass the results of a form component as an output of a module?

Hi Chris,
Sorry for the delay, got lost in the mails

  1. consistency

Chris: I believe at the moment it we intentionally allow useres to name outputs however they'd like

Almost however they like, value doesn't work. See my original post (point 1)and my post from oct5 with screenshots. You said you managed to reproduce it and proposed as a workaround to avoid to name my output variable value.
So the consistency can't be solved as all native Retool's inputs will have value and all my modules will have output1. The workaround solves consistency across module but not across the app (modules + native inputs) as I'll be mixing someinput.value (native) and somemoduleinput.output1 (module)

  1. I'm trying to get the ouput of a module to be listed in the form.data. The form is a regular form in a regular app (not module). The form has let's say 3 inputs, 2 natives and 1 module, and only the 2 natives will show up. I suspect it's because of point 1 and that the form only recognize children[].value, but this is pure speculation

Have a good day!

Ah I see, I don't believe at the moment there is any way to get the value of a module to act the same as a components input. If you are using the results of a form in an update query for example, and had some normal component outputs and some module outputs you could reference them with something like:

{{Object.assign(form.data, {moduelOutput: module.output} )}}

Since form.data is an object with keys representing inputs and values representing the corresponding values, you would just need to add the outputs of the module in this way. Do you think this could work for your use case here?