Displaying a List

App Inventor Classic • App Inventor Classic • FOR APP INVENTOR 2 CLICK HERE• App Inventor Classic • App Inventor Classic

Displaying a List

You'll often define list variables to store data. For instance, the following variable stores a list of phone numbers:

When you want to display such a list on the phone, you can plug it into the Text property of a Label, such as in this example:

On the phone, the items of the list will appear in BroadcastListLabel as a space-delimited list:

(1112222 3334444 5556666)

The user can see the data, but it's not very elegant. Generally lists are displayed on separate lines or with commas separating each item.

To display a list more elegantly, you'll serialize it-- write blocks to move the list items into the Label with the formatting you want. You can display the items on separate lines, add decorative text-- just about anything you can imagine. To serialize a list, you'll use a foreach block to successively add each item to the Label.

Here's a sample that displays the BroadcastList on separate lines. The blocks are within a procedure which you call anytime the list is modified.

How the Blocks Work

The BroadcastListLabel.Text is first initialized to a header, "Phone Numbers...". Then the foreach block begins-- all the blocks within it will be repeated for each item in BroadcastList. If the list has three items, as in BroadcastList, the blocks within the foreach will be executed three times. Each time the blocks are repeated, the variable pnumber has a different item in it. The first time it will have 1112222, the second time it will have 3334444, and the third time it will have 5556666. Each time the make a text block appends the pnumber to the end of BroadcastListLabel.Text, placing a newline chracter, "\n", in between.

The newline character "\n"

Text objects generally consist of letters, digits, and punctuation marks. But text can also store special control characters which don't map to a single character. "\n" is such a control character. When it appears in a text block, it means "go down to the next line before you display the next thing." So the text "1112222\n3334444\n5556666" would appear as:

1112222 3334444 5556666

Let's trace the blocks to see how the BroadcastListLabel is built. Tracing means to show how each variable/property changes as the blocks are executed. Since there is a foreach, we'll consider the values after each iteration-- each time the blocks within the foreach are executed:

Iteration	pnumber	PhoneListLabel.Text
Before foreach	n/a	PhoneNumbers...
after first iteration	1112222	PhoneNumbers...\n1112222
after second iteration	3334444	PhoneNumbers...\n1112222\n3334444
after third iteration	5556666	PhoneNumbers...\n1112222\n3334444\n5556666

As the table shows, the foreach block performs the task of successively placing the next item of BroadcastList into the variable number. On first iteration, pnumber is 1112222, on second 3334444, and on third 5556666. foreach does part of the work for you-- you don't have to explicitly set the variable pnumber to one of the items in the list.

The blocks within the foreach append a "\n" and the number to the previous value of PhoneListLabel.Text. So after each iteration, the label becomes larger and holds one more phone number (and one more newline). By the end of the foreach, PhoneListLabel.Text is set so that the numbers will appear as:

1112222 3334444 5556666

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this reference material.