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.
With a request open in the API tab, select 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:
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.
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.
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. Click Manage for 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.
To carry out Actions on every item in an array from an API, 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.
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 Manage 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. Manage 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.
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 click Manage for the Loaded Event. Select the Display Image from URL Action to see its detail.
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.