HTTP

Learn how to connect UI Bakery to any open API source

Prerequisites

If your API is hosted behind the Firewall, add the following IP addresses to the Firewall whitelist:

23.99.134.30
40.122.170.142
104.43.136.75
104.43.140.0
23.99.128.183

Usage

To interact with the data via API you'll need to use an HTTP Request action step and configure HTTP parameters based on the documentation (all applications providing APIs have related Developers API docs). We support all HTTP methods, Headers, Body, and Query Parameters.

For example, you can pass a JSON object in a Body of your request, adding a Content-Type header to it:

Adding a request Body
Adding a request Header

You can expand your request by adding additional query parameters to the Query Params tab:

Adding query parameters to request

cURL

UI Bakery allows you to import APIs via cURL

Add an HTTP request action step, click Import CURL, and paste your cURL command into the field. The system will fill in the configuration automatically. Then Run Action and check the Result tab

Working with cURL

Managing the data

Loading data

To load the data, create a new Action with an HTTP API action step, select method (GET), and configure an API URL.

Creating a Load Data action

Click Run Action, then check the Result tab for the outcome

In some cases, data might be returned as an object instead of a collection, so you might want to transform it to display in a table using the below code:

return {{ data.results }}.map(data => ({ ...data, ...data.properties }));

Find out more about Data mapping

After loading the data, you can add a component to display it

You can manage the data using the standard HTTP methods:

  • GET to load the data

  • POST to add new data

  • PATCH to update existing data fields

  • PUT to replace existing data

  • DELETE to delete existing data

Let’s say you want to edit the records in the table. Add the Edit option to the table from the Appearance&Style tab and add a new action triggered by On Edit

Select the Method for the action (e.g. PATCH). Include path parameters to the record as part of the URL, and refer to the selected record by using a variable: /users/{{ table.editedRow.data.id }}

Adding an Edit Data action

Specify the additional request parameters if required by API documentation, then Run Action and check the Result tab to confirm the data is being updated