Use myTab.addButton() to add a button to a tab, where myTab is a Tab object.

Example

 function onLoad() {
 
     // Create a new tab
     var tab = Setup.addTab( "New Tab" );
 
     // Add a button to the tab
     button = tab.addButton( "New Button" );
     button.url = "http://www.klipfolio.com/";
 }
 

Each Tab object in the Setup array corresponds to a tab in a Klip's Customize Klip window.

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.

Buttons typically open a url in a new web page (as shown in the example) or cause Klipfolio Dashboard to execute a handler function defined using the onClick() property.

Properties Detail

disabled

boolean disabled

The enabled/disabled state of this button. The default value is false.

url

String url

The URL that Klipfolio Dashboard will open in the user's web browser when the button is clicked.

A button with a url defined does not require an onClick() handler function to open the URL.

value

String value

The label displayed by this button.

onClick

function onClick()

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

Example:
The following Klip creates a new tab called 'New Tab', then adds a button called 'New Button' and assigns it the handler function button_onClick.



<klip>
   <identity>
      <title>
         API: Button
      </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[

function onLoad() 
{

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

    // Add a button to the tab
    button = tab.addButton( "New Button" );
    
    // Assign a handler
    button.onClick = button_onClick;                           
}

function onRefresh()
{
	return Engines.Data.process( Prefs.contentsource );
}

function button_onClick() {
    trace( "You clicked the button: " + this.value + "\r\n" );                       
}

   ]]>
   </klipscript>
</klip>

     	

Clicking the 'New Button' button in the 'New Tab' in the Customize Klip window outputs the following trace to Klip's Debug Window.


 You clicked the button: New Button
 

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

Klipfolio Dashboard executes the handler function (if one is defined) for a button before checking the url property. This allows you to dynamically assign a URL when the user clicks the button. When the Handler Function exits, Klipfolio Dashboard opens the url (if defined) in the user's web browser.