HTTP request
The HTTP Request step allows you to send HTTP requests to a server. UI component values and other variables can be sent as request parameters using the
{{ui.input.value}} syntax. By default, you don't even need to connect a data source to send HTTP requests. Just type in the URL and send the request.Create a data source when you need to share the same URL or other settings between multiple HTTP request steps.
- Retrieving data from external APIs;
- Sending data to webhooks from third-party services.
The HTTP action supports the following types of requests: GET, POST, PUT, DELETE, PATCH, HEAD, and OPTIONS. The following options can be configured:
- URL: The API or webhook URL to send the request to.
- Headers: HTTP headers to include in the request.
- Body: The HTTP body to send with the request, commonly used to send form data or JSON data.
- Query Parameters: HTTP query parameters to include in the request.
Some HTTP methods, such as POST, PUT, and PATCH, require a request body. You can send a request body in the following ways:
- Raw body
- JS object
- Binary body
- Form data
- x-www-form-urlencoded
When using a JS object type, the request body will be sent as a JSON string.
You can always adjust the data before sending it.
const values = {{ui.form.value}};
return {
...values,
created_at: new Date(),
}
const values = {{ui.form.value}};
return {
...values,
name: values.name.toUpperCase(),
}
const values = {{ui.form.value}};
delete values.age;
return values;
alternatively:
const values = {{ui.form.value}};
const { created_at, ...rest } = values;
return rest;
const values = {{ui.form.value}};
return {
...values,
tags: values.tags.join(','),
}
const values = {{ui.form.value}};
return {
...values,
// if the value is not set, use the default value
created_at: values.created_at || new Date(),
}
It is possible to import a cURL command as an HTTP action. Simply copy the CURL command and paste it into the HTTP action configuration. All the settings from the CURL command will be automatically populated in the HTTP Action.
If you need to send an array of items in the query parameters, you can do so by iterating over a collection and building the array query parameter from it. Here is an example:
- 1.Assume you have a select box with multi-select enabled, and you want to include the selected values in the query parameters.
- 2.The selected values from the select box will be available as
{{ui.select.value}}in the URL field. - 3.To build the array query parameter, you can iterate over the selected values and build the parameter like this:
https://example.com?{{ui.select.value.map(item => `items[]=${item}`).join('&')}}
Please note, the code above is an example, and the actual implementation may depend on the platform and context.
If the server returns its data in a different format than the components expect, enable transform result toggle or add a new code step to transform the data.
Access an inner array object and map it to a new array:
return {{data}}.map(item => {
return {
id: item.id,
name: item.name.toUpperCase(),
};
});
Add a new key to the array of objects:
return {{data}}.map(item => {
return {
...item, // put all the keys from the original object
created_at: new Date(), // add a new property
};
});
Filter array of objects, short version:
return {{data}}.filter(item => item.id > 10);
Multiline version:
return {{data}}.filter((item) => {
return item.id > 10;
});
Last modified 1mo ago