1. Home
  2. Tutorials
  3. Working with APIs
  4. Present a Dynamic List of Selectable Options

Present a Dynamic List of Selectable Options

ios dynamic spinner

You can use a dynamic Picker Element on iOS with data from an array returned in an API response. Your app users can select from the list presented, and when you respond to a selection, you can access the array fields for the selected item.

  1. Add a Picker Element to a page in your app. In Properties, select Dynamic in the Type drop-down list.
  2. In the API tab, add an API request to your page – it should return an array of data that you want to display in the Picker. request added
  3. In your API request Responses, bind the Data Source (array) to the Picker Element, by clicking and dragging it onto the Picker on the Canvas or clicking and making a selection. bind picker
  4. Bind a text field inside the Data Source to the Picker Element Row Title property – this will display the text in each Picker entry. bind row title
  5. Set up any Parameter binding your request requires, and add a Run API Request to an Event in the page.
  6. Select the Picker on the Canvas and open Properties > Events. Open the Value Changed Event. Add any Actions you need to execute when the user makes a selection in the Picker, accessing the data for the selected item via the Data Source container. For example, this app uses a request from Google Places API to display the location of the selected place on a map: picker map

In Actions on the Picker Element Value Changed Event, you can access any field from the array in your request, so you can build that data into other functionality, for example to pass the ID for a place into a second page if you were working with the Google Places example API. The process is very similar to displaying dynamic content in Tables and other Elements. For more on location and mapping, check out the native functionality tutorials.

android dynamic dropdown android dynamic selection

You can create a dynamic Dropdown (Spinner) Element on Android using data from an array returned in an API response. Your app users can select from the list presented, and when you respond to a selection, you can access the array fields for the selected item.

  1. Add a Dropdown Element to a page in your app. In Properties, select Dynamic in the Type drop-down list.
  2. In the API tab, add an API request to your page – it should return an array of data that you want to display in the Dropdown. request added
  3. In your API request Responses, bind the Data Source (array) to the Dropdown Element, by clicking and dragging it onto the Dropdown on the Canvas or clicking and making a selection. bind dropdown
  4. Bind a text field inside the Data Source to the Dropdown Element Row Title property – this will display the text in each Dropdown entry. dropdown row title
  5. Set up any Parameter binding your request requires, and add a Run API Request to an Event in the page.
  6. Select the Dropdown on the Canvas and open Properties > Events. Open the Value Changed Event. Add any Actions you need to execute when the user makes a selection in the Dropdown, accessing the data for the selected item via the Data Source container. For example, this app uses a request from Google Places API to display the location of the selected place on a map: dropdown data source

In Actions on the Dropdown Element Value Changed Event, you can access any field from the array in your request, so you can build that data into other functionality, for example to pass the ID for a place into a second page if you were working with the Google Places example API. The process is very similar to displaying dynamic content in Lists and other Elements. For more on location and mapping, check out the native functionality tutorials.

Was this article helpful to you? Yes 1 No

How can we help?