Drop-down lists, radio buttons, and check boxes
Drop-down lists, radio buttons, and check boxes
Technologies / User Interface Add-Ins / Parts for Forms / Advanced Form Techniques / Drop-down Lists, Radio Buttons, and Check Boxes
Enumerated database fields can be represented by radio buttons or drop-down lists (this is the default), but not by checkboxes, because the field can only have a single value. Custom HTML fields can be represented by drop-down lists, radio buttons, or checkboxes.
Enumerated Fields
By default enumerated fields are displayed as drop-down lists. To display an enumerated field as a set of radio buttons, add the
controlType
property to the field:
<field name="status" controlType="radioButton"/>
Custom Fields
To display a custom (non-database) field as a set of radio buttons or checkboxes, define the field and its possible values using
option
elements:
<field id="costs_from" controlType="checkBox">
<title>Analyze Costs From</title>
<option value="cost_from_recur" selected="true">Recurring Costs</option>
<option value="cost_from_sched">Scheduled Costs</option>
<option value="cost_from_actual">Actual Costs</option>
</field>
You can display the same values as a drop-down list:
<field id="costs_from" controlType="comboBox"> <title>Analyze Costs From</title> <option value="cost_from_recur" selected="true">Recurring Costs</option> <option value="cost_from_sched">Scheduled Costs</option> <option value="cost_from_actual">Actual Costs</option> </field>
The
option
element text – e.g. Recurring Costs - is the text displayed on the form. It is translatable by default, like the title element text.
The
value
attribute is the stored value of the option when it is selected. It is available via the JS API, and can also be used as a data source parameter.
The
selected
attribute control the initial selection, displayed after the view is loaded.
You can get the selected radio button or drop-down list value selected by the user:
var selectedValue =
form.getFieldValue('cost_tran_recur.costs_from');
You can add options to the drop-down list, and clear them:
var field = this.locationFilter.fields.get('costs_from');
// clear all options in the list
field.clearOptions();
// add an option
field.addOption('cost_sched', getMessage('cost_sched'));
View example: http://localhost:8080/archibus/schema/ab-products/solutions/parts/form/ab-ex-form-panel-radio-check-combo.axvw