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.

Use Cases

• Retrieving data from external APIs;

• Sending data to webhooks from third-party services.

Configuration

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.

Sending request body

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.

Add additional values

const values = {{ui.form.value}};

return {
  ...values,
  created_at: new Date(),
}

Change the values

const values = {{ui.form.value}};
return {
  ...values,
  name: values.name.toUpperCase(),
}

Delete unwanted values

const values = {{ui.form.value}};
delete values.age;
return values;

alternatively:

const values = {{ui.form.value}};
const { created_at, ...rest } = values;
return rest;

Join array values

const values = {{ui.form.value}};
return {
  ...values,
  tags: values.tags.join(','),
}

Use default values

const values = {{ui.form.value}};
return {
  ...values,
  // if the value is not set, use the default value
  created_at: values.created_at || new Date(),
}

Importing cURL Commands

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.

Sending Arrays in Query Parameters

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.

Data transformation

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;
});