1. Home
  2. Documentation
  3. Using Dropsource
  4. Connecting to an API
  5. Handling API Events

Handling API Events

You can carry out Actions when your app receives a response from an API request. Each status code returned from the request will trigger an Event, so you can tailor how the app behaves based on the success or otherwise of that operation. Any Data Sources that you have bound to dynamic Elements will also trigger Events when each data item loads. API Events also allow you to display images from URLs in responses.

Responding to Status Codes

With a request open in the API tab, select Events.

repos events

Any Actions added to API request Events can access the data returned by the associated response code, via the Event Data container.

Responding to API Errors

If your API includes methods for adding or updating data, you may want to detect any errors that occur during these operations, for example to can confirm or alert the user to this status.

Your request may return a variety of error responses, for example 400: Bad Request and 401: Unauthorized . Depending on the data these return, you can create dynamic error alerts for your users:

error alert

ⓘ Note

In the GitHub IT example app, open any API request and check out the 401 Event Actions – the app bounces the user back to the login page if a request is unauthorized.

Processing Array Data

You can carry out processing on each item in an array, either when the response is received from the API, or when each item loads into an Element displaying it.

Array Element Loaded Events

If your API response includes a Data Source (array) that you have bound to a dynamic Element, you can carry out processing when the data is received for each item in the array.

To carry out functionality when each array entry is received, select the child Cell, Tile, or View and open Properties > Events. Add an Action to the Loaded Event – Actions you add here can access the fields in the array item bound to the Element, via the Data Source container.

Typical uses of API and Element Loaded Events include displaying images from response data and processing response fields.

Array Response Status Code Events

To carry out Actions on every item in an array from an API, Add or Manage the relevant status code Event (e.g. 200: OK ) and add the Iterate through Array Action, selecting the Data Source from the Event Data container.

iterate action

In the nested Item Event, you can then carry out any processing you need on the array entry via the Event Data container, for example checking values, filtering values, and comparing values.

iterate nested action

Displaying Images

Your app can display images from URLs in API responses using Actions:

  • To display a single image from an API response, open the request Events and add an Action to the 200: OK success Event. Add the Display Image from URL Action, choosing an Image Element in the page, and the URL field from the Event Data container.
  • To display images from inside a Data Source that is bound to a dynamic Element in the page, select the repeating child Element and open Properties > Events. Add an Action to the Loaded Event, choosing the Display Image from URL Action. Select an Image Element that is inside the repeating Element, and the URL field from the Data Source container.
ⓘ Note

Check out the Place Search example app – in the Place page, select Image View in the Element Tree – this Element is inside a Page Controller / View Pager that an array of image URLs is bound to. Open Properties > Events and add an Action to the Loaded Event. Select the Display Image from URL Action to see its detail.

loaded action

The app will display the relevant image in each View (for each entry in the array).

When you add API requests to your app, or any functionality at all, you may encounter errors, so check out how to resolve them.

Was this article helpful to you? Yes No

How can we help?