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

Combobox

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.

Create Combobox

If the component does not appear in the pallet, it means you do not have the Bootstrap Components package installed. Click "Get more components" at the top of the pallet to open the Servoy Package Manager and install it.

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.

See the reference docs for Combobox for a complete list of its properties.

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:

1. set shipcountry as the Combobox dataprovider

2. in case it doesn't exist, create a valuelist using Table values and shipcountry column as dataprovider

3. set 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.

Create method to handle the onDataChange event

/**
 *
 * @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;
}

See the Combobox reference for a comprehensive list of all events

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');
}

See the Combobox reference for a complete list of programmable properties and methods.

Related Articles

The following articles are recommended for additional reading

• Combobox Reference Documentation

• Styling and Themes

• Scripting the UI