search

The API Call (element)

To make HTTPs calls using the plugin, you must add an API Call element to your page. That allows you to make operations from the user's browser and also stores the result of any call on the element as a Custom State.

The element will perform calls to endpoint you provide, but it will only make the call when you fire the "Make a Call from a API Call" action.

hashtag
Settings

hashtag
Method

The HTTP verb to be used on the call.

  • GET

  • POST

  • PUT

  • PATCH

  • DELETE

circle-info

For "GET" calls, the body of the call will be ignored, since it only accepts url parameters.

hashtag
Endpoint URL

The link to the API endpoint/url you want to send a request to.

hashtag
Response Type

The way you wish the plugin to interpret the response.

  • JSON

  • Text

  • Number

  • Empty

hashtag
Response Schema

The name of the type (api call) defined on Bubble's navite API Connector, that will be used to interpret the response of a JSON call, allowing you to use the result on the Bubble editor. See below how to configure a new type.

1- Add the API Connector plugin, from Bubble, to your app.

2- Add a new API group to it and define new "Calls".

On the example below, we've added a call names "Task (schema xano)".

3- Click on "Manually enter API response".

4- Paste an example of JSON you expect to receive from the API and hit "Save".

5- Choose the types of each entry on the JSON

The plugin will try to convert each response property into those types you selected.

6- Finally, choose the name of the Call you created on the "Response Schema"

hashtag
States and Values

hashtag
Response Single

The result of an API Call, when it is a single value.

circle-info

If the result is a list, this state will store the first value of the list.

hashtag
Response List

The result of an API Call, when it is a list of values.

circle-info

If the result is a single value, this state will store a list of a single item.

hashtag
Data is Ready

  • No -> The API Call is being processed and the response is not yet available.

  • Yes -> The API Call is done and the response is stored and ready for use on the Custom States of the element.

Since we're dealing with asyncronous operations, we must have ways to know when everything is ready. This state is complemented by the "Data is Ready" trigger/custom event, provided by this element.

hashtag
Error Message

If the API's server responds with an error, the error message will be stored in this state.

hashtag
Response JSON (text)

The result of an API Call, but in play text. It might be useful to have the JSON raw text available on Bubble to use in other plugins, like the JSON Reader, Creator and Editorarrow-up-right, for instance.

hashtag
Response JSON List (text)

The result of an API Call as a list of texts.

hashtag
Element Actions

The element has a single action, called "Make the Call form a API Call", that fires a request to the endpoint specified on the element's settings, plus the settings you provide to the call itself.

See how to make a call in depth on this page.

hashtag
Events

hashtag
Response is Ready

Triggers a workflow when the API Call is done and data is available for use on the element's states.

hashtag
Returned an Error

Triggers a workflow when the request results in an error (e.g. 500 Internal Server Error).

PreviousIntroNextMake the API Call (action)

Last updated