Combobox
Overview
Combobox is a standard input component that allows the user to pick one of the options in it's drop-down list.
To see a live sample of the component you can go here.
Get Started

Add a Combobox to a form
In the Form Editor, drag the Combobox component from the Pallet onto the form, then select a dataprovider and a valuelist.

Modifying a Combobox at Design-Time
Comboboxes, like all components, have properties that can be modified at design time to set the appearance and behavior of the component. Select the label in the Form Editor to see a list of properties in the Component Properties Editor. Below are some common properties and how to set them at design time.
Setting the data-provider
Combobox's dataprovider can be set after the component has been added to the form or by setting it in dataprovider property, found in the Component Properties Editor.
Setting the valuelist
Combobox's valuelist can be set it in valuelist property, found in the Component Properties Editor and it should match the set dataprovider.
Example:
In order to get a drop down menu with orders' ship countries, the followings settings should be made:
set
shipcountry
as the Combobox dataproviderin case it doesn't exist, create a valuelist using Table values and
shipcountry
column as dataproviderset the countries list in valuelist property of the Combobox
Handling Click Events
Like most components, Comboboxes have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a combobox is the onDataChange
event, which is triggered when the combobox is clicked and the value is changed.
To Handle the event, double-click the value for the onDataChange property in the Properties Editor. You will see the Method Selection Wizard. You'll have the option to select an existing Method or create a new Method. The method will be called when the Combobox's onDataChange
event is fired and the Event object will be passed to it.

/**
*
* @param oldValue
* @param newValue
* @param {JSEvent} event
*
* @return {Boolean}
*
* @private
*
* @properties={typeid:24,uuid:"D2499C52-AC5E-4C9E-9B51-1415F0E83D04"}
*/
function onDataChange(oldValue, newValue, event) {
//enable and disable another page element according to the selected value
if (newValue == 'Yes')
{
elements.buttonDetails.enabled = true;
} else {elements.buttonDetails.enabled = false;}
return true;
}
Modifying a Combobox at Runtime
Comboboxes, like many components, can be modified at runtime through code. Below are a few examples of controlling a Combobox from code.
Enabling / Disabling a Combobox
You can easily change the enabled
state of a Combobox at runtime.
Example:
function disableCombobox(){
elements.myCombobox.enabled = false;
}
Hiding/Showing a Combobox
You can easily change the visible
state of a Combobox at runtime.
Example:
function hideCombobox(){
elements.myCombobox.visible = false;
}
Calling Combobox API Methods
Like most components, a Combobox has API methods which can be called from code. Below is an example of common API calls.
Add CSS Style Class
You can easily add a style class to a Combobox using the addStyleClass
method.
Example:
function AddStyleClassCombobox(){
elements.myCombobox.addStyleClass('mycssclass');
}
Related Articles
The following articles are recommended for additional reading
Last updated
Was this helpful?