How to send your data to URLs and APIs right in 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.

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

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

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

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

Set the width of both components to "full".

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

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.

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".

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.

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.

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.

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

You can see the same value in the URL:

That's it!

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