How do I use a dropdown list inside of a Container List to capture data

Hello! How do I create have a dropdown list that is inside of a container list? For example, I have the following data:

[
    {
      "name": "Tom Cruise",
      "age": 56,
      "Born At": "Syracuse, NY",
      "Birthdate": "July 3, 1962",
      "photo": "https://jsonformatter.org/img/tom-cruise.jpg",
      "list": ["Mission Impossible", "Iron Man"]
    },
    {
      "name": "Robert Downey Jr.",
      "age": 53,
      "Born At": "New York City, NY",
      "Birthdate": "April 4, 1965",
      "photo": "https://jsonformatter.org/img/Robert-Downey-Jr.jpg",
      "list": ["Mission Impossible", "Iron Man"]
    }
  ]

I store this data into a variable session.data and pass this as the data property in my container list:

I then want to add a dropdown list into my container list and have it populate the dropdown list with the data from session.data[index].list.

I can’t seem to get this working properly. Has anyone done this before?

Below is the configuration of my dropdown list:

Hey @darren55, welcome to the Airkit Community!

Let’s look at how to implement a “fully functional” use-case based on the info you provided:

  • List of items (actor information) to populate a Container List
  • Each of the Container Items contains a List (in your sample data, that’d be the movies list) – populate a Dropdown List with it
  • A session.dropdown variable to store the selected movie I’ll use the following format to store the collected data [<movieName1>,<movieName2>].

:information_source: Feel free to reply with your compleye use case if you’d like to see the info collected stored in a different way, e.g.:

  • [{"<actorName>":"<movieName>"}]
  • [{"name":<actorName>, "movie":<movieName>}]

Alright, now let’s have a look at how to go about the implementation.


Sample Data

Using your sample data stored to the session.data variable:

Container List config

Since both the Container List and the Dropdown List are lists, change the Collection Name, Item Name, and Index Name of the Container List (in the List’s Advanced options) to make it easier to tell them apart from the Dropdown List properties as follows:

Inside the Container List, add the following (as shown in the screenshot above):

  • A Simple Cell to contain each containerItem
  • Inside the Simple Cell add:
    • A Label to display the name of each actor (containerItem.name)

    • A Dropdown List to be populated with the list contained in each actor object (containerItem.list)

Dropdown List config

  • Control Properties:

    • Value: to store the selected movie(s) in the session.dropdown variable at the same index as the containerIndex, use the following expression (plenty of alternatives here, as mentioned above):
      session.dropdown[containerIndex]
    • Placeholder Text: You can set this property to any Text you like (e.g. 'Please Select) or you can leave it blank
  • Data Binding:

    • Type of List: select Custom Expression and use containerItem.list list to populate the Dropdown List
    • Display Text: set this property to ìtem
    • Selected: to display the user selection set this property to evaluate the Value property like so: item = session.dropdown[containerIndex]

All done! This is what the Container List w/Dropdown should look like

AK DEMO - Container List w-Dropdown


Airkit Demo Application

You can download a demo app of this use case below.

AK_DEMO_v17-15_-_Container_List_w_nested_Dropdown_List.zip (154.3 KB)

:warning: This application was built on Airkit CXR v17.15, just reply to this thread if you need a copy for Airkit CXR v18.

1 Like

This is exactly what I was looking for, thank you @juanchax for the detailed walkthrough! I realized i can also add another property .selected and overwrite session.data in case i wanted to update the object as well. I also removed all actions from the dropdown list as I realized it wasn’t needed

1 Like