Configure select menus and radio buttons
Both the select field and the radio field provide a way for a user to choose from a set of predefined options. For example, the following select field gives user a choose of three different subscription levels:
Of course, before you can give users the chance to select from a predefined set of options you need to define those options. To find out how to do that, just keep reading.
To define the options for a select field or a radio field, start by clicking Configure Options:
In the Select Options dialog, click Import Options as CSV to import your selections as a comma-separated values file or click Add options manually to manually enter those selections. We’ll start by manually entering the selections:
Manually enter option values
To manually enter option values, do the following:
-
Type the selection value in the Value field. The Value is the data that will be written to the user profile if the option is selected; note that this might differ from the Label, the text that appears in the UI. For example, you could set the Value of a selection to US (a two-letter country code) but set the Label to United States. That way, users select United States, but the value US is written to the user profile.
By default, the Console sets the Label to the same value you entered in the Value field.
-
Leave the Disabled checkbox unselected (unless, for some reason, you want to display the option but not give people the opportunity to change that option).
-
Select Pre-selected for the option that serves as the default selection (and, by extension, is the value saved to the user profile if the user doesn’t specify otherwise). Note that you can only have one pre-selected option, and that you must have one such option: you can’t display a dropdown list or a set of radio buttons without a default selection.
After entering your first option, click the plus sign (+) and then enter a second option. When you’re finished, the Select Options dialog should look something like this:
Note that you always need to click +after entering an option; if you don’t, that option won't get entered. For example, the following screenshot makes it look as though you’ve entered two options:
In reality, however, you’ve only entered the US option: note the unclicked + at the end if the CA option. If you Save your options now you’ll end up with this:
To avoid that problem, make sure that an X appears at the end of each option:
To save your changes, click Save. When you do that your configured options will not be displayed onscreen; instead, you’ll simply see the Configure Options button:
To actually see your changes, click Configure Options:
Incidentally, you can remove an option at any time simply by clicking the appropriate X. For example, here we’ve removed the CA option:
Removing options is useful, because you can’t change the Value or the Label after it’s been added. For example, suppose you enter an option with the following label: Unitde States. The only way to fix the misspelling is to delete the option and create a new one.
One thing that you can do, however, is drag and drop the options in order to rearrange the display order: just click the move handle located to the far left of each option, hold down the mouse button, drag the option to a new location, and then release the button. For example, here we’ve rearranged the options to be in alphabetical order:
Import option values
Instead of entering your options manually you can import them from a CSV (comma-separated values) file. Your CSV file (which must have a .csv file extension) should look something like this:
value,textdisplay,disabled,pre-selected
CA,Canada,false,false
MX,Mexico,false,false
US,United States,false,true
The preceding file consists of four fields, with the first line in the file representing the field names and subsequent lines representing the individual options. Those four fields are:
Field | Description |
---|---|
value | Value written to the user profile, and equivalent to the Value column in the Select Options dialog. This field is required. |
textdisplay | Label displayed in the user interface, and equivalent to the Label column in the Select Options dialog. This field is optional: if a value is not entered then the value field will be used as the UI label. |
disabled | Set to true if you want the option to be displayed but to be unavailable for selection. This option, which is equivalent to the Disabled column in the Select Options dialog, is optional: if no value is entered disabled is set to false. |
pre-selected | Set to true if you want this option to be the default option. You must configure one (but only) one option to be the default. If left blank, pre-selected is set to false. This option is equivalent to the Pre-selected column in the Select Options dialog. |
Note that leaving an option blank simply means including the required number of commas, but not entering a value. For example:
value,textdisplay,disabled,pre-selected
CA,Canada,,
MX,Mexico,,
US,United States,false,true
After creating your CSV file, you can import the file by clocking Import Options as CSV in the Select Options dialog:
From here you can either drag-and-drop the file into the dialog box, or click Upload a File to select the file from your file open dialog:
Note that the only files that can be selected are files with .csv file extension. In the preceding screenshot, you might have noticed that files that don’t have a .csv file extension are grayed-out and cannot be selected.
After you’ve used drag-and-drop or the file open dialog to select a CSV file, click Save to save your newly-imported set of options.
Updated almost 3 years ago