Use myTab.addCheckbox() to add a checkbox to a tab, where myTab is a Tab object. If your Klip requires a large number of checkboxes, consider using a ComboBox control instead.

Example

 function onLoad() {
 
     // Create a new tab
     var tab = Setup.addTab( "New Tab" );
 
     // Add a checkbox to the tab
     checkBox = tab.addCheckbox( "New CheckBox" );
 }
 

Each Tab object in the Setup array corresponds to a tab in a Customize Klip window. This window is visible when you right-click on a Klip and choose '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.

Properties Detail

checked

boolean checked

The checked (true) or unchecked (false) state of this checkbox.

disabled

boolean disabled

The enabled (true) or disabled (false) state of this checkbox.

radio

boolean radio

Make checkbox appear as a radio button instead of a checkbox (default false).

When set to true, Klipfolio Dashboard renders the checkbox as a radio button. The logic of the checkbox does not change (it is still a checkbox), but with appropriate Handler Functions on the checkbox, they can appear to work exactly like a group of radio buttons (see example below).

Example:
The following Klip creates two checkboxes and displays them as radio buttons.

When the user clicks one of the checkboxes, the event handler determines which checkbox was clicked, checks it, and unchecks the other. To the user, this makes the checkboxes look and behave exactly like radio buttons.



<klip>
   <identity>
      <title>
         API: Checkbox Radio
      </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 checkBox1, checkBox2;
 
 function onLoad() {
 
     // Create a new tab
     var tab = Setup.addTab( "New Tab" );
 
     // Add a drop-down combo box to the tab
     checkBox1 = tab.addCheckbox( "First CheckBox" )
     checkBox2 = tab.addCheckbox( "Second CheckBox" )
     
     checkBox1.radio = true;
     checkBox2.radio = true;
 
     checkBox1.checked = true;  	// set first checkbox by default
 
     checkBox1.onClick = checkBox_onClick;
     checkBox2.onClick = checkBox_onClick;
 }
 
 function checkBox_onClick( state ) {
     trace( "You clicked: '" + this.value + "'\r\n");

     if (this == checkBox1) {		// clicked on checkBox1
     	checkBox1.checked = true;
     	checkBox2.checked = false;
     }
     
     if (this == checkBox2) {		// clicked on checkBox2
      	checkBox1.checked = false;
     	checkBox2.checked = true;
     }
     
     trace( "checkBox1 state: " + checkBox1.checked + "\r\n" );
     trace( "checkBox2 state: " + checkBox2.checked + "\r\n" );
     
     trace( "\r\n" );
 }

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

     	

Clicking the second checkbox and then the first checkbox outputs the following trace to Klip's Debug Window.


 You clicked: 'Second CheckBox'
 checkBox1 state: false
 checkBox2 state: true
 
 You clicked: 'First CheckBox'
 checkBox1 state: true
 checkBox2 state: false
 

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

value

String value

The label displayed by this checkbox.

onClick

function onClick( [<boolean> state] )

Specifies a Handler Function for Klipfolio Dashboard to call when the user clicks the checkbox.

Example:
The following Klip creates a new tab called 'New Tab', then creates two checkboxes: 'Checkbox 1' and 'Checkbox 2'. It assigns the handler function checkbox_onClick to each checkbox. Klipfolio Dashboard passes a reference to the Checkbox object via the instance variable this.



<klip>
   <identity>
      <title>
         API: Checkbox
      </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 checkbox1, checkbox2;

function onLoad() {

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

    // Add a checkbox to the tab
    checkbox1 = tab.addCheckbox( "CheckBox 1");
    checkbox1.onClick = checkbox_onClick;                           
    
    checkbox2 = tab.addCheckbox( "CheckBox 2");
    checkbox2.onClick = checkbox_onClick;                           
    
    
}

function checkbox_onClick() {
    trace( "You clicked on: " + this.value + "\r\n" );
    trace( "New state: " + this.checked + "\r\n" );
    trace( "\r\n" );
}


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

     	

When you interact with the checkboxes, the Klip shows their new state using trace output to Klip's Debug Window.


 You clicked on: CheckBox 1
 New state: true
 
 You clicked on: CheckBox 2
 New state: true
 
 You clicked on: CheckBox 2
 New state: false
 

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

Parameters:
state - the checked (true) or unchecked (false) state of this checkbox after the user's click