Genie Select Box

Changing a textbox to a select box

A typical textbox that you may want to change to a select box is an input field that will only accept a limited number of codes.  In this case it would make sense to allow the user to select the correct code (or a description of the code) from a select box.

By right clicking on a textbox, you can change it to a Dropdown. A dropdown is one type of select box.  The other type is called a list box.

Open

Open

Dropdown

A dropdown is the default type of select box.  Only the currently selected option is visible. Clicking the dropdown will reveal all other options available.

List Box

In a list box, two or more options are always visible. The currently selected option will be highlighted. This element takes up more “real estate” on your screen, but may be useful when you want other possible options to display right away.

To choose the list box option, change the select box height property to 2 or higher.

You may also have to remove the regular height property of the list box (right-clicking any property that is set should display a Remove Property option).  If the height property is set, it will override the select box height property above.

Loading a select box with Options

Select boxes have Choices and Choice Values.  The Choices are displayed to the user on the screen, while the Choice Values are the associated values sent to the underlying program.  In the examples above, the choices are the words “one”, “two”, “three”, etc., but the choice values are 1, 2, 3, etc.  If the user selects “five”, the underlying program will see it as a numeric 5.

Loading Fixed Choices

To hard-code a set of fixed choices into a dropdown, add a comma separated list into the “choices” and “choice values” properties.  The example shown below will populate the dropdown with Change and Display.  If Change is selected, 2 will be passed as the input value. There is an additional button to launch the Edit Choices dialog which will aid in entering and editing the list of choices.



Note: When the screen loads, the select box will be displayed with the correct option chosen to match the text in the original input field. Remember that a “required” input field may be blank when the screen first appears, particularly if the user is in the process of creating a new record.  To cater for this, most select boxes will need a blank option.  This is typically the first option.

Loading Choices from a Database File

You can load the choices and values from a database file. In the example below, a list of categories from a file called CATEGP is loaded into a dropdown box.  The choices (those visible to the user) will come from the Category Name field CNAME, while the associated values (those sent to the underlying program) will come from the category Id field CATID.

We start by entering the name of the categories file CATEGP into the “choices database file” property.

Then, we enter the choice options field name and the choice values field name.  You can type the field names or select them from a dialog launched by the button shown below.

The final categories dropdown will look as follows:

There are additional database file options that can be utilized.  The “choices selection criteria” property allows you to specify criteria in the format of an SQL WHERE clause.  You may also insert a blank option as shown below, and if necessary, limit the maximum number of options returned.  The browser will handle a few thousand options or less efficiently within a select box.  For lists larger than a few thousand options, a different type of control, such as an auto-complete textbox, should be utilized.

It is also possible to dynamically evaluate any element property by using the keyword "js:" or "script:".  We could for example change the choices selection criteria from: CATID>20 to script: "CATID>20".  This may not seem very significant until you realize that it is possible to introduce variables and dynamic expressions. 

If there is an output field on the screen which represents the minimum Category Id to use for our choices selection criteria, we can retrieve the value of this field and use it to build our criteria.

Assuming the output field has an Id of  D_4_10, our choices selection criteria could be entered as: script: "CATID>" + get("D_4_10")