List & List Manipulation

12 May

Many apps use lists of data. For example, an catalog system might use lists to keep track of books. We use lists to create and manipulate different sets of values/elements.



In this tutorial, we will create a Book Collection app. The app will show you how to:

  • Create List
  • Add items to List
  • Remove List Items
  • View all List Items
  • Search List and use index
  • Join  text to create List item
  • Split List item
  • Store Lists in database (TinyDB)
  • Retrieve data from database
  • How to use procedures that return data
  • How to perform data validation

Image below shows how the app will look like:



The components in the Design Editor are shown in the below diagram:


The blocks are shown in the diagram below.

  • Initialize 3 variables as follows:
    • TAG_BOOKS – used for storing book collection to database
    • listBooks – used to store / manipulate List of book data (Title : Author)
    • varTemp – a general purpose variable
  • initData procedure – On app start-up, it:
    • Sets up ListPicker title
    • Hides the ListPicker (we use a button to open it)
    • Sets up initial demo data into our database (happens only on app initial install).  This procedure uses attempts to get the data from database. If data does not exist, then it uses demo data in csv format, splits using comma (,) and assigns it to our temp
  • Screen.Initialize — used to check if first time installation. This is done by checking if any database table exists. If not, it will then invoke initDatabase procedure


We also define the following procedures:

isDataEntered – This procedure gets invoked when we try to add a book to the list. It performs validation to ensure data in both fields are entered. It returns false if either book name or book title is not entered.

isExistingBook – This procedure gets invoked when we try to add or delete a book to the list. It joins the book Title / Author in form of Title:Author and then checks our List to find out if exist or not. If it exists, it returns true, else false


Adding a book – when the button ‘Add’ is clicked, it invokes the procedure isDataEntered.

  • If a false is returned from the procedure (i.e. data was not entered in text fields), we display error message.
  • If true is returned, then we invoke procedure called isExistingBook. The procedure checks to see if data already exists in our list. If it does, we display error message otherwise a join title, author in format of Title:Author and stores it into our list. It also stores this latest data into our database using our TAG variable



Viewing books in ListPicker: When ‘View’ button is pressed, we invoke the ListPicker.Open to show data. This will cause the BeforePicking block of ListPicker to be triggered. Once triggered, we set its elements to listBooks which contains our book collection data. Next, the picker will open showing data:


Data in the picker (image above) is displayed in form of BookTitle:BookAuthor. When a selection is made, the AfterPicking will be invoked. At this time, we take data for the current select, split it at color (:) and assign it to a temporary variable (varTemp) as a list. The list will have 2 items with first item as BookTitle and 2nd item as BookAuthor. The next blocks take item 1 (BookTitle) and set it into text field (txtBookTitle) and will take 2nd item (BookAuthor) and set it into text field (txtBookAuthor).



Deleting books: To delete a book, user can select an existing book from the picker (see above). User can also manually enter title / author into text fields and then click the ‘Delete’ button. Once clicked, we invoke procedure isExistingBook. The procedure (see above) checks to see if book exist in the list and based on that returns true or false. If false (book not found), we display error message. If found, we join the data from text field using color (:). Next we check for this Title:Author and get its index from our list variable listBooks. The result (index) is saved into our temp var varTemp. Next using that index number, we remove the item from our list. We then save the updated list of books into database using the TAG we had defined as the key.


Resetting the database (book lists)

To re-initialize the database and remove all books (reset the list), we have provided a button btnClearList (Clear Book List). The blocks below show hot to reset the book list and re-init the database:




Current code does not check for case. Update the code if mixed case is used for book title/author, it would perform proper validation. You could also store all data in upper case prior to storing into list and database.



  • Click HERE to download .apk


Mobile App Development


Posted by on May 12, 2014 in Uncategorized


8 responses to “List & List Manipulation

  1. Antonello

    July 31, 2015 at 3:47 pm

    And for edit the Book or Author????

  2. Robert

    January 6, 2015 at 3:38 pm

    Great Tutorial. It works! thanks.
    I’am using this for something to store web URL’s. But these have a colon in the line of text.
    Now the text is not added correctly. The texst after the colon is deleted.
    How can i avoid/correct this?


  3. Bijaya Paudel

    October 12, 2014 at 8:52 am

    How to setup “initialize global ‘variable'” block ? I can’t find it anywhere…

  4. Angie Del

    July 26, 2014 at 11:01 am

    What is initData?, and how do I get the purple block from the blocks editor that can ‘call initiData’? (I saw this is in the third image down from the top).

  5. Herpes Labialis Treatment

    June 17, 2014 at 4:58 am

    Hello there! I simply want to offer you a big thumbs up for the excellent information you have got right here on this post.
    I’ll be coming back to your blog for more soon.

  6. Peter Gebauer

    June 16, 2014 at 2:47 pm

    Book Collection app as Aia file would be nice!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: