Pass user input into a REST API call

Problem

You have user input from a UI component that needs to be used in a REST API call.

Solution

1. Add the UI component on your Page or Component (e.g. an Input named input)
2. Create a new Page Function and select Make a REST API Request
3. Enter the Path, Method, Headers, and Body for the request
4. Use {{ input.value }} wherever you need the input’s current value
5. Save and test your function

Discussion

• Binding expressions within the double curly braces can contain any valid ES2020 expression. The expression is always evaluated client-side first and sent to the server for proxying.
• Since all requests are proxied by the backend, you do not have to consider CORS / CSP headers.
• You can configure the resource’s base path and default headers in the REST API Resource’s settings.
• Avoid putting secrets such as Authorization header tokens in headers directly. Instead, use secrets using the ${{ MY_SECRET }} syntax.

See also

• Securely store and use a secret
• Pass user input into a SQL query
• Pass user input into a GraphQL API call