How do I populate a field when an option menu is changed?

There are lots of situations where we might want to do something when a user selects an option from a menu. As an example this lesson will show you how to populate a field to display some information about what the user has selected. In this case we are displaying information about the different LiveCode products.

Store the data

Store the data

First we want to store the data we will use to populate the field. There are a number of ways we could do this, we could read it in from a text file, or have it stored on a different card. In this case I have chosen to store the information in a custom property set. This is an efficient way of storing the data within the stack so there is no need for external files or extra cards or controls.

A custom property set is basically an array. In this case the keys will correspond the the options in the menu and the contents of the array are what we want to display in the field. We will store the array as a custom property set of the card.

Firstly, double click on your card to bring up the Card Inspector, or right click on it and choose Property Inspector. Go to the "Custom" tab(1).Create a new custom property set by clicking on the circled + sign (2), then name it cVersionInformation (3) and save it by clicking OK (4).

Populate with the information

Populate with the information

We then add the data to our custom property set. We add a new custom property to represent each option by clicking the + next to Add New Element (1). In the Key field enter the name of the version (2) and in the Value field enter a description (3).

Once this is set up we can use array notation to access the data eg. if you run this in the message box:

put the cVersionInformation ["LiveCode Business"] of  this card

you should see the information about LiveCode Business. Bring up the message box by clicking it in the toolbar, enter the code above and press enter.

 

Create the interface

Create the interface

Now we create our interface, in this case an option menu (1) and a field (2). Name the button "version" (3) and enter "LiveCode Business" as the label(4). Populate the option menu with the choices you want (5). You will need to resize the button a bit to show the whole of the label. Name the field "Information", by selecting it, right clicking to open its Property Inspector, and entering the name in the Name field.

Add script to the option menu

Add script to the option menu

As we want to populate the field when an option menu is changed we create a menuPick handler in the script of the option menu. This checks which option has been selected, uses the option as a key to look up the array and populates the field.

on menuPick pItemName

put the cVersionInformation[pItemName] of this card into field "information"

end menuPick

Test it

Test it

Now we can select a version of LiveCode and read all about it.

Save current selection

Save current selection

We may also want to make changes to the content and save them. Add a button by dragging it out from the tools palette (1), open the Property Inspector by right clicking, and name it "Save" (2).

Script the save button

Script the save button

When the save button is clicked we want to update our custom property set with the contents of the field. With the button selected (1), open the code editor from the toolbar (2), and enter the code below (3). Again we can use array notation, but this time to store information rather than retrieve it.

on mouseUp

local tVersion, tInformation

 

put the label of button "version" into tVersion

put field "information" into tInformation

 

set the cVersionInformation[tVersion] of this card to tInformation

end mouseUp

Click apply. Switch to run mode and test it - you should be able to enter new text in the field and save it, for each version selection.

 

0 Comments

Add your comment

E-Mail me when someone replies to this comment