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

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

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

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 menuPick

Also 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.

29 Comments

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.

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.