Using Option Menus
This tutorial describes how to use the option menu for selecting an item from a list of items.
You can download the stack from this lesson here: https://tinyurl.com/ybfomado
Introduction
The option menu is a configurable list of a fixed number of items from which you can select an item. For example, you may want to use this kind of menu when selecting the title someone has, or the color of paint when you are buying a new car. In this tutorial we cover how to set up an option menu and return the value someone selected.
Creating the Option Menu Control
Open LiveCode and select New Stack from the File menu. This creates a new stack window on which to create the option menu. Drag and drop an option menu control onto the LiveCode card (1). By default, this control has three values from which you can select an item. Open the Property Inspector by right clicking the option menu and selecting Property Inspector (2). In the Basic Properties view, you can change the name of the Label to a default value that is displayed when the option menu is first displayed. You can also change the Menu Items (3) to the values that should be selectable from the list of items.
In this example we are setting the Label to "cat", and the Menu Items to "cat", "dog", "mouse", "elephant", "whale" and "crocodile".
Adding the Option Menu Code
Once you have specified the options that are to be displayed in the option menu, you can add the code that processes the selection. Right click on the option menu you created and select Edit Script (1). This opens the script editor. Select the "menuPick" handler from the drop down list or the list on the left. The code provides you with a handler that is called when someone makes a selection, and a framework that allows you to process the selected item. The switch statement provides you with the means to identify what item was selected from the options menu.
Processing the Selection
In order to process the selections from the list, it is necessary to expand the case statement in the default code. In this example the case statement creates short dialog boxes with information about each animal that is selected. Individual case statements are ended with break statements.
on menuPick pItemName
switch pItemName
case "cat"
answer "A cat is larger than a mouse." with "Okay"
break
case "dog"
answer "A dog is man's best friend." with "Okay"
break
case "mouse"
answer "A mouse does not only eat cheese." with "Okay"
break
case "elephant"
answer "An elephant has a good memory." with "Okay"
break
case "whale"
answer "A whale is not a fish." with "Okay"
break
case "crocodile"
answer "A crocodile is reptile." with "Okay"
break
end switch
end menuPickAlso notice the way the items are displayed (1). Only five of the possible selections are displayed on the screen. This is because Display in the Property Inspector is set to 5. Try changing this value and see if you can make the scroll bar disappear.
David Smith
Cannot get " whale" to answer!
Have enough options available.
Checked spelling , grammar and layout -stumped any ideas?
Elanor Buchanan
Hi David
Is it only "whale" that will not answer? Have you checked that you have the break statements in each case?
You could also try stepping through the script using the debugger to see what values you have and which case is being matched.
I hope that helps.
Kind regards
Elanor
Erick Franco
How would I set up an option menu to go to a certain card that
is related to a certain option in the menu? For example, if the user chooses the option "Chest" ( for muscle group in fitness app) and I want the user to be taken to a "Chest" card that lists Chest exercises when they hit the Next button OR a "Triceps" card that lists Triceps exercises when they choose that option out of the list and hit the Next button.
Hanson Schmidt-Cornelius
Hi Erick,
here are the steps to set up this kind of process.
1. Create a card that contains an "Option Menu" and a "Button"
2. Open the "Property Inspector" for the "Option Menu" and call it "ComboBox"
3. Create the "Menu Items" in the "Option Menu" and name them something like: "chest", "arms", "hips", "legs" …
4. Edit the script of the button and add the following code:
on mouseUp
go to card the selection of button "ComboBox"
end mouseUp
4. Create a number of cards.
5. Use the "Application Browser" to set the name of each card to the names you created for the "Menu Items" of the "ComboBox": "chest", "arms", "hips", "legs" …
6. Test the application
A sample stack "chest.livecode" is attached to this lesson.
Kind Regards,
Hanson
John
Brilliant! going through all these lessons and loving LiveCode more and more!
Thanks for the tutorial!
Mark Smith
Couple of things not mentioned here.
1. The "choice" is recorded in the button label so you could just read that to get the result: "If the label of btn "Option Menu" is "Go" then... or "put the label of btn "Option Menu" into fld (or custom property) "xxx". In other words, depending on what you want to do you don't necessarily need to use a case statement.
2. You can dynamically set the default value of the option menu by setting the value of the label.
Dave
i cannot seem to get more than the three choices up on the option menu ,can only do cat, dog ,mouse, how do i expand the choices please ..newbie, thanks.
Hanson Schmidt-Cornelius
Hi Dave,
I am not quite sure at what stage you are having the problem. Either inserting the option values in the Property Inspector or actually only seeing three of the options appear when you are trying to select them from the Option Menu.
If you are having trouble inserting more than three items into the Menu Items field of the Property Inspector, then note that each entry is separated by return and not by comma. You can add a new entry by pressing return after the last entry in the Menu Item field of the Property Inspector.
If you are having trouble displaying more than three items when you try to select an item from the Option Menu, then you can try to increase the number of items to display in the Property Inspector. Under the Menu Items field you can find a Display Items entry that has a number associated with it. Increase that value and you should see more entries.
Kind Regards,
Hanson
Rick
Do option menus work in Android? My code is running fine, but the option menu does not work in Android
Hanson Schmidt-Cornelius
Hi Rick,
mobile and desktop operate slightly differently and some features that you would expect on the desktop are not not available in a mobile form and vice versa. This is the case for the "Option Menu".
You can use the mobile equivalents, such as "mobilePick" and the "Pulldown Menu".
Kind Regards,
Hanson
bill wester
I want to use a script to load a "Title" option menu from a CSV file. If the CSV file changes the number of items in the option menu will change. I have been able to do this in Visual Basic, but am switching to LiveCode.
Any help? Thank you.
Hanson Schmidt-Cornelius
Hi Bill,
you can do that in LiveCode too.
Load the file into memory. Have a look at this lesson for some info on loading text files: http://lessons.runrev.com/s/lessons/m/4071/l/9600
Then you may want to use a loop that goes through the data in memory and extracts the information you want to appear in the options of the option menu.
Some relevant items to look up in the dictionary may be: repeat, itemDelimiter, item, word.
You would then populate the content of the option menu as follows:
set the text of button "Button Name" to "item 1" & return & "item 2" ....
Hope this helps.
Kind Regards,
Hanson
David
I have a slightly different issue. I'm using an SQLite database to populate the option list. I have a text string I'd like to show the user and an associated ID number that refers to the db record. What I'd like to do is easily map the option choice to the ID number. I don't want to show the ID number - i.e. I could have the menu text include the number - but that's not the goal. I've solved this in the past with a hidden field that contains the ID numbers in the order in which they're presented, then have to do an itemoffset search for the line number, but what a pain. Is there a more direct mechanism?
-- Thanks, David
Hanson Schmidt-Cornelius
Hi David,
well there is no direct way to store hidden information with an item in the option menu. So what you describe certainly is a valid approach. A look up of kind is necessary.
You could create a lookup array or list of items that is stored in the custom properties of an option menu.
This allows you to wrap the lookup information into the option menu control, without needing other controls outside of the option menu.
I would then also suggest to add some code to the option menu script, hiding the lookup functionality through simple commands/functions that you can call from your main code.
Kind Regards,
Hanson
Darrin
Hello,
New to LC but looks like a better way to build apps rather than struggling with xcode.
I have a mysql database and am connected to it. I am able to insert data into it.
I have two buttons that the user will selection year and sex results. When I add the record to it, all of the possible selections are added to the database. For example the choices include: male, female and coed. I select male however all of the items are inputted.
Below is the code I am using. Any help is appreciated.
Thank you.
on mouseUp
-- check the global connection ID to make sure we have a database connection
global gConnectionID
if gConnectionID is not a number then
answer error "Please connect to the database first."
exit to top
end if
-- edit these variables to match your database & table -- this assumes a table called Table1 with 3 fields
put "Teams" into tTableName
put "TeamName, City, Year, Sex" into tFields
put field "TeamName" into tTeamName
put field "City" into tCity
put button "Year" into tYear
put button "Sex" into tSex
-- this is nonsensical but gives some variation to the data
-- construct the SQL - the :1, :2 & :3 placeholders in the SQL will be filled by variables in the revExecuteSQL line
put "INSERT INTO " & tTableName & " (" & tFields & ") VALUES (:1, :2, :3, :4)" into tSQL
-- send the SQL to the database, filling in the placeholders with data from variables
revExecuteSQL gConnectionID, tSQL, "tTeamName", "tCity", "tYear", "tSex"
-- check the result and display the data or an error message
if the result is a number then
answer info "New record added."
else
answer error "There was a problem adding the record to the database:" & cr & the result
end if
end mouseUp
Hanson Schmidt-Cornelius
Hi Darrin,
try the following:
put the selection of button "Year" into tYear
Kind Regards,
Hanson
Tracy
I really wanna to use the label which is selected from option menu. And put the label into the SQL.
The name of my option menu is "TYPE".
put "Table1" into tTableName
put "typeName, styleName, levelName"
into tFields
============
--Here I open a new card with a field named "f1"--
put the label of button "TYPE" into field "f1"
put field "f1" into ttypeName
Those two commands don't work.
Is there any idea that can help to store in a easy way?
- Thanks, Tracy
Jeff
I'm using an option menu for the user to select between three operational speeds. Based on their selection, a tolerance needs to be calculated. This is the option button structure:
case "900 rpm"
put "5" into var900offset
break
case "1800 rpm"
put "4" into var1800offset
break
I have a button on the same page, when pressed/released performs a movement calculation and also needs to determine if the calculated numbers are in tolerance. So, I'm looking for the syntax for the calculate button to put the variable into my formula when the user selects from the option menu.
It's giving me fits, but this is also the first app I'm working on and have never coded anything before.
Thanks for any assistance!
Elanor Buchanan
Hi Tracy
If you are referring to a control that is not on the current card you just need to tell LiveCode where to find that control. So, I think, the option menu is on one card (Card 1) and the field is on another, in that case you need to say
put the label of button "TYPE" of card 1 into field "f1"
put field "f1" into tTypeName
this is assuming you are on the card that has field "f1" on it.
I hope that helps.
Elanor
Elanor Buchanan
Hi Jeff
When you create a variable in LiveCode it is a local variable, that means it can only be accessed within the script it is created in. In your example you are setting up the variables in the option menu and then trying to use them in the button script, where they are not available.
You can get around this using global variables, script local variable or custom properties, whichever option seems simplest to you.
Have a look at chapters 5.5: Variables and 7.8: Custom Properties in the User Guide, which can be found in the Help menu.
You might also find these lessons useful
http://lessons.runrev.com/m/4603/l/284467-variables-in-livecode
http://lessons.runrev.com/m/4071/l/13158-what-are-the-alternatives-to-using-global-variables
I hope that helps.
Elanor
Stam
I may have completely missed this, but what is the 'menu panel stack' option? Can't see to find a reference to this anywhere...
Elanor Buchanan
Hi Stam
Do you mean using the popup or pulldown command to display a stack as a menu? You can find out more about these command in the Dictionary entries.
If that is not what you meant please let us know.
Kind regards
Elanor
floris
I want that when I press a name in the menu. that I then go to another page
Elanor Buchanan
Hi floris
In the menuPick handler you can use the go command to do
go to card
I hope that helps.
Elanor
floris
Hi Elanor
What is the code that i can use for it.
Elanor Buchanan
Hi floris
You probably need something like
on menuPick pItemName
go to card pItemName
end menuPick
Kind regards
Elanor
Jeff Jansen
Is it possible to change the background colors on an option menu? You can change the text color and the hilite color, but I don't see any way to change the background color. It always remains a light gray.
Panos Merakos
Hello Jeff,
Unfortunately there is no way to change the background color of an option button.
However, you might be able to "fake" this by setting the colorOverlay and tweaking the opacity of the chosen effectColor. You can do this in the "Effects" tab of the property inspector.
Hope this helps.
Jeff Jansen
That does indeed work for setting a background color. I've never played with the effects tab. You've given me another valuable tool in my Livecode toolkit. Thank you.