How to pass data from the Bubble UI to the API connector, and save the results

Here is how your app users can use the UI to change what request is sent to a remote API, and save the results returned from the API

Hi,

If you’ve read through some of my previous articles about APIs then you’ll now know how to use the Bubble API connector for simple cases where you want some remote data displayed for the user.

But what if the customer want’s to tweak the input on the page, and have the API request updated to suit this new context.

Easy. In this article we’ll set up a simple drop down where the customer can specify a parameter value which is sent as part of the API request

API

In this example we’ll be using the Deck of Cards api at https://deckofcardsapi.com which is easy to use, well documented, and provides nice looking images of playing cards like this one:

UI

Structure

I’ll keep the UI simple, with just enough structure to specify the input parameter, and some buttons to get, save and view cards

Dropdown

I want the user specified input to be the number of cards that we are querying from the API. For this I’ve added a dropdown menu with a Static list, being the numbers from 1 to 5, & a default of 3.

Note: Since I’ve enabled the ‘This input should not be empty’ checkbox, this removes the option of the number 0 in the dropdown.

Button

The Get Cards button has this configuration, and we’ll get discuss this further soon.

API

Because this API doesn’t require authentication it’s simple to get set up.

Note: I’ll be covered authenticated API’s in future articles.

Install the API Connector, and add a new API by clicking the Add Another API button.

Set up the configuration like below: