How to write and use a JS function that accepts input parameters?

Hi all,

Is there a way to write a JS function that accepts input so I can reuse it in several places in my application?

For example, if I wanted a function that looks like this:

function feetToInches(feet) { return feet * 12 }

(the real function is much more complicated than this)

And then in my components I could reuse this function with different input values every time.
Is this possible?

I tried using Javascript Queries/Transformers but they don't accept inputs as parameters, they can only use existing state like a specific query result.

Thanks

Yes use a temp state.

for each input you could replace the temp state value (name it state1) with that input
and then in the js query you can set it to return
{{state1 * 12}}
but you wouldn't need the js if you simply want to display {{state1 * 12}} you can just add that in a default value field of another component (text, a column of a table..etc..)
if you can add more details and screenshots, I can reproduce it for you if you want

Thank you for your answer.

To be clear, the example I gave of multiplying by 12 is much simpler than my real use case, which is about 15 lines long.

I think the "temp state" solution won't work for me because I need to display several results of the function simultaneously, so I need more than 1 global input.

I find it really weird that I can't simply define a function...

Use a Javascript function like explained here:

https://docs.retool.com/docs/custom-js-code#application-specific-preloaded-javascript

This is what it would like like for your example, notice the syntax change from function feetToInches(feet) to window.feetToInches = function(feet)

Then you just call the feetToInches() function normally any place in Retool that can do Javascipt, like here where I am using a function as a column value:

If you want to use the same function in your entire organization, you can put it in the your orgs' Settings/Advanced/Preloaded Javascript section.

1 Like

Got it, that's what I was looking for. Thank you.
It's a little weird that you need to define it in an area that's "external" to where you define Transformers, Queries, etc. but this is a good solution.

I can't get a global function to work. I want to create a sort of profile routine that will show me how long functions take to run and if I'm calling them more than once. So I created a global temp variable and my plan is to write to it at the start of a js query and the end of the js query. What am I doing wrong here?

I do not believe you can use Retool scoped variables ( as defined by needing handebars {{ }}) in a global function. You will need to pass another parameter for call_log.

A basic reason a global function will not work is if there is an error in it - which using {{ }} basically is in this case. You can check on Syntax errors and Runtime errors in your code in your browser's dev tools.

1 Like