- Four text boxes
- A label
- Two buttons
- An image component
- A checkbox
- A listpicker
- A TinyDB
- Three HorizontalArrangements
- Two VerticalArrangements
Once we’ve got our design set up the way we want it, we can move right into setting up our code blocks. When the goal of the app is saving information to a TinyDB, I generally will code my save button first since that will be the backbone of the application.
For the save button, we’ll need to add an IfElse block that will check to make sure that what we are going to upload to our TinyDB isn’t already in the list so we don’t end up overwriting the tag when we don’t want to. When we’ve got that portion in place, we can code the “else” portion of the block to upload our person’s name into the DB with all of our text boxes, picture, and checkbox values saved as sub-elements of that name. The next thing we need to do is make sure that the name gets loaded into the defined variable list so we can upload that list to our TinyDB and extract the relevant information for populating our form elements.
Remember that there will be two lists we’re saving to the DB: one is the list of info relevant to the person, and the other is the list of persons we want to save information for. Once we’ve saved our person’s name to the list, we can then save that list to the TinyDB and then populate our listpicker with all the names that’ve been saved into the variable list. Since we might want to add another person to our database, we’ll code the program to clear all of the elements in the application to prepare for the next person.
Next comes the coding of the listpicker and pulling the information from the database to display properly in our app when we select a name from the list. Because we defined the valueToStore to the TinyDB as a list of information, we can’t just arbitrarily pull the information out and plop it anywhere we want to.
Each list item has an index, and this index must match exactly in our “select list item” block that it does in our TinyDB list of information for the person we’re going to look at. If the first item in the list, when uploaded to TinyDB, is their date of birth, we have to set our index value in our “select list item” block to 1, since that’s the same index value as the date of birth. This is especially important for this application when we’re uploading a checkbox value and picture to the DB, in that you can’t specify a value of a checkbox as anything other than True or False without receiving an error and crashing the program. A picture named incorrectly might not necessarily crash the app, but it definitely won’t display anything if the name of the picture doesn’t match with the picture that’s saved in the TinyDB. Once we know the order of information in the list, that trouble is gone and we can then tell the program to pull the information for the person we want to look at, and in order to do that, we have to use the GetValue block and insert the ListPicker.Selection value into it. Remember that we uploaded the name of someone as a tag to the TinyDB, and that value is then stored on the DB and we can access it.
Once the code for the listpicker is setup, we can move on to setting up the Screen1.Initialize portion of the app.
In here we’re going to need another IfElse block and use it to check whether our TinyDB tag for our variable list is in existence. If it is not there (the tag is blank), then we don’t do anything, so we don’t end up with an error; if it is there, we want to pull it out of the DB and upload the list to our variable and populate our listpicker with it.