TextGroup App Part II

I updated the Text Group app so that the user adds phone numbers to the group by choosing from the phone's contact list, and removes them by choosing from the items already in the group.
The tutorial covers the following App Inventor components and concepts:

• The foreach block for repeating operations on a list.
• The PhoneNumberPicker component for accessing the phone's contacts.
• The ListPicker component for allowing the user to choose a number for removal.
• The Texting component for sending texts.
• The TinyDB database component for storing the phone list in a database. 

  The user interface for Text Group, Part II has a textbox, button, and status label for sending the group text, just as in Part I. I then added a PhoneNumberPicker and ListPicker components for adding and removing phone numbers from the list, along with a Texting component and a TinyDB component, both of which will appear in the "non-visual" component area.

The following components were added:
- Label named GroupHeadingLabel; this is the header for the list of phone numbers that will appear
- Label named MembersLabel; this is where the list of phone numbers will appear
- Horizontal Arrangement named HorizontalArrangement1; this is used to organize the add and remove buttons (pickers) horizontally
- PhoneNumberPicker named PhoneNumberPicker1; this allows the user to choose phone numbers from their contact list
- ListPicker named RemoveListPicker; this allows the user to remove a number from the phone numbers in the group
- TinyDB named TinyDB1; this is for storing and retrieving group's phone numbers from database 

I set the properties of the components in the following way:

• Set the Hint of MessageText to "enter a message"
• Set the Text of TextGroupButton to "Text Group"
• Set the Text of StatusLabel to "status".
• Set the Text of GroupHeadingLabel to "-- Group -- ".
• Set the Text of MembersLabel to "members will appear here".
• Set the Text of PhoneNumberPicker1 to "Add Member".
• Set the Text of RemoverListPicker to "Remove Member"

In the first part of the TextGroup App, I made this:

For this app, I still want the list but you don't want any pre-defined numbers in it, becuse the numbers will be added by the user of the app. So I removed the text blocks with the numbers and leave the make a list block empty. I needed the following behaviors:

1. When the user clicks the "Add Member" button (the button associated with the PhoneNumberPicker), the picker will appear for the user to choose a number. When the choice is made, the app will add the chosen number to the PhoneNumbers list and update the database.
2. When the user clicks the "Remove Member" button (the button associated with the RemovListPicker), the picker will appear for the user to choose one of the numbers already in PhoneNumbers. When the choice is made, the app will remove the number from the list and update the database.
3. When the app begins, the numbers stored in the database are retrieved and loaded into PhoneNumbers.

 The list of phone numbers in the contact list will appear when the user clicks the PhoneNumberPicker 's associated button: that behavior is built-in to the component. When the user makes a choice from the contact list, PhoneNumberPicker 's AfterPicking event is triggered. I just had to to program this to add the chosen item to the list and update the database. All of the blocks needed look like this:

At this point the app shows the user the phone numbers that have been added. I created a procedure that displays the list with each phone number on a separate line. I had to call the procedure in the PhonePicker1.AfterPicking event, below the add items to list block, so that the updated list is displayed. The call to the procedure replaced the blocks that set the MembersLabel.Text directly to the list.

To allow the user to remove a phone number from the list, I had to get the PhoneNumbers list into the RemoveListPicker that appears when the user clicks "Remove Member". Unlike the PhonePicker component, which gets its data from the phone's contact list, ListPicker requires you to explicilty load the items that will appear. I did this by setting the Elements property of the ListPicker component. I did this within the RemoveListPicker.BeforePicking event, which is triggered right when the user clicks the button but before the list is shown.

Next, I coded the RemoveListPicker.AfterPicking event so that the user's choice is removed from the PhoneNumbers list.

When changes are made to the PhoneNumbers list, they are also stored in a databse. I had to add a behavior so that the data stored in the database is loaded when the app launches. 

I programed the Screen1.Initialize event-handler so that the saved list of phone numbers is retrieved from the database and placed in the PhoneNumbers list and the display is updated to show the list:

Ta-da! This app took a looooong time, partly because I was skipping small things (I wasn't reading properly). I think it's working now though!