Parent | Child | Previous | Next
 

DropDownBox PropertiesJavascript control

Description

Enables rendering a dropdown box control as a "Javascript control", which allows additional customization of the look of the dropdown box control and gives access to JavaScript methods to manipulate the choices in the control.

Discussion

By default, the dropdown box control is rendered using the HTML input control (e.g. <select> <option>...</option> ... </select>). The default HTML input control is difficult to customize the look and feel. It also lacks JavaScript methods for repopulating the dropdown box options easily.

The Javascript control option converts the dropdown box control into a JavaScript dropdown box control. As a JavaScript control, Alpha Anywhere creates a JavaScript object you can use in client-side scripts to manipulate the options in the control. You also can also add custom CSS classes or inline-styles to customize the look of the dropdown box control.

For example, in the images below, the dropdown box control has been rendered with a custom In-line style.

images/dropdownboxJS1.png

To enable the Javascript control option, check the Javascript control property in the Property Sheet.

images/dropdownboxJS2.png

The Settings property is shown when Javascript control is checked. Settings can be used to customize the look (i.e. CSS) for the dropdown box options.

images/jscontrol4.png

Configuring Control Settings

Once enabled, you have access to the following options to configure the control:

Getting the Control's JavaScript Object

To get a pointer to the dropdown box's JavaScript object, use the [{dialog.object}.getControl()] method. For example:

var dropdownObj = {dialog.object}.getControl("DROPDOWNBOX_1");
if (dropdownObj) {
    ' Object exists! Can call methods on it.
}

Once you have a pointer to the object, you can call methods on the object, such as the populate() method to repopulate the choices in the control.

The following methods are available:

Method
Description
populate()

Updates the control's choices. This method can be used to replace or add the control's options.

var obj = {dialog.object}.getControl('DROPDOWNBOX2');
if (obj) {
    var arr = [];
    arr.push({"text":"Mon","value":"1"});
    arr.push({"text":"Tue","value":"2"});
    arr.push({"text":"Wed","value":"3"});
    arr.push({"text":"Thu","value":"4"});
    arr.push({"text":"Fri","value":"5"});
    arr.push({"text":"Sat","value":"6"});
    arr.push({"text":"Sun","value":"7"});
    
    var keep = false;
    var animate = true;
    
    obj.populate(arr,keep,animate);
    obj.refresh();
}
refresh()

Redraws the control. The refresh() method is usually called after repopulating the control's choices using the populate() method.

var obj = {dialog.object}.getControl('DROPDOWNBOX2');
if (obj) {
    obj.refresh();
}
setDisabled()

Enables or disables the control. The control can also be enabled or disabled using the {dialog.object}.setDisabled() method.

var obj = {dialog.object}.getControl('DROPDOWNBOX2');
if (obj) {
    if (Reflect.has({dialog.object}._myvars, 'dropdownEnabled') == false) {
        {dialog.object}._myvars.dropdownEnabled = true;
    }
    obj.setDisabled({dialog.object}._myvars.dropdownEnabled);
    {dialog.object}._myvars.dropdownEnabled = !{dialog.object}._myvars.dropdownEnabled;
}

See Reflect (MDN) to learn more about this native built-in JavaScript object.

setValue()

Sets the control's value. The value can also be set using the {dialog.object}.setValue() method.

var obj = {dialog.object}.getControl('DROPDOWNBOX2');
if (obj) {
    var value = parseInt({dialog.object}.getValue('DROPDOWNBOX2'),10);
    value += 1;
    value = (value > 7)? 1:value;
    obj.setValue(value+"");
}

A dropdown box only has a JavaScript object when Javascript control is enabled.

Videos

Rendering RadioButton, CheckBox and DropDownBox as a Javascript Control

By default, the RadioButton, CheckBox and DropDownBox controls are not Javascript controls (like the List control, for example) and as such, you can't call methods on the control to repopulate the choices shown in the control. You can however specify that these controls should be rendered as Javascript controls (which will then allow the choices in the control to be set using the control's .populate() method).

In this video, we show how a RadioButton control can be rendered as a Javascript control.

Download Component