Multiple Choice

Data Source

Select the source from which the field fetches the list of options.

To access the property, click a field on the form to open the property panel: Data Source → Type.

Static List

The list of options is static and stored on a form.

Add a list of options to the Options property. Each option should be on a new line, as shown here:

Enable Allow user value to allow users to enter a custom value that is not included in the list of options:

Columns

Specify the layout of the options. By default, the options are grouped into three columns.

Get or set field value

Get or set the Multiple Choice field value:

//return field value as an array of strings
fd.field('Field1').value;

//set field value
fd.field('Field1').value = ['Item 1', 'Item 2'];

Handle change event

Execute a function when a field value has been changed:

fd.field('Field1').$on('change', function(value) {
    //log changes to browser's console
    console.log('New value: ' + value);
});

Make field required

Make a field required or optional:

//make field required
fd.field('Field1').required = true;

//make field not required
fd.field('Field1').required = false;

Disable field

Make a field non-editable. The field value can still be changed with JavaScript and saved:

//disabled field
fd.field('Field1').disabled = true;

//enable field
fd.field('Field1').disabled = false;

Get HTML element

Access HTML element inside the field in order to modify it, hide it, or do something else.

//access field's control
var htmlField = fd.field('Field1').$el;

//access field's block, which includes title and control
var htmlFullField = fd.field('Field1').$parent.$el;

Hide field

Hide a field from a user. The field value can still be accessed and changed with JavaScript:

//hide field
fd.field('Field1').hidden = true;

//show field
fd.field('Field1').hidden = false;

Allow custom values

Define whether a user is allowed to enter a custom value that is not included in the list of options.

//turn on custom values
fd.field('Field1').allowUserValue = true;

//turn off custom values
fd.field('Field1').allowUserValue = false;

Change field options

Change the Multiple Choice field options:

fd.field('Field1').options = ['New option 1', 'New option 2', 'New option 3'];

Limit number of selectable options

You can limit the number of selectable options with field validation:

//prevent user from selecting more than 3 options
fd.field('Field1').addValidator({
    name: 'Field1 options validation',
    error: 'No more than 3 options',
    validate: function(value){
        if(value.length > 3){
            return false;
        }
        return true;
    }
});

Columns

Specify the number of columns by which the options will be grouped:

//group by 2 columns
fd.field('Field1').columnsNumber = 2;

Retrieve extra columns

To get values from Excel data source extra columns property, use the following code:

var item = fd.field('Field1').selectedItem; //returns the object containing all columns of the first selected item
var items = fd.field('Field2').selectedItems; //returns an array for objects containing all columns of the selected items

To get values to populate other fields, check this example:

//example use case
fd.rendered(function() {
    var officesField = fd.field('Offices');
    officesField.$on('change', value => {
        var officesData = officesField.selectedItems;
        if (officesData) {
            var countries = '';
            officesData.forEach(office =>
                countries += office.Country + '; '
            );
            fd.field('Countries').value = countries;
        } else {
            fd.field('Countries').value = '';
        }
    });
});