Tim Dietrich

Custom Software Developer

Home Services Portfolio Blog About Contact Newsletter

LiveCode: Dialog Boxes

I'm continuing to explore LiveCode, and want to share some of what I've learned. This is the first in what I hope will be a series of posts about various aspects and features of the LiveCode language. In some situations, you might need to provide a user with information, or ask the user to provide information. Of course, you could create a card to display the information, or a form to collect information. However, depending on the type of information involved, you might be able to use a dialog box instead. LiveCode fully supports dialog boxes, and it does so using its "ask" and "answer" commands. The following code is a "mouseUp" event handler that I have attached to a button.
on mouseUp
   
   ask "What's your name?"
   
   if it is not empty then
      answer "Hello, " & it & ". It's nice to meet you!"
   end if
   
end mouseUp
When the button is clicked, the following dialog box is displayed.

If the user enters a value and clicks the OK button, then they will receive the following dialog box as a response.

Let's review the code...

The Ask Command

First, the "ask" command is being used to display the first dialog box. The user is asked to provide a value, based on the "What's your name?" prompt. The dialog box displays the prompt, a field for the user to enter a value into, as well as standard OK and Cancel buttons.

The "It" Variable

Next, we have an "if / endif" code block, which I'll talk more about in a moment. But first, in the example, notice that the condition being evaluated is "it is not empty." In LiveCode, "it" is a special variable that a handful of commands place values into. One of those commands is ask, and others include get, read from file, and dispatch. Note: You can also use the "it" variable to store temporary values. For example: put "something" into it Due to the temporary nature of the "it" variable, it is good practice to store its value in another variable (so that you don't lose it). For example:
on mouseUp
   
   ask "What's your name?"
      
   put it into User_Name
   
   if User_Name is not empty then
      answer "Hello, " & User_Name & ". It's nice to meet you!"
   end if
   
end mouseUp
I have added the line "put it into User_Name" after the "ask" command. This takes the value that was provided by the user and stores it in the "User_Name" variable.

The "If / Endif" Control Structure

Now let's take another look at that "if / endif" code block. We refer to this as a control structure, because it controls the path that the LiveCode engine will take. If the condition is true, then LiveCode will execute the code in the block. In this example, the condition is "User_Name is not empty." If the name is not empty, then LiveCode will execute the "answer" command. Otherwise, it will do nothing. LiveCode also supports an "else" clause, which can be used to have LiveCode follow an alternative path if the condition is false. For example:
on mouseUp
   
   ask "What's your name?"
      
   put it into User_Name
   
   if User_Name is not empty then
      answer "Hello, " & User_Name & ". It's nice to meet you!"
   else
      answer "Don't worry, I'm a little shy, too."
   end if
   
end mouseUp
I have added an "else" clause to the control structure, and an alternate "answer" command that LiveCode will execute when the condition of the if clause is false. In other words, if the value of User_Name is empty, then the second "answer" command will be executed, and the user will see this dialog:

It is also possible to add multiple conditions to an "if / else" control structure. For example, suppose that we want to display an alternative message to a user if they enter "Tim" in the dialog box. Here's an example:
on mouseUp
   
   ask "What's your name?"
   
   put it into User_Name
   
   if User_Name is "Tim" then
      answer "Hey, I recognize you!"
   else if User_Name is not empty then
      answer "Hello, " & User_Name & ". It's nice to meet you!"
   else
      answer "Don't worry, I'm a little shy, too."
   end if
   
end mouseUp
I have modified the control structure so that the condition of the first "if" clause is different, and I have added an "else if" clause as well. When LiveCode evaluates the condition of the first "if" clause, and if the User_Name value is "Tim," then the first answer ("Hey, I recognize you!") will be displayed. Otherwise, LiveCode evaluates the condition of the second "if" clause, and if the User_Name is not empty, then the second answer ("Hello...") will be displayed. And finally, if none of the previous conditions are true, then the third answer ("Don't worry...") will be displayed. Note: It is possible to use additional "else if" clauses. However, if you have a number of conditions that you want to handle, you might want to consider using LiveCode's "switch" control structure.

The Answer Command

Which brings us to LiveCode's "answer" command. Like the "ask" command, the "answer" command displays a dialog box. However, unlike the "ask" command, the "answer" command only displays information to the user. In the script above, I used three answer commands, and two of them (the first and the third) display static text. The second answer command concatenates static text with the User_Name variable to display a dynamically generated response.

Using Window Titles

