Text Group

This tutorial introduces the Texting component for sending and processing texts. You'll build an app that texts a message to a list of phone numbers.

This tutorial assumes you've completed the HelloPurrPaintPot, and WhackAMole tutorials. It introduces the following App Inventor concepts:
Do we need to assume that they have completed these tutorials of that they know certain funtionality explained in these tutorials?  I would argue the later. So maybe we say something like:  This tutorial assumes you know how to do X, Y, and Z, explained in the HelloPurrPaintPot, and WhackAMole tutorials.

  • The Texting component for sending texts and processing received texts.
  • List Variables
  • The foreach block that allows an app to repeat operations on a list of data (the list of phone numbers)

Before Starting

Make sure your computer and your phone are set up to use App Inventor, (link to the phone/computer set up tutorials) and browse to the App Inventor Web site at appinventor.googlelabs.com. Start a new project in the Designer window, and name it TextGroup. Open the Blocks Editor, click Connect to Phone, and make sure the phone has started the App Inventor app.

Screen Title

To get started, go to the Properties panel on the right of the Designer and change the screen Title to Text Group. You should see this change on phone, with the new title showing in the title bar.

Set up the Components

You'll use these components to make TextGroup. Name the components as specified below:
I am not sure how to interrpret this.  I started off looking for a companent named message text.  I clicked on the help text (?) and read the descripotion and figured out that the TextBox was the componant I was looking for.  Should we make this more obvious?  Maybe someting like...

 Componant Type          
What you'll name the componant
 Purpose of Componant
 TextBox MessageText
 Label SatusLabel 
 Button TextGroupButton 
 Texting (found in Social Drawer)

  • MessageText -- user enters message here.
  • HorizontalArrangement -- you can put the two buttons in this. (Not sure this is need here.  Probably better to reference in the variations section)
  • TextGroupButton -- when clicked, the app texts all numbers in a list of numbers
  • Texting1 - a Texting component responsible for sending texts. You'll find the Texting component in the social drawer.
  • StatusLabel-- tells user when message has been sent to all in group.
With the Texting1 component what is the connection between the properties that are set in the designer view and using the blocks. 

Text Random button in the picture is not listed above.

Add behaviors to the components

Your goal is the following: When the user clicks the TextGroupButton, the app should text the message entered by the user in MessageText to all the numbers in a list of phone numbers.

Version 0.1: Text the entered message to one phone number.

To introduce yourself to the Texting component, begin by creating a simplified version that  texts your own phone the message entered by the user. To send a text, you need to set two properties of the Texting component: the PhoneNumber and the Message. Once these are set, you can call the SendMessage function to actually send the text.

In the Blocks Editor:

I think we can reduce the text here by either building a table and/or justing displaying the blocks.

  1. Drag out a TextGroupButton.click event-handler. When TextGroupButton is clicked, the app will send out the text.
  2. From the Texting1 drawer, drag out a set Texting1.Message to block.
  3. From the MessageText drawer, drag out the MessageText.Text block-- this represents the text the user has entered.
  4. Plug the MessageText.Text block into the set Texting1.Message to slot, and the whole sequence into the TextGroupButton.click event handler.
  5. From the Texting1 drawer, drag out a set Texting1.PhoneNumber to block, then create a text block (did not accure to me right away to look for this in the Built In drawer) and enter your own phone's number.  It was not clear to me if I should enter the number as number or text.
  6. Plug the text block into the Texting1.PhoneNumber to block, and the entire sequence into the TextGroup.click event handler
  7. Open the Texting1 drawer and drag out a SendMessage block, and place it at the bottom of the TextGroupButton.click event-handler. The blocks should look like this:
Test Version 0.1 by connecting your phone to the computer and clicking Connect to Phone in the blocks editor. When the app appears on the phone, click on the TextGroupButton. Does the text get sent? [maybe have something about troubleshooting-- does the phone have connectivity,etc.]

Version 1.0. Texting a list

Next, you'll modify the blocks to do what you really want, which is to text more than one number at a time. A brute force method would be to just copy the blocks to text a particular number, paste them a number of times, then change the phone numbers on each. This brute force method would look like this (you need not actually code these blocks for this tutorial):

This copy-paste scheme would work, but it's inconvenient to copy, paste, and modify blocks each time you want to add a number to the list. Furthermore, only the programmer can add new numbers to the list in this manner. If you want to extend this app to allow the user of the app to add and remove numbers, a different scheme is necessary.

A better solution is to define a variable (is there another way to talk about variables or maybe we say something like "A better solution would be to XXXXX, which is what we call defining a variable"?) that stores the list of numbers, then specify that the set of operations (set PhoneNumber, SendMessage) should be repeated on each item in that list. With such a solution, the programmer (or user) can simply add items to the list, and the blocks for executing operations on that list need not change. The app is more maintainable and it can be modified to work on even dynamic data lists.

In this app, like many apps, you''ll define global variables to store the data for the app. Global variables are not seen by the user-- they are hidden memory cells (what are memory cells?) within the phone. In this case, you'll define the list of phone numbers to which the text is sent.

Again I think we can reduce the text here by building a table.

  1. In the Blocks Editor, under Built-in, open the Definition drawer. Drag out a def variable block, then click on the default name "variable" and change it to PhoneNumbers.
  2. Drag the red ? block that is within the def block to the trash. Then open the Lists drawer and drag out a make a list block and attach it to the def variable block.
  3. To add items to the list, open the Text drawer and drag out three text blocks-- these will serve as the individual phone numbers. Change the text of the questions to the numbers of some of your friends, and hook them into the item slots of the make a list block. Note that a new, open item slot appears in make a list as you add each item:
Here's what the blocks should look like:

Now you're ready to code the TextGroupButton event-handler so that it texts each number in the variable PhoneNumbers.

  1. From the Control draw er, drag out a foreach block. The foreach block allows you to specify some blocks that should be repeated for every item in a list. Any blocks you place within the foreach block will be repeated on all of the items in the list you specify.
  2. Rename the variable "var" of the foreach block to "item". "item" is a placeholder-- it will hold the current phone number as the app iterates through the list of phone numbers.
  3. From the My Blocks, Definitions drawer, drag out a reference to PhoneNumbers and place it in the slot named "in list": Do I need global PhoneNumbers or set global PhoneNumbers?
The foreach block should look like this:

Now you're ready to specify the "repeatable" blocks. In Version 0.1, you texted a single number:
For texting the group, the first operation, setting the message, need only be executed once, as the same message should be texted to all phone numbers. The second and third lines of blocks-- setting the PhoneNumber and actually sending the message-- are the ones that should be repeated.
  1. Drag the set Texting1.PhoneNumber to block and the Texting1.SendMessage block and plug them into your foreach block
  2. Drag the foreach block back within the TextGroupButton.Cick event-handler:
  3. I think the instructions on inserting the value item block is missing.
When the TextGroupButton is clicked, the Texting1.Message property is set to the message entered by the user in MessageText. Then the foreach block begins executing. The two lines of blocks nested within the foreach will be executed three times, because there are three items in the list PhoneNumbers. The first time they are executed, the variable "item" will hold the value "1112222", and the message will be sent to that number. As soon as the message is sent, the app will "loop up" and repeat the foreach blocks. For the second time through, the variable item will hold "3334444", and the message will be sent to it. On the third iteration, the variable will hold "5556666", and the third text will be sent out.

Test the app by clicking the TexGroupButton on the phone. Is the text sent to all the numbers in the list?

Reporting the Status of the app

It's always a good idea to give the user feedback when they initiate an operation. In this case, the app should report to the user when the texts have been sent.

From the StatusLabel drawer, drag out a set StatusLabel.Text to block and place a text block with the text, "sending texts..." within it. Place these blocks at the top of the TextGroupButton.Click event-handler, then copy them, (I am not sure what you mean by copy.  I literally tried right clicking to see if I could copy the block.  I than moved on to just repeat the dragging out of the set StatusLabel.Text block and placing the text block in it.) change the text to "texts sent.", and place those blocks at the bottom of the event handler:

Final Program

TextGroup Version 1.0


Once you get the TextGroup app working, you might want to explore some variations. For example,

  • Instead of texting all the numbers in the list, text a randomly selected number. You won't need a foreach block, but you will need the pick random item function in the Lists drawer.
  • Write the app "Missing You" that sends the text "missing you" to the list of numbers as soon as the app begins (on the Screen.Initialize event).


Here are some of the ideas covered in this tutorial:
  • Instead of placing data directly in event-handlers, you can create lists and have the app process the list.
  • An app can repeat functions on all items of a list using the foreach block.



Source code for this app is attached to the bottom of this page as a zip file. To use it, download it from the attachments, then open App Inventor, choose More Actions | upload source, and choose the zip file.

[to do...
  get rid of random blocks in early pics
  maybe display the list of numbers to whom the message was sent.
  missing a foreach block pic 2/3 way down

David Wolber,
May 31, 2010, 5:22 PM