More Notifier

A few days back I posted a tutorial about using the notifier component to give some feedback to the user if they tried to hit submit without entering a value in the field being submitted. We don’t want null values, unless there is an explicit need for them in your app. We also want to handle all possible scenarios that could come up. The specific situation will depend on what you’re building and the notifier is one of my favorite components as you can almost use it without much else to build a flow into your application.

In this tutorial I will show you various uses of the notifier, using a single text field and a submit button. I want to submit a value, display it, then submit a new value that will overwrite the old one. This presents a couple problems. First, as in my previous notifier tutorial I need to handle a null value, and second, I need to handle protecting existing data so that the user does not accidentally replace something.

viewer

Pretty simple UI. I’m using a vertical screen arrangement, which contains a horizontal arrangement and my button and textbox. I also have a label and the notifier component. The label text is blanked out, because I don’t want this to show up until I hit submit.

Here is the first set of blocks

blocks1

Here is what happens when the user clicks the submit button.

Use case 1: User does not enter anything and clicks submit

  • The first “if test” is called and it checks if the textbox is equal to null.
  • If the test returns true, then-do will call the notifier.showalert and display a message of my choosing via a text block.

Use case 2: User enters something, and there is nothing in the label1.text

  • This time the first if test will be ignored since it returned false and the next set of blocks is called, which contain a nested ifelse.
  • The first ifelse test will check if label1.text is NOT equal to null. In essence we are doing a simple verification to see if any data exists there.
  • As the use case indicates, there is nothing there yet, so the test will return false. (i.e. is the label not empty?)
  • The else-do of the first ifelse block will be called and display what was entered in the textbox over the label1.text label.

Use case 3: User enters something, that has already been entered

  • At this point the 3rd step test from use case 2 will return a true, because lael1.text at this point is NOT empty.
  • This will call the nested ifelse, which will first check if the value in label1.text is equal to the value entered in textbox1.text. I want to know…Is the user trying to enter something that they already entered (a duplicate value in the same field)?
  • So taking a step back, if the user originally entered the word “Hello” and tried to enter it a second time, then-do will be called.
  • At this point the notifier.showalert notice will be called, which calls pick random item from a list. In my example I use the global samevalueResponses list. It doesn’t have to be a list, it could be a single line that says “You are entering a duplicate value.” I went with this choice just to spice up the tutorial a bit and give a bit of depth to what can be done. Oh, I almost forgot…I declared a list variable…
blocks4
  • Every time the user hits submit, if the value in the textbox matches the value in the label, the alert will select a random item from this list and display it. It will keep displaying random items for as long as  blocks5
  • When that test returns a false, else-do will be called, which will call another notifier
  • This notifier will pop-up a message that informs the user that the field is not empty. It will in the same pop-up, tell the user what is currently in that field, and ask the user if the field should be left alone, or replaced. The title of this pop-up will be “Warning Field not empty!” and the user will be presented with two buttons. “Leave It” and “Replace It”
  • The next thing that happens is I setup the notifier.afterchoosing event which a variable of choice, which is holding the value of the response the user made to the previous question to “Leave It” or “Replace It”.
  • I have a single ifelse block to handle both choices. Since there are only two possible options, I test for one of them, I went with “Leave It” and if the value choice that the user clicked on was “Leave It”, then-do will be called, which will call yet another notifier.showalert, which will alert the user that “Data has not been replaced. Have a nice day.”
  • If the test did not return a true, meaning the choice in value choice was not Leave It, therefore it must be “Replace It”, else-do will call…you guessed it, another notifier, but this one is a .ShowTextDialog. Which will pop-up with the message “Type YES if you accept” and a title of “You’ve been warned!”. There will be a text field in this pop-up to accept user input.
  • To handle the response to the last notifier event, I use the notifier.aftertextinput block with a response of name response, which holds the value of what the user typed, into the previous notifier text dialog.
blocks2
  • I immediately test using an ifelse to see if that response equals the word YES (Don’t forget, everything is case sensitive)
  • The right side of the equals block is where I indicate what I expect the user to type. I gave them a hint, as to what I expect in the previous pop-up that said “Type YES if you accept”.
  • If true is returned, the user typed what I expected, then-do is called and it will set the label.text to the value from textbox.text, and replacing what was there before. It will exit with another notifier.showalert, to tell the user that the “Data has been replaced.”
  • If the response test is false, meaning the returned value from the previous pop-up was anything other than “YES”, else-do will be called and the final notifier alert will pop-up and tell the user…”I knew you’d see it my way!”

Considering what started out as an incredibly simple user interface, ended up being a fairly complex program. I used a single text field and label, to demonstrate the many possible uses of the notifier, and how you can nest notifier events one after another to create a well rounded application that will lead your user from point A to point B and constantly keep them informed of what is going on and give them the option to make valuable decisions when taking actions.

blocks6

You may also like...