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