Using TinyWebDB - a web based persistent data solution

There are some people asking in the forums about how to use TinyWebDB, so I want to help.  I'm not going to bother telling about how to setup the WebDB...that information is available here.  Once you've gotten the service setup, read on.

Let's start with the components:

⦁ 1 label
⦁ 2 text boxes (one set to multiline)
⦁ 1 button
⦁ 1 listpicker
⦁ 1 clock
⦁ 1 TinyWebDB
⦁ 1 Notifier
⦁ 1 VerticalArrangement
⦁ 1 HorizontalArrangement

You can see how I've arranged the app in the picture to the left, as well as the names assigned to the elements.  

Once you've gotten it setup how you want it, open the blocks editor and let's get to it.

There are relatively few blocks to this app, and not a lot of complexity.  The first thing we need to do is define a global variable, listOFTags, as an empty list.

Once that's done, let's setup the button click event.  

We need a mutated if block to get an else condition.  We're going to test whether our list contains the name of the document, txtDocName.text.  I use the trim block from the text drawer to make sure there's no trailing spaces the user forgot to remove but this isn't necessary.  If the name entered is in the list, we want to alert the user and have them choose something else to call it, so we need the Notifier.ShowMessageDialog populated with an alert of some kind.  We also want to clear the text box of any text to make sure the user has to enter something else.  For the else portion, since the entered name isn't already in the list, we want to add it to the list, and store it as a tag in the WebDB with the value being the text of the other text box.  Once that's done, we need to store another value, this time the list, under the tag list so we can import all the data from the WebDB.  Because there's no GetTags function for the WebDB, we have to have a way of knowing what is saved there so we can view the info later, without having to go to the website to look.  Now we need to load the list into the listpicker, enable the listpicker, and remove the text from the two text boxes.  

With the WebDB, because there is an Internet component to it, it has a unique event you won't find with the normal TinyDB: ValueStored.  With this event we can let the user know that the info they uploaded to the DB was saved, and didn't result in an error, so we'll use the notifier to show an alert that simply says "Database successfully updated."  

Let's fix up the Screen1.Initialize and lstpLoad.AfterPicking events with a TinyWebDB.GetValue command.  

The tag for the Screen will be the same we used for uploading our list to the DB: list.  For the listpicker, the tag will be the selection from the listpicker, because they're all unique tags on the DB with the entered text of the other box as their values.

Perhaps you're wondering what the clock is for...well, as I show on my Fun With the Clock examples page, it's for enabling or disabling the save button depending on whether there's text in the DocName text box.  You should make sure the interval of the clock is set to 50 milliseconds and then put an ifelse statement into the .Timer event and check for whether the text of DocName is empty; if it is, we need to disable the button, otherwise we enable it.

Now that those simple events are done, we'll configure the TinyWebDB.GotValue event.  Remember that we are retrieving a value in the Screen1 event, and that tag/value pair is a list.  So the first thing we need to check is whether the tag received is equal to list and whether the value of that tag is a list.  If both conditions are true, we set the global variable to the value of the DB and set the elements of the listpicker to the global variable.  This will give us our persistence with the database.  Without this logic check, we won't be able to read any of the tags saved on the DB once the app has been closed.  If those two checks are false (the tag isn't list and the value isn't a list) then they are, by process of elimination, equal to the selection of the listpicker and associated text, so we set the txtDocument.Text equal to the value and we print to the label Contents of {tagfromWebDB}:

And we're done!  Download the source below.

TinyWebDB.aia