How to send your data to URLs and APIs right in UI Bakery

Look through a step-by-step guide to learn how to send data to a particular URL or API without leaving UI Bakery.

Let's see how you can easily send your data to a certain URL or API right in UI Bakery.

In this guide, we'll use the project created in UI Bakery earlier. The project already contains a Smart table where the data is loaded from the URL.

Let's create a card, and put an Input and a Button there.

Call for a Component picker, and choose a Card.

Data connection in UI Bakery

Set the Card width to 40%. Remove its Header and Footer.

Connect your data visually

Select the space inside the card, and add an Input and a Button there.

Integrate data and API in UI Bakery

Change the direction of the space as below ("from the top to the bottom"):

How-to guide on data connection

Add an 8px-margin from the bottom of the Input.

Data connection and API integration in UI Bakery

Set the width of both components to "full".

Load and post your data in UI Bakery

Change a name of the Input component. For that, select the Input component, open its Data settings, and change its name to "InputName".

Data connection in the UI Bakery web app builder

Let's work with data now.

Open the Data tool, and add a new action. Name it as "add data". The first step should be an HTTP request with the POST method.

How to work with data in UI Bakery

Note: use the same URL here – https://example-data.draftbit.com/todo_lists – as in the previous article.

Now, we need to send the Headers as "Content-type application/json".

How to post data in UI Bakery

You need to send the specific values in the body. What these values are depends on the keys kept in the URL.

Open the URL and check what keys you have there.

Working with data in UI Bakery

The keys here are: id, name, deleted?, deleted_on.

Let's send a value with "name". For that, you need to go to the body of the HTTP request with POST method, and specify that you're going to send "name". This "name" should be taken from the "InputName".

Here is the code snippet you need:

Once you send the "name", refresh your Smart table to check the changes.

You already have the "loadtodolists" action that loads data from the URL to your Smart table. Use the "loadtodolists" action right after "add data".

Add one more step – Execute action – inside the "add data" action, and select "loadtodolists" from the list there.

Data connection in the UI Bakery web app maker

Let's connect the "add data" action that sends the name value from "InputName" to the URL.

Connect this action to the button. Open the Builder, select the Button placed under the "InputName", go to its Data settings, and set "add data" in the Click field.

How to work with data connection in UI Bakery

Test how it works now. For example, write "Apple Boy" in the input, and click on the Button.

How to work with data in the UI Bakery visual app builder

You can see the same value in the URL:

Data connection and API integration in UI Bakery

That's it!

Hope this guide was helpful. For more how-to's, check the UI Bakery academy how-to section.

To see how it works:

  1. Register, or log in UI Bakery.
  2. Create a new project, or open the existing one.
  3. Follow the steps in the guide above to get the result.