Hi all, I’m excited to share that we are starting a closed alpha for Sync Functions in apps!
Our goal is to provide a more native way to reuse JS code. Today, we recommend people use the Preloaded JS feature, which is hidden away in the Settings tab and does not leverage any of the code editor improvements we’ve shipped over the last year (autocomplete, method definitions, etc).
This feature is still very experimental and subject to change, but if you’re interested in testing out this feature, please respond here or DM me! I will likely be reaching out to participants so I can chat with you to get more feedback.
Please send any feedback to me directly, or to our Discord channel (if you're not a member of the Retool Discord community, you can join here).
Examples
Helper/util functions that take an input and return some transformed output are all good candidates
String formatting
Boolean logic
Reusing Transformer logic
Here are some additional details / FAQs about this feature:
How do I use this feature?
- Functions live in a separate editor sidebar tab – this is where you can create/update/delete functions and test function logic
- You can call your function from anywhere – JS code, resource queries, or template strings.
- You can optionally add parameters to a functionFunctions with parameters must be called with named parameters, rather than positional parameters.
- A function only has access to its defined parameters – it does not have any direct access to Retool scope
- However, the caller can pass in any element from Retool scope which it has access to.
- You can also reference Retool scope from the parameter’s sample value, for easier testing.
- Functions are only reusable within the app they were created in. We’re currently brainstorming on better patterns for sharing these functions across Apps and even Workflows.
Why do I need to use named parameters?
- We think named parameters scale better as functions grow more complex (we follow this rule in our own codebase too)
- That said, we are open to any and all feedback so let us know what you think!
When do I use Functions vs JS queries vs Transformers vs Variables vs Preloaded JS?
We know this is confusing, please bear with us! We are currently working on simplifying how you write JS (and logic more generally) in Retool.
- Use a JS query to write JS code that can have side effects (ex. control a component or trigger another query), or whose return value should be persisted in app state and can be referenced by other parts of your app.
- Use a Transformer to transform data in your app’s state and store the transformed result in app state so it can be referenced by other parts of your app. You can think of a transformer like a selector in React.
- Use a Variable to store some state and explicitly update its value from other parts of your app (ex. from an event handler).
- Use a Function if you want to reuse/parameterize simple JS code that has no side effects. You can think of a function as a parameterized, anonymous version of a transformer whose result is returned directly to the caller rather than being stored in app state. You can also think of a function as a “pure function” in JS.
- Functions should be able to replace most usages of app-level Preloaded JS.
Sign me up!