Each API request in your app can include response fields along with each status code it returns. Typically you will use fields from the 200: OK response – you can display the values in your page Elements or use them elsewhere in the app. If your response includes arrays, you can bind them to dynamic Elements.
With an request open in the API tab, the Responses section lists all fields returned. Select a status code from the drop-down list (if your request returns more than one).
Fields may be nested inside objects and arrays.
Click a response field and select an Element to display it in – you can alternatively click and drag onto the Canvas if the Element is visible there.
Dropsource will only allow you to bind to valid Elements for the data type of the field, so text items can only be displayed in Elements that display text, and so on.
Once an Element is bound, you will see a green dot next to it.
Actions added to API request events can also access response fields.
To display an image from a URL in a response, add an Action to an API Event or an Element loaded Event.
Displaying Array Data
Any arrays in your API response will be listed in Dropsource as Data Sources. To display the fields in a Data Source:
- Add an Element that can display dynamic data.
- You can use a Table, Dynamic List, View Pager, Page Controller, Card Swipe Controller, Card Deck, or Collection View.
Bind the Data Source to the dynamic Element.
- Add a single child Element to the dynamic parent. The app will repeat the child Element for each entry in the array.
- Add Elements to the child Element. Bind the fields inside the Data Source to these.
Your app can detect and respond to the array data loading into each repeating child Element or can iterate through array entries when a response is received. This allows you carry out any processing you need on the data. See API Events for more detail.
Using Array Data
When you have a Data Source bound to a dynamic Element, your app can access fields from the Data Source in Actions for Events on the dynamic Element’s child views.
For example, if you add an Action to the Tapped Event of a Table Cell, the Action can access the fields for the array entry being displayed inside it. Similarly, if you run another request when an Event occurs on a dynamic child Element, you can pass response fields from the first request as parameters to the second one.
In the Checklist example app – in the landing page, select List Cell / Tile in the Element Tree. Open Properties > Events and add an Action to the Tapped Event. Select the Go To Page Action to see its detail – it uses the Data Source Context. The Action is able to access the ID for the tapped item because the Data Source is bound to the parent Table Element.