The snapshot below is from our tutorial app. I recommend you to download the source of this application ListBlocks.zip from the Downloads page and try it in an emulator so you will have a better understanding of list manipulation. In the source, I have added a plenty of comments for you to easily understand the implementation. You should be able to see those comments once you load the source in your block editor window.
I tried to keep the source as clean as possible without optimizing it too much for beginners to understand. Once you understand the application, trust me, you will be able to rearrange the pieces in more efficient way. Also, for some operations I tried to control it through block editor which actually you can control from designer window like checking if a text box contains only numbers which you can do by enabling the NumbersOnly option in the designer window for a TextBox component, you can specify a ListPicker's elements through ElementsFromString property in the designer window which I also implemented from block editor window. The purpose of that is to give you alternative ideas which you may need in the future.
 Note that the comments in yellow in the image above are not part of the application.
Contents:
Creating a list is as simple as this-
 We have just created four empty lists above, named list1, list2, list3, and userList. "make a list" block can be found in Lists block in your block editor. Those lists are currently empty as we haven't added any items yet.
Tips: When you name a variable, try naming it with a purpose. Say you need a list of prices of different fruits, you can name that list variable - fruitsPriceList so that later you don't have to recall the purpose of that list, specially when you have lots variables in your block editor. Also by the name of the variable, you would know that variable represents a list.
Adding an item can be done different ways.
 If you look at the image above, we have populated all three lists with different items. First one will have a list of three items which are Orange, Apple, and Banana; the second one is consisted of another three items - 20, 30, and 10. The last one, list3 is consisted of two items which are actually lists. Yes, you can have a list of lists. If you take the first item from list2, you will get a list of three items which contains Orange, Apple, and Banana.
Now, look at the image below-
 The difference between add items to list and append to list is that for add items to list, you can add both individual items and lists, but for append to list, you can only add another list into a list. add items to list will consider a list as an item but append to list will take the contents from a list and add them as separate items. To make things clear, in the above image, list3 is the destination list where the contents of list1 will be added. That means, list3 will contain whatever items it had before plus the items from list1. If things are not clear, try it for yourself and see how they behave.
Note that both add items to list and append to list adds an item at the end of the list. Now what if we want to add an item in a certain position? That's when we need insert list item block. insert list item is used when you want to add an item into a list in a certain position. Let's say you want to add a new item "Grapes" into list1 at position 1. This is how you will do it-
 As you have noticed, insert list items takes 3 arguments - the list where the new item will be added, the position where the item should be added, and the new item that should be added. Since we wanted our new item "Grapes" to be added at the beginning of the list, we specified 1 as the index/position. Now our list1 contains four items - Grapes, Orange, Apple, and Banana. Note that Grapes is the first item in list1.
Tips: Always apply whatever you have recently learned. Don't try to learn everything first and then apply.
Now that we have populated our lists with items, we want read and display the contents of those lists. Believe it or not, that is very easy. In the example below, we used a Label component named List1Label to display the contents of list1 onto.
 foreach or for range can be used for iterating/looping through a list. Here we used foreach as we are not concern about the indexes of an item. When we will sort a list, we will be using for range instead as we need the indexes of different items in the list for manipulation. You can still use foreach for sorting too, but you must define some global variables to access the indexes.
foreach is pretty simple, you provide with a name variable to hold an item of a list for later use and the list to read. Note that the name variable cannot be directly used outside the procedure/event/function it is defined in, unlike the regular variables which are declared globally so that you can use it in any procedure/event/function. For reading list1, we defined a name variable named list1Item and then we appended the item to the List1Label's text. Also note that, we used the value block of the name variable. You cannot copy and paste the name variable to read the value; you have to get the associated value block of that variable. When you define a name variable, App Inventor creates a value block for you automatically which you can find inside My Definitions drawer in your block editor window.
To give you an idea, let's say you want to get the sum of all items in list2. This is how you would do it-
 Initially we set the value of sum to 0. We used foreach block to loop through each item in list2 and added to the value of sum. The execution of the above block will look like this-
sum = 0
sum = sum + value at position 1 of list2 (0 + 20 = 20)
(Now the value of sum is 20)
sum = sum + value at position 2 of list2 (20 + 30 = 50)
(Now the value of sum is 50)
sum = sum + value at position 3 of list2 (50 + 10 = 60)
(Now the value of sum is 60)
The final value of sum will be 60.
Let's say you want to display a random item from list1. That's how you would do it-
 To remove an item, all you need to know is the index/position of the item you want to remove. If you want to remove "Grapes" from list1, you have to pass 1 as the index as you can recall we have added "Grapes" earlier at position 1 into list1.
 In a real world application, you may have to validate if a certain index/position exists in a list before you actually try to remove an item. If you have already downloaded the application that I mentioned at the top of this tutorial, you should see how I validated a given index before removal of an item in the given index takes place.
To remove everything from a list, simply set the value of the list variable to an empty make a list block. In the image below, we removed all items from list2 by setting the value of list2 to an empty make a list block.
 To replace a list item, you need to provide with three arguments - the list where you want to replace an item, the index of an existing item in the list, and the new item you want to replace an existing item with.
 In the image above, we replaced the item at position 1 with "Mangoes". If you can remember, we had "Grapes" in index 1. Now we have "Mangoes". There's no change in the list size as we didn't add/insert/remove a item, we simply took Grapes out and replaced it with Mangoes.
Searching for an item can be a little tricky because sometimes you will need to know if a particular item exists in a list, if it does, then you might be interested to know where or in which position that item exists. Now if you have multiple/many occurrences of the same item in a list, you also may need to know all the positions in the list that item is present.
 In the above image, you can see we are trying to search for the item "Apple" in list1. Before we started searching, we used is in list? block to check if that item exists. position in list block will give us the first occurrence of "Apple" in list1 if it exists in list1. If the item doesn't exist, it will give us 0. If our list1 contains Mangoes, Orange, Apple, and Banana in order; then position in list will return 3 because "Apple" is in third index/position in list1.
But what if list1 contains Mangoes, Apple, Orange, Apple, and Banana - how can we get all the occurrences of "Apple"?
 We used the for range block to read all the items of list1 and compare each item against our search key which is "Apple". listIndexCounter holds the position of an item we currently comparing. Initially the value of listIndexCounter is 1 because we set the start in the for range block to 1. We set the end in the for range block to the size/length of list1 because we want to compare all items from beginning to end of list1. Our step is set to also 1 because we don't want to skip any item. After the first comparison, the listIndexCounter will have a value of 2, then 3 and so on because step in for range is set to 1.
Now if we have Mangoes, Apple, Orange, Apple, and Banana in our list1 and we execute the for range above, we will have [2][4] as a result which will be contained by infoText variable that we defined because "Apple" appears in position 2 and 4 in list1.
Note that text=, text<, text> are case sensitive. That means if you want to see if "apple" is equal to "Apple", will return false because "a" is not equal to "A". Our search above doesn't ignore casing. So, if we search for "apple" in list1, we will not get it. If you don't want to care about casing during comparison, simply get the upper case or lower case of the items before comparison and then compare. You can use either upcase or downcase of Text block. Example-
 We used upcase, you can also use downcase as long as you use the same case for both items in comparison.
7. Sort a List
Sorting of list is explained here.
Download the source ListBlocks.zip from Downloads page and try it for yourself.
|
 |
Blocks & Tutorials >
List Blocks |
For new tutorials and other updates
