Use myTab.addComboBox() to add a combobox to a tab, where myTab is a Tab object.

Example

 function onLoad() {
 
     // Create a new tab
     var tab = Setup.addTab( "New Tab" );
 
     // Add a drop-down combo box to the tab
     comboBox = tab.addComboBox();
   
     // Add three items 
     comboBox.addItem( "1st Item" );
     comboBox.addItem( "2nd Item" );
     comboBox.addItem( "3rd Item" );
 }
 

Each Tab object in the Setup array corresponds to a tab in a Klip's Customize window. This window is visible when a user right-clicks on a Klip and chooses the command 'Customize Klip...'

Each Tab object can have multiple UI components, and each Klip can have multiple tabs. Use the Button, Checkbox, ComboBox, ListControl, Spacer, Text, TextArea, and TextField objects in a tab to enable users to configure the Klip to their preferences.

Accessing ComboBox as an Array

     // Change the second item
     comboBox[1] = "This is a new second item";   
 

Properties Detail

disabled

boolean disabled

The enabled (true) or disabled (false) state of this combobox. The default value is false.

length

integer length

The number of items in the combobox (read-only).

selected

integer selected

The index of the item currently selected by the user.

value

String value

The text of the item currently selected by the user.

addItem

function addItem( <String> name )

Appends a new item to the combobox.

Parameters:
name - the text of the item to append

clear

function clear()

Clears all items from the combobox.

delItem

Boolean delItem( <String> name | <integer> index )

Deletes a specified item in the combobox.

Note: delItem accepts either the name of an item or its index as a parameter.

Example:
For example, the following Klip creates a new tab called 'New Tab', then adds a combobox with four entries, then deletes the first by index and second entry by name.



<klip>
   <identity>
      <title>
         API: ComboBox.delItem
      </title>
   </identity>
   <locations>
      <contentsource>
         http://support.klipfolio.com/files/demo/demo.xml
      </contentsource>
      <icon>
         http://www.klipfolio.com/static/klips/klipfolio/sample_icon.png
      </icon>
      <banner>
         http://www.klipfolio.com/static/klips/klipfolio/sample_banner.png   
      </banner>
   </locations>
   <style>
      alert {
         type: item;
      }

      sender {
         itemcol: 2;
         noterow: 1;

         label: 'Sender';

         emphasis: strong;
      }


      summary {
         itemcol: 3;
         noterow: 4;

         wrap: false;

         notelabel: false;
      }

      date {
         itemcol: 4;
         noterow: 2;

         label: 'Date';
      }

      category {
         noterow: 3;

         label: 'Category';
      }


      level {
         itemcol: 1;
         noterow: 5;
         notelabel: false;
         
         type: image;
      }

      url {
         type: link;
      }
            
      id {
         key: override;
      }
   </style>
   <klipscript>
   <![CDATA[

var comboBox;

function onLoad() {

    // Create a new tab
    var tab = Setup.addTab( "New Tab" );

    // Add a drop-down comboBox to the tab
    comboBox = tab.addComboBox();
  
    // Add three items 
    comboBox.addItem( "First Item" );
    comboBox.addItem( "Second Item" );
    comboBox.addItem( "Third Item" );
    comboBox.addItem( "Fourth Item" );

    // Add a handler
    comboBox.onChange = comboBox_onChange;
    
    // Delete item by index
    comboBox.delItem( 0 );
    
    // Delete item by name
    comboBox.delItem( "Second Item" );
}

function comboBox_onChange( index ) {
    trace( "You selected index " + index + " which is '" + this[index] + "'\r\n" );
    trace( "\r\n" );
    // Note: Could use 'this.selected' instead of 'index'
}


function onRefresh()
{
	return Engines.Data.process( Prefs.contentsource );
}
  
   ]]>
   </klipscript>
</klip>

     	

Parameters:
name - the name of the item to be deleted from the combobox
index - the index of the item to be deleted from the combobox

Returns:
true if the specified item could be found and removed, otherwise returns false.

onChange

function onChange( [<integer> index] )

Specifies a Handler Function for Klipfolio Dashboard to call when the user selects an item in the combobox.

Example:
The following Klip creates a new tab called 'New Tab', then creates a combobox and assigns it the handler function comboBoxOnChange.



<klip>
   <identity>
      <title>
         API: ComboBox
      </title>
   </identity>
   <locations>
      <contentsource>
        http://support.klipfolio.com/files/demo/demo.xml
      </contentsource>
      <icon>
         http://www.klipfolio.com/static/klips/klipfolio/sample_icon.png
      </icon>
      <banner>
         http://www.klipfolio.com/static/klips/klipfolio/sample_banner.png   
      </banner>
   </locations>
   <style>
      alert {
         type: item;
      }

      sender {
         itemcol: 2;
         noterow: 1;

         label: 'Sender';

         emphasis: strong;
      }


      summary {
         itemcol: 3;
         noterow: 4;

         wrap: false;

         notelabel: false;
      }

      date {
         itemcol: 4;
         noterow: 2;

         label: 'Date';
      }

      category {
         noterow: 3;

         label: 'Category';
      }


      level {
         itemcol: 1;
         noterow: 5;
         notelabel: false;
         
         type: image;
      }

      url {
         type: link;
      }
            
      id {
         key: override;
      }
   </style>
   <klipscript>
   <![CDATA[

var comboBox;

function onLoad() {

    // Create a new tab
    var tab = Setup.addTab( "New Tab" );

    // Add a drop-down comboBox to the tab
    comboBox = tab.addComboBox();
  
    // Add three items 
    comboBox.addItem( "First Item" );
    comboBox.addItem( "Second Item" );
    comboBox.addItem( "Third Item" );

    // Add a handler
    comboBox.onChange = comboBox_onChange;
}

function comboBox_onChange( index ) {
    trace( "You selected index " + index + " which is '" + this[index] + "'.\r\n" );
    // Note: Could use 'this.selected' instead of 'index'
}

function onRefresh()
{
	return Engines.Data.process( Prefs.contentsource );
}
 
   ]]>
   </klipscript>
</klip>

     	

Open the Klip's Customize window and interact with the comboboxes. You'll see a similar output to Klip's Debug Window.


 You selected index 1 which is 'Second Item'.
 You selected index 0 which is 'First Item'.
 

Klipfolio Dashboard passes a reference to the ComboBox object via the instance variable this.

Note: Notice the assignment to the handler function is comboBox_onChange, not comboBox_onChange(). The former is a function, while the latter is the return value from a function call.

Parameters:
index - the index of the item the user selected [optional]