Today I will show you how to code two dropdowns where the second one is dependent on the first one.
In MIT app inventor, a dropdown is called a spinner.
As a bonus, I will be coding a very practical example. I will be making a country and city dropdown where the city dropdown is dependent on which country is selected in the country dropdown. These are very much needed in apps where the user has to provide his city and country.
We need country and city data for coding this project.
I did a lot of research and wanted to find you a 100% free solution so I didn’t go for API calls and downloaded JSON files from Git Hub that served our purpose. These are two of the JSON files containing country and city data according to our needs:
https://github.com/russ666/all-countries-and-cities-json/blob/master/countries.json
OR
https://github.com/David-Haim-zz/CountriesToCitiesJSON/blob/master/countriesToCities.json
Both have countries as keys with a list of cities as a value. You can open up the JSON file using a browser and go through it to see which one is more comprehensive for your app. You can also carefully edit them using an editor like Notepad or SublimeText.
I am going to use russ666 one in this tutorial.
Download the raw file. Open up a new project in MIT App Inventor and rename it to CountryCityDropdowns.
Upload the downloaded countries.json file in the media section.
Make align horizontal center for screen1
Add a spinner from the user interface. Rename it to countrySpinner and change its width to 50%.
Duplicate this spinner by selecting it and pressing Ctrl + C and Ctrl + V for Windows on the keyboard OR Command + C and Command + V for MacOS.
Rename it to citySpinner.
Add a file component from the storage palette. This is for reading the JSON file.
Add a web component from connectivity. We will not be using any GET request as we have made the JSON file a part of our app but we still need the web component for decoding JSON.
Go to the blocks section.
Make global variables:
When the screen is initialized, we need to read our JSON file.
Make sure that the spelling is the same as the uploaded JSON file.
File.readFrom will trigger the File’s GotText event.
In that, use the web component to decode JSON into our global dictionary variable i.e. data
Remember that all keys in this dictionary are names of the countries so use getkeys to fill up the countries list. Add the “Select country” item in the first place of this list and then, assign this list to the country spinner’s elements.
Set city spinner to just one element: Select City
When the user selects a country from the country spinner, the after-selecting event is triggered.
Make a local city list variable and get the list of cities from our data dictionary against the key equal to the user’s selection.
Insert a Select City item in the first place in this list.
Now, assign this list to the elements of the citySpinner and set the selection index to 1.
This is done. So, it is quite easy to code dependent spinners in MIT App Inventor and you also learned how to show countries and cities dropdowns in your app.
I hope you liked this tutorial. Do share it with your friends and family.
If you like my tutorials, consider supporting me:
You can also watch a video tutorial for it on my YouTube channel.
Also, if you haven’t subscribed to my channel, kindly do so so that you don’t miss any of the great projects that I have planned for you.
https://www.youtube.com/c/obsidiansofteducation
Please like my social media pages for more educational resources and tips.
Facebook: https://www.facebook.com/ObsidianSoft/
Instagram: https://www.instagram.com/obsidiansoftapps/
Pinterest: https://www.pinterest.com/obsidiansoft/
For links to free educational apps, have a look at the educational apps page