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:
1
23.99.134.30
2
40.122.170.142
3
104.43.136.75
4
104.43.140.0
5
23.99.128.183
Copied!

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
Last modified 2mo ago