In the screenshots above, you might have noticed that the dialog boxes do not have window titles. This isn't a problem, but it would be nice if they had titles. Window titles another way to help the user understand the purpose of the dialog box. LiveCode's "ask" and "answer" commands support window titles. For example:
on mouseUp
   
   ask "What's your name?" titled "Welcome!"
   
   put it into User_Name
   
   if User_Name is "Tim" then
      answer "Hey, I recognize you!" titled "Hi Tim!"
   else if User_Name is not empty then
      answer "Hello, " & User_Name & ". It's nice to meet you!" titled "Hello!"
   else
      answer "Don't worry, I'm a little shy, too." titled "No Problem!"
   end if
   
end mouseUp
I have added "title" clauses to the ask and answer commands. As a result, here is what the dialog boxes look like:




As you can see, the windows now have titles.

Using Icons

By default, when a dialog box is dislayed, a LiveCode icon is shown. This is the default icon. However, it is possible to display alternative icons. For example:
on mouseUp
   
   ask information "What's your name?" titled "Welcome!"
   
   put it into User_Name
   
   if User_Name is "Tim" then
      answer information "Hey, I recognize you!" titled "Hi Tim!"
   else if User_Name is not empty then
      answer warning "Hello, " & User_Name & ". It's nice to meet you!" titled "Hello!"
   else
      answer error "Don't worry, I'm a little shy, too." titled "No Problem!"
   end if
   
end mouseUp
Notice that I have added an "information" keyword to the "ask" command, as well as keywords (information, warning, and error) to the three "answer" commands. The dialog boxes now look like this:



A few notes about the icons that LiveCode supports: • The icon types that are supported include information, question, error, and warning.
• The question icon is not supported on the Mac platform. If you use it, LiveCode will substitute the information icon.
• Icons are not supported by iOS or Android. If you use them, they will be ignored.

Asking With Default Values

There is one additional option of the "ask" command that I want to mention. In some cases, you might want ask the user a question and provide them with a default value, one that is pre-entered into the field. In the example above, where we are asking the user for their name, using a default value doesn't make much sense. In any case, here's what the script would look like:
on mouseUp
   
   ask information "What's your name?" with "Jane Doe" titled "Welcome!"
   
   put it into User_Name
   
   if User_Name is "Tim" then
      answer information "Hey, I recognize you!" titled "Hi Tim!"
   else if User_Name is not empty then
      answer warning "Hello, " & User_Name & ". It's nice to meet you!" titled "Hello!"
   else
      answer error "Don't worry, I'm a little shy, too." titled "No Problem!"
   end if
   
end mouseUp
Notice that I have added a "with" clause to the "ask" command. The value specified ("Jane Doe") will be the default value. It will be pre-loaded into the field when the dialog box is displayed, as shown below.

When using the ask command, the order of its clauses is important. While this ask command is valid...
	 ask information "What's your name?" with "Jane Doe" titled "Welcome!"
... this one is not:
	 ask information "What's your name?" titled "Welcome!" with "Jane Doe"

Behavior of The Cancel Button

A few final notes about the "ask" command. When the dialog box is displayed, the user is presented with both an "OK" button and a "Cancel" button. Let's look at the behavior of the "Cancel" button. Suppose that the user enters a value into the field, and instead of clicking the "OK" button they click the "Cancel" button. In that case, the value that the user had entered will simply be ignored, and the value of the "it" variable will be empty. Also, it is possible to determine if the user has clicked the "Cancel" button. You can do so using LiveCode's "result" function. For example, here's an updated version of the script:
on mouseUp
   
   ask information "What's your name?" with "Jane Doe" titled "Welcome!"
      
   put it into User_Name
   
   if User_Name is "Tim" then
      answer information "Hey, I recognize you!" titled "Hi Tim!"
   else if User_Name is not empty then
      answer warning "Hello, " & User_Name & ". It's nice to meet you!" titled "Hello!"
   else if the result is "cancel" then
      answer "You clicked cancel. Well, ok..." titled "Cancelled"
   else
      answer error "Don't worry, I'm a little shy, too." titled "No Problem!"
   end if
   
end mouseUp
Notice that I have added another "else if" clause, and its condition is: the result is "cancel" Now, if the user clicks the "Cancel" button, they will get this response:

However, if the user clicks the "OK" button without providing a value, they will still receive this response:

Wrapping Up

As you can see, LiveCode's "ask" and "answer" commands make it very easy to implement dialog boxes in your solutions. The commands are simple, yet powerful, especially when they are used with the "if / else / end if" control structure, the special "it" variable, and the "result" function.