1. Home
  2. Tutorials
  3. Working with APIs
  4. Tailor Element Display to API Responses

Tailor Element Display to API Responses

open nowplace closed

In addition to binding API request response fields directly to your user interface, you can process the data received in your app and update the display dynamically, using control flows added to request status code Events. In Actions added to a status code Event, you can access the fields returned from the API. You can use this to tailor the display of the Elements in your page to what the API has returned, for example by toggling an Element’s content and appearance based on a boolean field from the response, as outlined below.

  1. Open the request in the API tab and select Events. You will see an Event for each status code the request returns (according to the Swagger/OpenAPI specification). Select the status code you want to respond to – often this will be the 200: OK Event. request events
  2. Click the plus plus button and add an If Else Action. Edit the Action.
    • In the first input, find the field you want to test via the Event Data container – you will see all of the fields in the response. This example shows the request in the Places Example App – Place page: if response field
    • In the second input, choose a comparison operator, for example == to test for equality.
    • In the third input, select a value to compare to the first one, for example false to check if the response field is a boolean false value. equals false

    Save the Action.

  3. In the nested True and False Events, add Actions to update the UI display, for example using the Set Value Action to set text values, colors, and visibility. closed now

Using request Events, you can test response fields and set your display dynamically depending on what an API returns, as in the example extension to the Places Example App above, which shows whether a place is currently open or closed. Note that this approach will only apply to response fields that are not inside arrays (Data Sources) in a response, but you can respond to array fields either using the Iterate through Array Action, or in other Actions for Events on the dynamic Elements that are displaying the array entries.

Was this article helpful to you? Yes No

How can we help?